Używanie elementu przycisku HTML5 jako formularza kontaktowego 7 Prześlij
Posiadanie witryny WordPress oznacza, że najprawdopodobniej będziesz potrzebować gdzieś formularza kontaktowego, niezależnie od tego, czy jest to newsletter, strona kontaktowa, ankieta, czy coś innego. W przypadku CMS, takiego jak WordPress, skonfigurowanie formularza kontaktowego jest dość prostym zadaniem. Mianowicie, istnieje wiele wtyczek formularzy kontaktowych, z których można korzystać, a Contact Form 7 jest jednym z najpopularniejszych.
Abyś miał jaśniejszy obraz tego, co może zrobić wtyczka Contact Form 7, oto kilka przykładów formularzy kontaktowych utworzonych za pomocą tej wtyczki, które są dostarczane z motywami premium w ThemeForest:
Nie tylko tworzenie dowolnego formularza kontaktowego w WordPressie jest łatwe, ale sam proces jest również dobrze udokumentowany. Dlatego przejdziemy od razu do sedna.
Korzystając z tej wtyczki, nie będziesz musiał przechodzić przez kłopoty z tworzeniem niestandardowego formularza i funkcjonalności zaplecza, co drastycznie przyspieszy proces. Jednak problematyczny może okazać się przycisk przesyłania Formularza kontaktowego 7, który jest elementem wejściowym typu „prześlij".
Nawet ze standardowym przyciskiem przesyłania danych wejściowych będziesz miał ładny, działający formularz. Jednak problem pojawia się, jeśli chcesz dodać dodatkową stylizację dla tego elementu. Jak już zapewne wiesz, istnieją pewne ograniczenia, jeśli chodzi o css, ponieważ nie możesz tutaj użyć pseudoelementów, takich jak :before lub :after, które mogą być przydatne do dodania podkreślenia najechania kursorem, ikonicznej ikony czcionki lub czegokolwiek innego do animacji co byłoby miłym wykończeniem twojej formy.
Oczywiście możliwe jest osiągnięcie znakomitych animacji po prostu przez zawijanie przycisku przesyłania jakimś div z własną klasą, ale zmieniając dane wejściowe na przycisk, możesz mieć znacznie większą kontrolę.
Zobaczmy, jak możesz użyć elementu przycisku HTML5 jako przycisku przesyłania w formularzu kontaktowym.
Przed zmianą przycisk przesyłania będzie wyglądał tak.
Najpierw musimy usunąć domyślny tag przesyłania formularza kontaktowego 7. Możesz to zrobić za pomocą tej prostej linii kodu:
/ usuwanie domyślnego tagu przesyłania /
remove_action (‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ usuwanie domyślnego tagu przesyłania / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');Po drugie, musimy dodać akcję z naszą funkcją, która będzie przechowywać nasz niestandardowy znacznik dla przycisku. To kolejna prosta linia:
/ dodanie akcji z funkcją obsługującą nasz znacznik przycisku /
add_action(‘wpcf7_init’, ‘dwadzieścia szesnaście_dziecko_cf7_button’);
/ dodanie akcji z funkcją obsługującą nasz znacznik przycisku / add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/*adding action with function which handles our button markup*/
add_action('wpcf7_init', 'twentysixteen_child_cf7_button');Następnie dodajemy tag, który wywoła funkcję obsługi przycisku:
/ dodanie tagu przycisku przesyłania /
if (! function_exists(‘dwadzieścia szesnaście_dzieci_cf7_button’)) {
funkcja dwadzieścia szesnaście_dziecko_cf7_button() {
wpcf7_add_form_tag(‘prześlij’, ‘twentysixteen_child_cf7_button_handler’);
/ dodanie znacznika przycisku submit / if (!function_exists(‘dwadzieścia szesnaście_dziecko_cf7_button’)) { function dwadzieścia szesnaście_dziecko_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘dwadzieścia szesnaście_dziecko_cf7_button_handler’); } }
/*adding out submit button tag*/
if (!function_exists('twentysixteen_child_cf7_button')) {
function twentysixteen_child_cf7_button() {
wpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');
}
}Na koniec musimy dodać znacznik do procedury obsługi:
/ przycisk out znacznik wewnątrz handlera /
if (!function_exists(‘dwadzieścia szesnaście_dziecko_cf7_button_handler’)) {
funkcja dwadzieścia szesnaście_dziecko_cf7_button_handler($tag) {
$tag = nowy WPCF7_FormTag($tag);
$klasa = wpcf7_form_controls_class($tag->typ);
$atts[‘class’] = $tag->get_class_option($class);
$atts[‘class’] .= ‘ dwadzieścia szesnaście-dzieci-niestandardowe-btn’;
$atts[‘id’] = $tag->get_id_option();
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);
$wartość = isset($tag->values[0])? $tag->wartości[0]: “;
$wartość = esc html_ (‘Skontaktuj się z nami’, ‘dwadzieścia szesnaście’);
$atts[‘typ’] = ‘prześlij’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $atty, $wartość);
/ out znacznik przycisku wewnątrz handlera / if (! funkcja istnieje(‘ dwadzieścia szesnaście child_cf7_button_handler’)) { function dwadzieścia szesnaście_dziecko_cf7_button_handler($tag) { $tag = new WPCF7_FormTag($tag); $klasa = wpcf7_form_controls_class($tag->typ); $atts = tablica(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘class’] .= ‘ dwadzieścia szesnaście-dzieci-niestandardowe-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $wartość = isset($tag->values[0])? $tag->wartości[0]: “; if (empty($value)) { $value = esc_html („Skontaktuj się z nami”, „dwadzieścia szesnaście”); } $atts[‘typ’] = ‘prześlij’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atty, $wartość); zwróć $html; } }
/*out button markup inside handler*/
if (!function_exists('twentysixteen_child_cf7_button_handler')) {
function twentysixteen_child_cf7_button_handler($tag) {
$tag = new WPCF7_FormTag($tag);
$class = wpcf7_form_controls_class($tag->type);
$atts = array();
$atts['class'] = $tag->get_class_option($class);
$atts['class'] .= ' twentysixteen-child-custom-btn';
$atts['id'] = $tag->get_id_option();
$atts['tabindex'] = $tag->get_option('tabindex', 'int', true);
$value = isset($tag->values[0])? $tag->values[0]: '';
if (empty($value)) {
$value = esc_html__('Contact Us', 'twentysixteen');
}
$atts['type'] = 'submit';
$atts = wpcf7_format_atts($atts);
$html = sprintf('', $atts, $value);
return $html;
}
}Najważniejsza jest funkcja obsługi. Oprócz drukowania domyślnej klasy i identyfikatora, dodamy do niego również niestandardową klasę css. W ostatniej części, w której mamy zmienną $html, umieszczamy znacznik przycisku z ikoną jodełkową FontAwesome. Pamiętaj, że musisz mieć tę czcionkę FontAwesome w swoim motywie. Jeśli go nie masz, upewnij się, że znajdziesz wtyczkę, która go zawiera.
Teraz nasz zmieniony przycisk przesyłania będzie wyglądał tak:
Jak widać, gdy sprawdzasz swoją stronę za pomocą inspektora sieci Chrome, zawiera ona dokładnie te same znaczniki, które ustawiliśmy w module obsługi.
A oto kompletny kod:
/ usuwanie domyślnego tagu przesyłania /
remove_action (‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ dodanie akcji z funkcją obsługującą nasz znacznik przycisku /
add_action(‘wpcf7_init’, ‘dwadzieścia szesnaście_dziecko_cf7_button’);
/ dodanie tagu przycisku przesyłania /
if (! function_exists(‘dwadzieścia szesnaście_dzieci_cf7_button’)) {
funkcja dwadzieścia szesnaście_dziecko_cf7_button () {
wpcf7_add_form_tag(‘prześlij’, ‘twentysixteen_child_cf7_button_handler’);
/ przycisk out znacznik wewnątrz handlera /
if (!function_exists(‘dwadzieścia szesnaście_dziecko_cf7_button_handler’)) {
funkcja dwadzieścia szesnaście_dziecko_cf7_button_handler($tag) {
$tag = nowy WPCF7_FormTag($tag);
$klasa = wpcf7_form_controls_class($tag->typ);
$atts[‘class’] = $tag->get_class_option($class);
$atts[‘class’] .= ‘ dwadzieścia szesnaście-dzieci-niestandardowe-btn’;
$atts[‘id’] = $tag->get_id_option();
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);
$wartość = isset($tag->values[0])? $tag->wartości[0]: “;
$wartość = esc html_ (‘Wyślij’, ‘dwadzieścia szesnaście’);
$atts[‘typ’] = ‘prześlij’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $atty, $wartość);
/ usuwanie domyślnego tagu przesyłania / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); / dodanie akcji z funkcją obsługującą nasz znacznik przycisku / add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); / dodanie znacznika przycisku submit / if (!function_exists(‘dwadzieścia szesnaście_dziecko_cf7_button’)) { function dwadzieścia szesnaście_dziecko_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘dwadzieścia szesnaście_dziecko_cf7_button_handler’); } } / przycisk out znacznik wewnątrz handlera / if (!funkcja istnieje(‘dwadzieścia szesnaściechild_cf7_button_handler’)) { function dwadzieściasixteen_child_cf7_button_handler($tag) { $tag = nowy WPCF7_FormTag($tag); $klasa = wpcf7_form_controls_class($tag->typ); $atts = tablica(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘class’] .= ‘ dwadzieścia szesnaście-dzieci-niestandardowe-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $wartość = isset($tag->values[0])? $tag->wartości[0]: “; if (empty($value)) { $value = esc_html (‘Wyślij’, ‘dwadzieścia szesnaście’); } $atts[‘typ’] = ‘prześlij’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atty, $wartość); zwróć $html; } }
/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');
/*adding action with function which handles our button markup*/
add_action('wpcf7_init', 'twentysixteen_child_cf7_button');
/*adding out submit button tag*/
if (!function_exists('twentysixteen_child_cf7_button')) {
function twentysixteen_child_cf7_button() {
wpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');
}
}
/*out button markup inside handler*/
if (!function_exists('twentysixteen_child_cf7_button_handler')) {
function twentysixteen_child_cf7_button_handler($tag) {
$tag = new WPCF7_FormTag($tag);
$class = wpcf7_form_controls_class($tag->type);
$atts = array();
$atts['class'] = $tag->get_class_option($class);
$atts['class'] .= ' twentysixteen-child-custom-btn';
$atts['id'] = $tag->get_id_option();
$atts['tabindex'] = $tag->get_option('tabindex', 'int', true);
$value = isset($tag->values[0])? $tag->values[0]: '';
if (empty($value)) {
$value = esc_html__('Send', 'twentysixteen');
}
$atts['type'] = 'submit';
$atts = wpcf7_format_atts($atts);
$html = sprintf('', $atts, $value);
return $html;
}
}Gdy wszystko jest na swoim miejscu, możesz użyć dodatkowych klas i znaczników, aby dostosować styl przycisku do własnych upodobań. Jako dodatek dodamy do niego prostą animację najechania z poniższym kodem css.
button.dwadzieścia szesnaście-dziecko-niestandardowe-btn {
-webkit-transition: -webkit-background .2s złagodzenie;
-moz-transition: -moz-background .2s luz;
przejście: łatwość tła .2s;
button.dwadzieścia szesnaście-dzieci-niestandardowy-btn .dwadzieścia szesnaście-dziecko-niestandardowy-btn-tekst {
button.dwadzieścia szesnaście-dziecko-niestandardowa-btn .dwadzieścia szesnaście-dziecko-niestandardowa-ikon {
-webkit-transition: -webkit-transform .2s łagodzenie;
-moz-transition: -moz-transform .2s luz;
przejście: transformacja .2s luz;
button.dwadzieścia szesnaście-dzieci-niestandardowa-btn:najedź .dwadzieścia szesnaście-dziec-niestandardowa-ikona {
-transformacja webkit: translate3d(3px,0,0);
-moz-transform: translate3d(3px,0,0);
transformacja: translate3d(3px,0,0);
button.twentysixteen-child-custom-btn { padding: 15px 45px; -webkit-transition: -webkit-background .2s złagodzenie; -moz-transition: -moz-background .2s luz; przejście: łatwość tła .2s; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text { margines-prawy: 7px; rozmiar czcionki: 15px; } button.dwadzieścia szesnaście-dziecko-niestandardowe-btn .dwadzieścia szesnaście-dziecko-niestandardowa-ikona { rozmiar-czcionki: 12px; pozycja: względna; wyświetlacz: inline-block; wyrównanie w pionie: środek; wysokość linii: dziedziczenie; -webkit-transition: -webkit-transform .2s łagodzenie; -moz-transition: -moz-transform .2s luz; przejście: transformacja .2s luz; } button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon { -webkit-transform: translate3d(3px,0,0); -moz-transform: translate3d(3px,0,0); transformacja: translate3d(3px,0,0); }
button.twentysixteen-child-custom-btn {
padding: 15px 45px;
-webkit-transition: -webkit-background .2s ease-out;
-moz-transition: -moz-background .2s ease-out;
transition: background .2s ease;
}
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {
margin-right: 7px;
font-size: 15px;
}
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {
font-size: 12px;
position: relative;
display: inline-block;
vertical-align: middle;
line-height: inherit;
-webkit-transition: -webkit-transform .2s ease-out;
-moz-transition: -moz-transform .2s ease-out;
transition: transform .2s ease-out;
}
button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {
-webkit-transform: translate3d(3px,0,0);
-moz-transform: translate3d(3px,0,0);
transform: translate3d(3px,0,0);
}CSS można dodać do pliku css motywu potomnego lub po prostu z zaplecza WordPress> Wygląd> Dostosuj> Dodatkowe pole CSS, a wraz z nim będziesz mieć ładnie wyglądającą animację poruszającej się strzałki po najechaniu myszą.
I w ten sposób zastępujesz przycisk przesyłania Formularza kontaktowego 7 elementem przycisku HTML5. Mamy nadzieję, że nasze instrukcje okażą się pomocne. Jeśli tak, podziel się nim z innymi, którzy również mogą z niego skorzystać.