{"id":367978,"date":"2022-10-25T11:21:00","date_gmt":"2022-10-25T08:21:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367978"},"modified":"2023-05-09T17:29:30","modified_gmt":"2023-05-09T14:29:30","slug":"utilizzo-di-un-elemento-pulsante-html5-come-modulo-di-contatto-7-invia","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/utilizzo-di-un-elemento-pulsante-html5-come-modulo-di-contatto-7-invia\/","title":{"rendered":"Utilizzo di un elemento pulsante HTML5 come modulo di contatto 7 Invia"},"content":{"rendered":"\n

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<\/a>, un sondaggio o qualcos’altro. Con CMS come WordPress, impostare un modulo di contatto \u00e8 un compito abbastanza semplice<\/strong>. Vale a dire, ci sono molti plug-in per moduli di contatto<\/a> che puoi utilizzare e Contact Form 7<\/a> \u00e8 uno dei pi\u00f9 popolari.<\/p>\n

Per avere un quadro pi\u00f9 chiaro di ci\u00f2 che pu\u00f2 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:<\/p>\n

Non solo \u00e8 facile creare qualsiasi tipo di modulo di contatto in WordPress, ma anche il processo stesso \u00e8 ben documentato. Ecco perch\u00e9 andremo dritti al punto.<\/p>\n

Utilizzando questo plugin, non dovrai creare un modulo personalizzato e funzionalit\u00e0 di back-end, che accelereranno drasticamente il processo. Tuttavia, ci\u00f2 che potresti trovare problematico \u00e8 un pulsante di invio del modulo di contatto 7 che \u00e8 un elemento di input di type="submit".<\/p>\n

Anche con il pulsante di invio input standard, avrai un bel modulo funzionante. Tuttavia, \u00a0il problema sorge se si desidera aggiungere uno stile aggiuntivo per questo elemento<\/strong>. Come forse gi\u00e0 saprai, ci sono alcune limitazioni quando si tratta di css poich\u00e9 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.<\/p>\n

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\u00f9 controllo.<\/p>\n

Vediamo come utilizzare un elemento pulsante HTML5 come pulsante di invio per il modulo di contatto.<\/p>\n

Prima della modifica, un pulsante di invio sar\u00e0 simile a questo.<\/p>\n

\"Utilizzo<\/a><\/p>\n

Innanzitutto, dobbiamo rimuovere il tag di invio Contact Form 7 predefinito. Puoi farlo con questa semplice riga di codice:<\/p>\n

\/ rimozione del tag di invio predefinito \/<\/p>\n

remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);<\/p>\n

\/ rimozione del tag di invio predefinito \/ remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);<\/p>\n

\/*removing default submit tag*\/\nremove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');<\/code><\/pre>\n
In secondo luogo, dobbiamo aggiungere un’azione con la nostra funzione che conterr\u00e0 il nostro markup personalizzato per il pulsante<\/strong>. Questa \u00e8 un’altra semplice riga:<\/p>\n
\/ aggiunta di azioni con funzione che gestisce il markup dei nostri pulsanti \/<\/p>\n
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/ aggiunta di azioni con la funzione che gestisce il markup del nostro pulsante \/ add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/*adding action with function which handles our button markup*\/\nadd_action('wpcf7_init', 'twentysixteen_child_cf7_button');<\/code><\/pre>\n
Successivamente, stiamo aggiungendo un tag che chiamer\u00e0 una funzione di gestione dei pulsanti:<\/p>\n
\/ aggiunta del tag del pulsante di invio \/<\/p>\n
if (!function_exists(‘twentysixteen_child_cf7_button’)) {<\/p>\n
funzione ventisei_figlio_cf7_pulsante() {<\/p>\n
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);<\/p>\n
\/ 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’); } }<\/p>\n
\/*adding out submit button tag*\/\nif (!function_exists('twentysixteen_child_cf7_button')) {\nfunction twentysixteen_child_cf7_button() {\nwpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');\n}\n}<\/code><\/pre>\n
Infine, dobbiamo aggiungere un markup al gestore:<\/p>\n
\/ pulsante di uscita markup all’interno del gestore \/<\/p>\n
se (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {<\/p>\n
funzione ventisei_bambino_cf7_button_handler($tag) {<\/p>\n
$tag = nuovo WPCF7_FormTag($tag);<\/p>\n
$classe = wpcf7_form_controls_class($tag->tipo);<\/p>\n
$atts[‘class’] = $tag->get_class_option($class);<\/p>\n
$atts[‘class’] .= ‘ventisei-bambino-personalizzato-btn’;<\/p>\n
$atts[‘id’] = $tag->get_id_option();<\/p>\n
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);<\/p>\n
$valore = isset($tag->valori[0])? $tag->valori[0]: ";<\/p>\n
$valore = esc html_ (‘Contattaci’, ‘ventisedici’);<\/p>\n
$atts[‘type’] = ‘invia’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(”, $att, $valore);<\/p>\n
\/ 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; } }<\/p>\n
\/*out button markup inside handler*\/\nif (!function_exists('twentysixteen_child_cf7_button_handler')) {\nfunction twentysixteen_child_cf7_button_handler($tag) {\n$tag = new WPCF7_FormTag($tag);\n$class = wpcf7_form_controls_class($tag->type);\n$atts = array();\n$atts['class'] = $tag->get_class_option($class);\n$atts['class'] .= ' twentysixteen-child-custom-btn';\n$atts['id'] = $tag->get_id_option();\n$atts['tabindex'] = $tag->get_option('tabindex', 'int', true);\n$value = isset($tag->values[0])? $tag->values[0]: '';\nif (empty($value)) {\n$value = esc_html__('Contact Us', 'twentysixteen');\n}\n$atts['type'] = 'submit';\n$atts = wpcf7_format_atts($atts);\n$html = sprintf('', $atts, $value);\nreturn $html;\n}\n}<\/code><\/pre>\n
La funzione del gestore \u00e8 la parte pi\u00f9 importante. Oltre a stampare una classe e un ID predefiniti, aggiungeremo anche una classe CSS personalizzata al suo interno<\/strong>. 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.<\/strong> Se non lo hai, assicurati di trovare un plugin che lo includa.<\/p>\n
Ora, il nostro pulsante di invio modificato sar\u00e0 simile a questo:<\/p>\n
\"Utilizzo<\/a><\/p>\n
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.<\/p>\n
\"Utilizzo<\/a><\/p>\n
Ed ecco il codice completo:<\/p>\n
\/ rimozione del tag di invio predefinito \/<\/p>\n
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);<\/p>\n
\/ aggiunta di azioni con funzione che gestisce il markup dei nostri pulsanti \/<\/p>\n
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/ aggiunta del tag del pulsante di invio \/<\/p>\n
if (!function_exists(‘twentysixteen_child_cf7_button’)) {<\/p>\n
funzione ventisei_figlio_cf7_pulsante() {<\/p>\n
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);<\/p>\n
\/ pulsante di uscita markup all’interno del gestore \/<\/p>\n
se (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {<\/p>\n
funzione ventisei_bambino_cf7_button_handler($tag) {<\/p>\n
$tag = nuovo WPCF7_FormTag($tag);<\/p>\n
$classe = wpcf7_form_controls_class($tag->tipo);<\/p>\n
$atts[‘class’] = $tag->get_class_option($class);<\/p>\n
$atts[‘class’] .= ‘ventisei-bambino-personalizzato-btn’;<\/p>\n
$atts[‘id’] = $tag->get_id_option();<\/p>\n
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);<\/p>\n
$valore = isset($tag->valori[0])? $tag->valori[0]: “;<\/p>\n
$valore = esc html_ (‘Invia’, ‘ventisedici’);<\/p>\n
$atts[‘type’] = ‘invia’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(”, $att, $valore);<\/p>\n
\/ 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; } }<\/p>\n
\/*removing default submit tag*\/\nremove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');\n\/*adding action with function which handles our button markup*\/\nadd_action('wpcf7_init', 'twentysixteen_child_cf7_button');\n\/*adding out submit button tag*\/\nif (!function_exists('twentysixteen_child_cf7_button')) {\nfunction twentysixteen_child_cf7_button() {\nwpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');\n}\n}\n\/*out button markup inside handler*\/\nif (!function_exists('twentysixteen_child_cf7_button_handler')) {\nfunction twentysixteen_child_cf7_button_handler($tag) {\n$tag = new WPCF7_FormTag($tag);\n$class = wpcf7_form_controls_class($tag->type);\n$atts = array();\n$atts['class'] = $tag->get_class_option($class);\n$atts['class'] .= ' twentysixteen-child-custom-btn';\n$atts['id'] = $tag->get_id_option();\n$atts['tabindex'] = $tag->get_option('tabindex', 'int', true);\n$value = isset($tag->values[0])? $tag->values[0]: '';\nif (empty($value)) {\n$value = esc_html__('Send', 'twentysixteen');\n}\n$atts['type'] = 'submit';\n$atts = wpcf7_format_atts($atts);\n$html = sprintf('', $atts, $value);\nreturn $html;\n}\n}<\/code><\/pre>\n
Con tutto a posto, puoi usare classi extra e markup per dare uno stile al pulsante a tuo piacimento<\/strong>. Come extra, aggiungeremo una semplice animazione al passaggio del mouse con un codice CSS di seguito.<\/p>\n
button.twentysixteen-child-custom-btn {<\/p>\n
-webkit-transizione: -webkit-background .2s facilit\u00e0 di uscita;<\/p>\n
-moz-transizione: -moz-background .2s allentamento;<\/p>\n
transizione: facilit\u00e0 di sfondo .2s;<\/p>\n
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {<\/p>\n
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {<\/p>\n
-webkit-transizione: -webkit-transform .2s facilit\u00e0 di uscita;<\/p>\n
-moz-transizione: -moz-transform .2s allentamento;<\/p>\n
transizione: trasforma .2s allentamento;<\/p>\n
button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {<\/p>\n
-trasformazione-webkit: translate3d(3px,0,0);<\/p>\n
-moz-transform: translate3d(3px,0,0);<\/p>\n
trasforma: translate3d(3px,0,0);<\/p>\n
button.twentysixteen-child-custom-btn { padding: 15px 45px; -webkit-transizione: -webkit-background .2s facilit\u00e0 di uscita; -moz-transizione: -moz-background .2s allentamento; transizione: facilit\u00e0 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\u00e0 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); }<\/p>\n
button.twentysixteen-child-custom-btn {\npadding: 15px 45px;\n-webkit-transition: -webkit-background .2s ease-out;\n-moz-transition: -moz-background .2s ease-out;\ntransition: background .2s ease;\n}\nbutton.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {\nmargin-right: 7px;\nfont-size: 15px;\n}\nbutton.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {\nfont-size: 12px;\nposition: relative;\ndisplay: inline-block;\nvertical-align: middle;\nline-height: inherit;\n-webkit-transition: -webkit-transform .2s ease-out;\n-moz-transition: -moz-transform .2s ease-out;\ntransition: transform .2s ease-out;\n}\nbutton.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {\n-webkit-transform: translate3d(3px,0,0);\n-moz-transform: translate3d(3px,0,0);\ntransform: translate3d(3px,0,0);\n}<\/code><\/pre>\n
Il CSS pu\u00f2 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.<\/p>\n
\"Utilizzo<\/a><\/p>\n
Ed \u00e8 cos\u00ec 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.<\/p>\n
Fonte di registrazione:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Se desideri aggiungere uno stile aggiuntivo al tuo modulo di contatto, puoi utilizzare un elemento pulsante HTML5 come pulsante di invio. Ecco come usarlo.<\/p>\n","protected":false},"author":1,"featured_media":364438,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[571],"tags":[846],"class_list":["post-367978","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nozioni-di-base-su-wordpress","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/367978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/comments?post=367978"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/367978\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media\/364438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media?parent=367978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/categories?post=367978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/tags?post=367978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}