Utilizzo di un elemento pulsante HTML5 come modulo di contatto 7 Invia
Avere un sito Web WordPress significa che molto probabilmente dovrai avere un modulo di contatto da qualche parte, che si tratti di una newsletter, una pagina di contatto, un sondaggio o qualcos’altro. Con CMS come WordPress, impostare un modulo di contatto è un compito abbastanza semplice. Vale a dire, ci sono molti plug-in per moduli di contatto che puoi utilizzare e Contact Form 7 è uno dei più popolari.
Per avere un quadro più chiaro di ciò che può fare il plug-in Contact Form 7, ecco alcuni esempi di moduli di contatto realizzati con questo plug-in che vengono forniti con temi premium su ThemeForest:
Non solo è facile creare qualsiasi tipo di modulo di contatto in WordPress, ma anche il processo stesso è ben documentato. Ecco perché andremo dritti al punto.
Utilizzando questo plugin, non dovrai creare un modulo personalizzato e funzionalità di back-end, che accelereranno drasticamente il processo. Tuttavia, ciò che potresti trovare problematico è un pulsante di invio del modulo di contatto 7 che è un elemento di input di type="submit".
Anche con il pulsante di invio input standard, avrai un bel modulo funzionante. Tuttavia, il problema sorge se si desidera aggiungere uno stile aggiuntivo per questo elemento. Come forse già saprai, ci sono alcune limitazioni quando si tratta di css poiché non puoi usare gli pseudo elementi qui, come :before o :after che possono essere utili per aggiungere una sottolineatura al passaggio del mouse, un’icona del carattere iconico o qualsiasi altra cosa per l’animazione che sarebbe un bel tocco finale per la tua forma.
Ovviamente, potrebbe essere possibile ottenere animazioni eccezionali semplicemente avvolgendo un pulsante di invio con un div con una classe personalizzata, ma cambiando l’input in pulsante, puoi avere molto più controllo.
Vediamo come utilizzare un elemento pulsante HTML5 come pulsante di invio per il modulo di contatto.
Prima della modifica, un pulsante di invio sarà simile a questo.
Innanzitutto, dobbiamo rimuovere il tag di invio Contact Form 7 predefinito. Puoi farlo con questa semplice riga di codice:
/ rimozione del tag di invio predefinito /
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ rimozione del tag di invio predefinito / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');In secondo luogo, dobbiamo aggiungere un’azione con la nostra funzione che conterrà il nostro markup personalizzato per il pulsante. Questa è un’altra semplice riga:
/ aggiunta di azioni con funzione che gestisce il markup dei nostri pulsanti /
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/ aggiunta di azioni con la funzione che gestisce il markup del nostro pulsante / 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');Successivamente, stiamo aggiungendo un tag che chiamerà una funzione di gestione dei pulsanti:
/ aggiunta del tag del pulsante di invio /
if (!function_exists(‘twentysixteen_child_cf7_button’)) {
funzione ventisei_figlio_cf7_pulsante() {
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);
/ aggiunta del tag del pulsante di invio / if (!function_exists(‘twentysixteen_child_cf7_button’)) { function ventisixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_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');
}
}Infine, dobbiamo aggiungere un markup al gestore:
/ pulsante di uscita markup all’interno del gestore /
se (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {
funzione ventisei_bambino_cf7_button_handler($tag) {
$tag = nuovo WPCF7_FormTag($tag);
$classe = wpcf7_form_controls_class($tag->tipo);
$atts[‘class’] = $tag->get_class_option($class);
$atts[‘class’] .= ‘ventisei-bambino-personalizzato-btn’;
$atts[‘id’] = $tag->get_id_option();
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);
$valore = isset($tag->valori[0])? $tag->valori[0]: ";
$valore = esc html_ (‘Contattaci’, ‘ventisedici’);
$atts[‘type’] = ‘invia’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $att, $valore);
/ out markup del pulsante all’interno del gestore / if (!function exist(‘twentysixteen child_cf7_button_handler’)) { function ventisixteen_child_cf7_button_handler($tag) { $tag = new WPCF7_FormTag($tag); $classe = wpcf7_form_controls_class($tag->tipo); $atts = array(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘class’] .= ‘ventisei-bambino-personalizzato-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $valore = isset($tag->valori[0])? $tag->valori[0]: “; if (vuoto($valore)) { $valore = esc_html ("Contattaci", "ventiseidici"); } $atts[‘type’] = ‘invia’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $att, $valore); restituisce $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;
}
}La funzione del gestore è la parte più importante. Oltre a stampare una classe e un ID predefiniti, aggiungeremo anche una classe CSS personalizzata al suo interno. Nell’ultima parte in cui abbiamo una variabile $html, stiamo inserendo un markup del pulsante con l’icona chevron FontAwesome. Nota che devi avere questo font FontAwesome nel tuo tema. Se non lo hai, assicurati di trovare un plugin che lo includa.
Ora, il nostro pulsante di invio modificato sarà simile a questo:
Come puoi vedere, quando ispezioni la tua pagina con il controllo web di Chrome, contiene esattamente lo stesso markup che abbiamo impostato all’interno del gestore.
Ed ecco il codice completo:
/ rimozione del tag di invio predefinito /
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ aggiunta di azioni con funzione che gestisce il markup dei nostri pulsanti /
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/ aggiunta del tag del pulsante di invio /
if (!function_exists(‘twentysixteen_child_cf7_button’)) {
funzione ventisei_figlio_cf7_pulsante() {
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);
/ pulsante di uscita markup all’interno del gestore /
se (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {
funzione ventisei_bambino_cf7_button_handler($tag) {
$tag = nuovo WPCF7_FormTag($tag);
$classe = wpcf7_form_controls_class($tag->tipo);
$atts[‘class’] = $tag->get_class_option($class);
$atts[‘class’] .= ‘ventisei-bambino-personalizzato-btn’;
$atts[‘id’] = $tag->get_id_option();
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);
$valore = isset($tag->valori[0])? $tag->valori[0]: “;
$valore = esc html_ (‘Invia’, ‘ventisedici’);
$atts[‘type’] = ‘invia’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $att, $valore);
/ rimozione del tag di invio predefinito / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); / aggiunta di azioni con la funzione che gestisce il markup del nostro pulsante / add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); / aggiunta del tag del pulsante di invio / if (!function_exists(‘twentysixteen_child_cf7_button’)) { function ventisixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’); } } / out markup del pulsante all’interno del gestore / if (!funzione esiste(‘twentysixteenchild_cf7_button_handler’)) { funzione ventisei_child_cf7_button_handler($tag) { $tag = nuovo WPCF7_FormTag($tag); $classe = wpcf7_form_controls_class($tag->tipo); $atts = array(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘class’] .= ‘ventisei-bambino-personalizzato-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $valore = isset($tag->valori[0])? $tag->valori[0]: “; if (vuoto($valore)) { $valore = esc_html (‘Invia’, ‘ventisei’); } $atts[‘type’] = ‘invia’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $att, $valore); restituisce $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;
}
}Con tutto a posto, puoi usare classi extra e markup per dare uno stile al pulsante a tuo piacimento. Come extra, aggiungeremo una semplice animazione al passaggio del mouse con un codice CSS di seguito.
button.twentysixteen-child-custom-btn {
-webkit-transizione: -webkit-background .2s facilità di uscita;
-moz-transizione: -moz-background .2s allentamento;
transizione: facilità di sfondo .2s;
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {
-webkit-transizione: -webkit-transform .2s facilità di uscita;
-moz-transizione: -moz-transform .2s allentamento;
transizione: trasforma .2s allentamento;
button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {
-trasformazione-webkit: translate3d(3px,0,0);
-moz-transform: translate3d(3px,0,0);
trasforma: translate3d(3px,0,0);
button.twentysixteen-child-custom-btn { padding: 15px 45px; -webkit-transizione: -webkit-background .2s facilità di uscita; -moz-transizione: -moz-background .2s allentamento; transizione: facilità di sfondo .2s; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text { margin-right: 7px; dimensione del carattere: 15px; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon { font-size: 12px; posizione: relativa; display: blocco in linea; vertical-align: medio; altezza-linea: ereditare; -webkit-transizione: -webkit-transform .2s facilità di uscita; -moz-transizione: -moz-transform .2s allentamento; transizione: trasforma .2s allentamento; } button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon { -webkit-transform: translate3d(3px,0,0); -moz-transform: translate3d(3px,0,0); trasforma: 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);
}Il CSS può essere aggiunto all’interno del file CSS del tema figlio o semplicemente dal back-end di WordPress> Aspetto> Personalizza> Campo CSS aggiuntivo e con esso avrai un’animazione piacevole di una freccia in movimento al passaggio del mouse.
Ed è così che sostituisci un pulsante di invio Contact Form 7 con un elemento pulsante HTML5. Speriamo che troverai utili le nostre istruzioni. In tal caso, condividilo con altri che possono anche utilizzarlo.