#7 Champs personnalisés Formulaire Webflow

Lorsque l’on crée des formulaires dans son projet Webflow, nous pouvons ajouter différents éléments à l’intérieur de notre bloc de formulaire (label, input text, text area, submit button, checkbox, etc.).

Rien qu'avec ces champs, nous pouvons créer des formulaires personnalisés. Cependant, certains types de champs ne sont pas disponibles nativement dans Webflow.

Vous pouvez cependant insérer des champs personnalisés avec un peu de code.

Pour ce faire, il suffit d’ajouter un élément embed dans votre formulaire et ajouter du code (HTML) personnalisé à l’intérieur.

Voici quelques codes qui pourront vous aider à créer des « Forms » un peu plus poussés dans Webflow :

📆 Ajouter un champ date avec 👉 <input placeholder="dd/mm/aaaa" name="Date" class="classe-personnalisee" type="text" onfocus="(this.type='date')" id="date">

📏 Ajouter un champ de type range avec 👉 <input type="range" class="classe-personnalisee" id="range" name="Range" min="0" max="100"> (Vous pouvez ajuster l’échelle en modifiant les valeurs « min » et « max ») .

🔗 Ajouter un champ spécifique pour une URL avec 👉 <input type="url" class="classe-personnalisee" id="url" name="URL">

🔄 Ajouter un bouton reset avec 👉 <input type="reset" class="classe-personnalisee" value="Réinitialiser">

À noter que l’attribut « name » représente le nom du champ que vous allez voir une fois un formulaire envoyé et l’attribut « class » est la classe CSS que vous donnez à votre champ pour le styliser.