Tips & tricks : ajouter un bouton pour vider les champs d’un formulaire avec Elementor

Un fonction parfois utile pour un formulaire un peu complexe ou pour pour aider l’internaute lors de la saisie d’un formulaire.

Le code ci-dessous est à placer dans un widget HTML d’Elementor (disponible en gratuit). On peut placer ce widget avant ou après le formulaire (ou en position absolute).

<input class="reset" type="button" onclick="myFunction()" value="Effacer le formulaire">
</form>

<script>
function myFunction() {
  document.getElementById("ID DU FORMULAIRE").reset();
}
</script>
<style>
.reset {
	font-size: 13px !important;
	padding: 5px 12px !important;
	border-radius: 5px !important;
	line-height: 1em !important;
	background-color: #666 !important;
	border: none !important;
}
.reset:hover {
	background-color: #000 !important;
}
</style>

Voici les explications pour mettre en place la solution avec Elementor :

Les extensions de formulaire suivantes supportent cette solution :

• Forminator
• Formidable Form
• Form widget d’Elementor PRO
• Fluent Forms
• WPForms Lite
• SureForms

Certaines extensions de formulaire ont cette fonction intégrée :

• Bit Form
• Form Maker
• WS Form

Vous pouvez quand même utiliser la solution, avec ces extensions, si vous le souhaitez.

Ces extensions de formulaire pour WordPress ne supportent pas cette solution :

• JetFormBuilder
• MetForm
• Cool FormKit Lite
• Ninja Forms

Il faut modifier le code du script JS car ils ne proposent pas d’ID dans le code ou une structure de formulaire standard, on peut néanmoins faire fonctionner la solution si on a une classe CSS associée au formulaire en modifiant document.getElementById par document.querySelector, comme ceci :

<input class="reset" type="button" onclick="myFunction()" value="Effacer le formulaire">
</form>

<script>
function myFunction() {
  document.querySelector("CLASSE DU FORMULAIRE").reset();
}
</script>
<style>
.reset {
	font-size: 13px !important;
	padding: 5px 12px !important;
	border-radius: 5px !important;
	line-height: 1em !important;
	background-color: #666 !important;
	border: none !important;
}
.reset:hover {
	background-color: #000 !important;
}
</style>

Merci à @BLADOU pour cette variante sur classe CSS.

Contact Form 7 propose une solution spécifique

L’extension de formulaire Contact Form 7 ne support pas cette solution mais supporte l’input « reset« , à mettre dans le code du formulaire avec ce code :

<p><input type="reset" value="Effacer les champs"/></p>

Sources : source du script, solution pour CF7.