Les formulaires HTML - Cyberimpact

Les formulaires HTML
Dernière mise à jour: 14 juillet 2020, 10:17

Si vous êtes à l’aise en HTML et CSS et préférez personnaliser vous-même votre formulaire, le type HTML peut vous convenir.

Ces formulaires sont générés différemment des formulaires de type hébergé ou iframe. Une des différences est que le formulaire html n’est pas sauvegardé dans votre compte et n'apparaîtra pas dans la liste de vos formulaires.

Après sa création, vous obtiendrez le code HTML complet du formulaire à insérer sur votre site et pourrez l’éditer ou l’utiliser tel quel. Si, plus tard, vous désirez y apporter des modifications, vous pourrez le faire directement à l’endroit où vous avez intégré le code.

Ajouter des champs

Pour générer votre formulaire, sélectionnez d’abord la langue. Cochez ensuite les champs dont vous avez besoin et ajustez les libellés.

Choisir le ou les groupes

Sélectionnez le ou les groupes cibles auxquels vous désirez que le formulaire ajoute des contacts. Attention de ne pas supprimer ces groupes par la suite !

 

Conseil : si vous souhaitez envoyer des communications en français et en anglais, créez un groupe et un formulaire pour chaque langue.

Personnaliser les pages de confirmation

Lorsqu’une personne remplit votre formulaire, elle est ensuite redirigée à une page de confirmation. Vous pouvez, si vous le souhaitez, utiliser vos propres pages de confirmation plutôt que celles par défaut.

Voici les pages disponibles :

  • Demande opt-in envoyée avec succès : c’est la page que verra l’usager tout de suite après avoir soumis le formulaire. Cette page l’informe qu’il doit consulter ses courriels pour valider son inscription.
  • Opt-in confirmé avec succès : l’usager accèdera à cette page après avoir cliqué sur le lien de validation dans son courriel.
  • Erreur dans le formulaire : cette page sera affichée si une erreur de traitement survient.

Pour utiliser des pages personnalisées, préparez d’abord les pages sur votre site. Inspirez-vous des messages de nos pages par défaut. Copiez et collez les urls au bon endroit dans l’outil de génération de formulaire.

Faites attention d’utiliser des urls complètes ! Elles devraient fonctionner si vous les utilisez dans la barre d’adresse de votre navigateur.

Générer et utiliser le code

Cliquez sur le bouton Générer pour obtenir le code de votre formulaire HTML. Ce code doit être inséré dans une page web, entre les balises <body> et </body>.

Si votre page contient déjà une balise <form>, faites attention de ne pas insérer votre formulaire à l’intérieur de celle-ci. Une page peut contenir plusieurs formulaires, mais pas les uns à l’intérieur des autres.

Édition avancée

Modifier le type d’un champ

Si vous souhaitez utiliser autre chose que des champs de type texte, vous pouvez modifier le html en faisant attention de conserver les attributs id et name des champs. Par exemple, pour afficher le champ personnalisé #1 sous forme de liste déroulante :

Code par défaut :

<div>
  <label for="ci_custom_field_1">Champ Personnalisé 1 : </label>
  <input type="text" id="ci_custom_field_1" name="ci_custom_field_1" maxlength="255" />
</div>

Code personnalisé :

<div>
  <label for="ci_custom_field_1">Champ Personnalisé 1 : </label>
  <select id="ci_custom_field_1" name="ci_custom_field_1">
  <option value="Valeur 1">Valeur 1</option>
  <option value="Valeur 2">Valeur 2</option>
  </select>
</div>

Ajouter du code css ou javascript

Le code que nous vous fournissons pour les formulaires html n'inclut aucun style css ou code javascript. Vous pouvez en ajouter à votre guise, mais prenez soin de conserver les attributs id et name des champs, qui sont essentiels au bon fonctionnement. Attention également à conserver les champs de configuration invisibles, qui devraient 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>

 

 

Haut