{"id":368104,"date":"2022-10-25T11:22:00","date_gmt":"2022-10-25T08:22:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368104"},"modified":"2023-05-09T17:30:26","modified_gmt":"2023-05-09T14:30:26","slug":"utilisation-dun-element-de-bouton-html5-comme-formulaire-de-contact-7-soumettre","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/utilisation-dun-element-de-bouton-html5-comme-formulaire-de-contact-7-soumettre\/","title":{"rendered":"Utilisation d’un \u00e9l\u00e9ment de bouton HTML5 comme formulaire de contact 7 Soumettre"},"content":{"rendered":"\n

Avoir un site Web WordPress signifie que vous aurez tr\u00e8s probablement besoin d’avoir un formulaire de contact quelque part, que ce soit pour une newsletter, une page contactez-nous<\/a>, un sondage ou pour autre chose. Avec des CMS comme WordPress, mettre en place un formulaire de contact est une t\u00e2che assez simple<\/strong>. \u00c0 savoir, il existe de nombreux plugins de formulaire de contact<\/a> que vous pouvez utiliser, et le formulaire de contact 7<\/a> est l’un des plus populaires.<\/p>\n

Afin que vous puissiez avoir une id\u00e9e plus claire de ce que le plugin Contact Form 7 peut faire, voici quelques exemples de formulaires de contact r\u00e9alis\u00e9s avec ce plugin qui viennent avec des th\u00e8mes premium sur ThemeForest :<\/p>\n

Non seulement la cr\u00e9ation de tout type de formulaire de contact dans WordPress est facile, mais le processus lui-m\u00eame est \u00e9galement bien document\u00e9. C’est pourquoi nous allons droit au but.<\/p>\n

En utilisant ce plugin, vous n’aurez pas \u00e0 vous soucier de la cr\u00e9ation d’un formulaire personnalis\u00e9 et d’une fonctionnalit\u00e9 back-end, ce qui acc\u00e9l\u00e9rera consid\u00e9rablement le processus. Cependant, ce que vous pourriez trouver probl\u00e9matique est un bouton de soumission du formulaire de contact 7 qui est un \u00e9l\u00e9ment d’entr\u00e9e de type="soumettre".<\/p>\n

M\u00eame avec le bouton de soumission d’entr\u00e9e standard, vous aurez un bon formulaire de travail. Pourtant, \u00a0le probl\u00e8me se pose si vous souhaitez ajouter un style suppl\u00e9mentaire pour cet \u00e9l\u00e9ment<\/strong>. Comme vous le savez peut-\u00eatre d\u00e9j\u00e0, il existe certaines limitations en mati\u00e8re de css puisque vous ne pouvez pas utiliser les pseudo-\u00e9l\u00e9ments ici, comme :before ou :after ce qui peut \u00eatre pratique pour ajouter un soulignement de survol, une ic\u00f4ne de police iconique ou toute autre chose pour l’animation ce qui viendrait comme une belle touche finale pour votre formulaire.<\/p>\n

Bien s\u00fbr, il pourrait \u00eatre possible d’obtenir des animations exceptionnelles en enveloppant simplement un bouton d’envoi avec une div avec une classe personnalis\u00e9e, mais en changeant l’entr\u00e9e en bouton, vous pouvez avoir beaucoup plus de contr\u00f4le.<\/p>\n

Voyons comment vous pouvez utiliser un \u00e9l\u00e9ment de bouton HTML5 comme bouton d’envoi pour votre formulaire de contact.<\/p>\n

Avant le changement, un bouton de soumission ressemblera \u00e0 ceci.<\/p>\n

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

Tout d’abord, nous devons supprimer la balise d’envoi par d\u00e9faut du formulaire de contact 7. Vous pouvez le faire avec cette simple ligne de code :<\/p>\n

\/ suppression de la balise d’envoi par d\u00e9faut \/<\/p>\n

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

\/ suppression de la balise de soumission par d\u00e9faut \/ 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
Deuxi\u00e8mement, nous devons ajouter une action avec notre fonction qui contiendra notre balisage personnalis\u00e9 pour le bouton<\/strong>. Ceci est une autre ligne simple:<\/p>\n
\/ ajout d’une action avec fonction qui g\u00e8re notre balisage de bouton \/<\/p>\n
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/ ajout d’action avec la fonction qui g\u00e8re notre balisage de bouton \/ 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
Ensuite, nous ajoutons une balise qui appellera une fonction de gestionnaire de bouton\u00a0:<\/p>\n
\/ ajout de la balise du bouton d’envoi \/<\/p>\n
si (!function_exists(‘twentysixteen_child_cf7_button’)) {<\/p>\n
function vingt-six-six_enfants_cf7_bouton() {<\/p>\n
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);<\/p>\n
\/ ajout de la balise du bouton de soumission \/ if (!function_exists(‘twentysixteen_child_cf7_button’)) { function twentysixteen_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
Enfin, nous devons ajouter un balisage au gestionnaire\u00a0:<\/p>\n
\/ balisage du bouton de sortie \u00e0 l’int\u00e9rieur du gestionnaire \/<\/p>\n
si (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {<\/p>\n
fonction vingt-six-six_enfants_cf7_bouton_handler($tag) {<\/p>\n
$tag = nouveau WPCF7_FormTag($tag);<\/p>\n
$class = wpcf7_form_controls_class($tag->type);<\/p>\n
$atts[‘class’] = $tag->get_class_option($class);<\/p>\n
$atts[‘classe’] .= ‘ vingt-six-enfant-personnalis\u00e9-btn’;<\/p>\n
$atts[‘id’] = $tag->get_id_option();<\/p>\n
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);<\/p>\n
$value = isset($tag->values[0])\u00a0? $tag->values[0]\u00a0: \u00a0\u00bb\u00a0;<\/p>\n
$value = esc html_ (‘Contactez-nous’, ‘twentysixteen’);<\/p>\n
$atts[‘type’] = ‘soumettre’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(\u00a0\u00bb, $atts, $valeur);<\/p>\n
\/ 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 = tableau(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘classe’] .= ‘ vingt-six-enfant-personnalis\u00e9-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $value = isset($tag->values[0])\u00a0? $tag->values[0]\u00a0: \u00a0\u00bb\u00a0; if (empty($value)) { $value = esc_html (‘Contactez-nous’, ‘twentysixteen’); } $atts[‘type’] = ‘soumettre’; $atts = wpcf7_format_atts($atts); $html = sprintf(\u00a0\u00bb, $atts, $valeur); retourne $html\u00a0; } }<\/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 fonction de gestionnaire est la partie la plus importante. Outre l’impression d’une classe et d’un ID par d\u00e9faut, nous ajouterons \u00e9galement une classe CSS personnalis\u00e9e \u00e0 l’int\u00e9rieur<\/strong>. Dans la derni\u00e8re partie o\u00f9 nous avons une variable $html, nous mettons un balisage de bouton avec l’ic\u00f4ne de chevron FontAwesome. Notez que vous devez avoir cette police FontAwesome dans votre th\u00e8me.<\/strong> Si vous ne l’avez pas, assurez-vous de trouver un plugin qui l’inclura.<\/p>\n
Maintenant, notre bouton d’envoi modifi\u00e9 ressemblera \u00e0 ceci\u00a0:<\/p>\n
\"Utilisation<\/a><\/p>\n
Comme vous pouvez le constater, lorsque vous inspectez votre page avec l’inspecteur Web Chrome, elle contient exactement le m\u00eame balisage que celui que nous avons d\u00e9fini dans le gestionnaire.<\/p>\n
\"Utilisation<\/a><\/p>\n
Et voici le code complet :<\/p>\n
\/ suppression de la balise d’envoi par d\u00e9faut \/<\/p>\n
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);<\/p>\n
\/ ajout d’une action avec fonction qui g\u00e8re notre balisage de bouton \/<\/p>\n
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/ ajout de la balise du bouton d’envoi \/<\/p>\n
si (!function_exists(‘twentysixteen_child_cf7_button’)) {<\/p>\n
function vingt-six-six_enfants_cf7_bouton() {<\/p>\n
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);<\/p>\n
\/ balisage du bouton de sortie \u00e0 l’int\u00e9rieur du gestionnaire \/<\/p>\n
si (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {<\/p>\n
fonction vingt-six-six_enfants_cf7_bouton_handler($tag) {<\/p>\n
$tag = nouveau WPCF7_FormTag($tag);<\/p>\n
$class = wpcf7_form_controls_class($tag->type);<\/p>\n
$atts[‘class’] = $tag->get_class_option($class);<\/p>\n
$atts[‘classe’] .= ‘ vingt-six-enfant-personnalis\u00e9-btn’;<\/p>\n
$atts[‘id’] = $tag->get_id_option();<\/p>\n
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);<\/p>\n
$value = isset($tag->values[0])\u00a0? $tag->values[0]\u00a0: \u00a0\u00bb\u00a0;<\/p>\n
$value = esc html_ (‘Envoyer’, ‘vingt-six’);<\/p>\n
$atts[‘type’] = ‘soumettre’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(\u00a0\u00bb, $atts, $valeur);<\/p>\n
\/ suppression de la balise de soumission par d\u00e9faut \/ remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); \/ ajout d’action avec la fonction qui g\u00e8re notre balisage de bouton \/ add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); \/ ajout de la balise du bouton de soumission \/ if (!function_exists(‘twentysixteen_child_cf7_button’)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’); } } \/ balisage du bouton out \u00e0 l’int\u00e9rieur du gestionnaire \/ if (!function exists(‘twentysixteenchild_cf7_button_handler’)) { function Twentysixteen_child_cf7_button_handler($tag) { $tag = new WPCF7_FormTag($tag); $class = wpcf7_form_controls_class($tag->type); $atts = tableau(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘classe’] .= ‘ vingt-six-enfant-personnalis\u00e9-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $value = isset($tag->values[0])\u00a0? $tag->values[0]\u00a0: \u00a0\u00bb\u00a0; if (empty($value)) { $value = esc_html (‘Send’, ‘twentysixteen’); } $atts[‘type’] = ‘soumettre’; $atts = wpcf7_format_atts($atts); $html = sprintf(\u00a0\u00bb, $atts, $valeur); retourne $html\u00a0; } }<\/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
Avec tout en place, vous pouvez utiliser des classes et des balises suppl\u00e9mentaires pour styliser le bouton \u00e0 votre guise<\/strong>. En suppl\u00e9ment, nous y ajouterons une simple animation de survol avec un code CSS ci-dessous.<\/p>\n
bouton.twentysixteen-child-custom-btn {<\/p>\n
-webkit-transition\u00a0: -webkit-background .2s facilit\u00e9 de sortie\u00a0;<\/p>\n
-moz-transition\u00a0: -moz-background .2s facilit\u00e9 de sortie\u00a0;<\/p>\n
transition: fond .2s aisance ;<\/p>\n
bouton.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {<\/p>\n
bouton.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {<\/p>\n
-webkit-transition\u00a0: -webkit-transform .2s easy-out\u00a0;<\/p>\n
-moz-transition\u00a0: -moz-transform .2s facilit\u00e9 de sortie\u00a0;<\/p>\n
transition\u00a0: transformer 0,2\u00a0s en douceur\u00a0;<\/p>\n
button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {<\/p>\n
-webkit-transform: translate3d(3px,0,0);<\/p>\n
-moz-transform: translate3d(3px,0,0);<\/p>\n
transformer\u00a0: translate3d(3px,0,0);<\/p>\n
button.twentysixteen-child-custom-btn { rembourrage\u00a0: 15px 45px\u00a0; -webkit-transition\u00a0: -webkit-background .2s facilit\u00e9 de sortie\u00a0; -moz-transition\u00a0: -moz-background .2s facilit\u00e9 de sortie\u00a0; transition: fond .2s aisance ; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text { margin-right: 7px; taille de police\u00a0: 15\u00a0px\u00a0; } bouton.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon { font-size: 12px; position\u00a0: relative\u00a0; affichage\u00a0: bloc en ligne\u00a0; alignement vertical\u00a0: milieu\u00a0; hauteur de ligne\u00a0: h\u00e9riter\u00a0; -webkit-transition\u00a0: -webkit-transform .2s easy-out\u00a0; -moz-transition\u00a0: -moz-transform .2s facilit\u00e9 de sortie\u00a0; transition\u00a0: transformer 0,2\u00a0s en douceur\u00a0; } button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon { -webkit-transform: translate3d(3px,0,0); -moz-transform: translate3d(3px,0,0); transformer\u00a0: 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
Le css peut \u00eatre ajout\u00e9 dans le fichier css du th\u00e8me enfant ou simplement depuis le back-end WordPress > Apparence > Personnaliser > Champ CSS suppl\u00e9mentaire, et avec lui, vous aurez une belle animation d’une fl\u00e8che en mouvement au survol.<\/p>\n
\"Utilisation<\/a><\/p>\n
Et c’est ainsi que vous remplacez un bouton d’envoi du formulaire de contact 7 par un \u00e9l\u00e9ment de bouton HTML5. J’esp\u00e8re que vous trouverez nos instructions utiles. Si c’est le cas, partagez-le avec d’autres personnes qui peuvent \u00e9galement en faire usage.<\/p>\n
Source d’enregistrement:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Si vous souhaitez ajouter un style suppl\u00e9mentaire \u00e0 votre formulaire de contact, vous pouvez utiliser un \u00e9l\u00e9ment de bouton HTML5 comme bouton d’envoi. Voici comment l’utiliser.<\/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":[568],"tags":[844],"class_list":["post-368104","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/368104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=368104"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/368104\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/364438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=368104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=368104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=368104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}