Modifier le code d'un formulaire HTML

Dernière mise à jour:

Dans cet article

Avant de commencer

Lorsque vous générez un formulaire HTML avec notre outil, vous obtenez un code HTML complet à insérer sur votre site que pouvez éditer ou utiliser tel quel. Le code que nous vous fournissons pour les formulaires html n'inclut aucun style css ou code javascript. 

Vous pouvez sans danger modifier les textes, ajouter des classes ou modifier les </div> et autres structures html selon vos besoins.

Faites attention cependant :

  • Le code des formulaires HTML n'est pas sauvegardé dans notre système.
  • Ne modifiez pas les attributs id et name des champs, qui sont essentiels au bon fonctionnement.
  • Conservez également la partie qui contient les champs de configuration invisible et qui devrait ressembler à ceci :

<div style="display:block; visibility:hidden; height:1px;">
  <input type="hidden" id="ci_groups" name="ci_groups" value="1" />
  <input type="hidden" id="ci_account" name="ci_account" value="XXXXXXX" />
  <input type="hidden" id="ci_language" name="ci_language" value="fr_ca" />
  <input type="hidden" id="ci_sent_url" name="ci_sent_url" value="" />
  <input type="hidden" id="ci_error_url" name="ci_error_url" value="" />
  <input type="hidden" id="ci_confirm_url" name="ci_confirm_url" value="" />
</div>

Et finalement, n'oubliez pas de tester votre formulaire !

 

Personnaliser le code CSS

Selon l'endroit où vous l'utiliserez, il se peut que le formulaire HTML se stylise tout seul : en effet, les CSS de votre site sont peut-être déjà préparées pour les éléments de formulaires. Sinon, vous pouvez les ajuster. Une bonne pratique est d'appliquer une classe sur votre formulaire et de vous en servir pour limiter l'application des styles, par exemple :

<form class="my-form" action="https://app.cyberimpact.com/optin" method="post" accept-charset="utf-8">
...
<label for="ci_firstname">Prénom</label>
<input type="text" id="ci_firstname" name="ci_firstname" maxlength="255"/>
</form>

Pour ajouter du CSS, vous pouvez travailler dans la feuille de style de votre site, si vous y êtes déjà à l'aise, ou bien ajouter une balise style avec le code pour votre formulaire. Par exemple, l'extrait ci-dessous change la couleur des textes de libellés.

<style type="text/css">
.my-form label {
  color: red;
}
</style>

Si vous avez besoin d'aide pour personnaliser l'apparence de votre formulaire avec CSS, nous vous invitons à consulter la documentation en français sur le site de Mozilla :

Ajouter du Javascript

Si vous souhaitez ajouter du javascript à votre formulaire HTML, vous pouvez le faire dans un fichier js externe ou dans une balise script sur la même page. Dans l'exemple ci-dessous, on ajoute la librairie jQuery pour capter la soumission du formulaire.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.my-form').on('submit', function(e){
    // code javascript ici
  });
});
</script>

Javascript est un langage flexible, mais qui peut rapidement devenir complexe. Encore une fois, Mozilla offre une excellente documentation sur le sujet. 

Haut