Conseils pour l’utilisation de HTML et CSS dans vos formulaires

Dans ce document, nous montrons comment utiliser le bloc de code HTML et partageons avec vous quelques astuces de base en HTML et CSS que vous pouvez utiliser pour personnaliser vos formulaires.

Veuillez noter qu’il s’agit d’une fonction avancée qui nécessite une connaissance des CSS et du HTML. Si vous n’êtes pas familier avec le HTML ou le CSS, nous vous recommandons de travailler avec un membre de votre équipe qui l’est. Il existe également plusieurs ressources intéressantes qui vous permettront d’apprendre le HTML et le CSS comme celui-ci.

HTML

Le bloc HTML vous permet d’ajouter du texte avec des liens intégrés à votre formulaire en ligne. Vous pouvez l’utiliser si vous souhaitez lier vos contacts à une vidéo ou à une page de votre site consacrée à la politique de confidentialité. Vous pouvez également formater le texte ainsi que son alignement dans ce bloc spécifique.

Veuillez noter que le bloc HTML ne peut être utilisé que sur les formulaires en ligne. Les formulaires à boîte flottante, à barre flottante et modaux n’ont pas la possibilité d’ajouter un bloc HTML.

Ajouter le bloc de code HTML à votre formulaire

Pour commencer, il vous suffit de faire glisser le « HTML Code » block à n’importe quel endroit de votre formulaire. Ce bloc est situé sous les champs > Standard :

HTML_code_block.png

Pour ajouter votre code HTML personnalisé, cliquez sur le bloc de code HTML de votre formulaire. Une fois que vous l’aurez fait, vous pourrez entrer votre code dans la case située sur le côté droit de votre écran :

add_html_code.png

Maintenant, vous êtes prêt à ajouter votre propre HTML à votre formulaire.

Code HTML de base

Vous pouvez utiliser ce qui suit pour ajouter du style au texte de votre bloc de code HTML.

Texte central
Tags utilisés : <center> </center>

Dans cet exemple, nous avons placé le texte que nous voulions centré entre les deux tags. C’est ainsi que nous l’avons mis en place : 

<center>Envoyez-nous votre nom et votre adresse e-mail pour vous inscrire à notre infolettre. </center>

center_text_html.png

Ajouter un saut de ligne
Tags utilisés : <p> </p>

Dans cet exemple, nous avons ajouté une rupture de lien entre deux phrases dans notre bloc HTML. C’est ainsi que nous l’avons mis en place :

Envoyez-nous votre nom et votre adresse e-mail pour vous inscrire à notre infolettre. <p>N’oubliez pas de nous ajouter à votre liste de contacts !</p>

Code_bris_ligne.png
Texte en gras
Tags utilisés <b> </b>

Dans cet exemple, nous voulions mettre en gras une phrase de notre bloc HTML. C’est ainsi que nous l’avons mis en place : 

Envoyez-nous votre nom et votre adresse e-mail pour vous inscrire à notre infolettre. <b>N’oubliez pas de nous ajouter à votre liste de contacts !</b>

Bold_html.png

Texte souligné
Tags utilisés <u> </u>

Dans cet exemple, nous voulions souligner une phrase dans notre bloc HTML. C’est ainsi que nous l’avons mis en place :

Envoyez-nous votre nom et votre adresse e-mail pour vous inscrire à notre infolettre. <u>N’oubliez pas de nous ajouter à votre liste de contacts !</u>

Souligner_html.png

Ajouter un lien
Tags utilisés <a href> </a href>

Dans cet exemple, nous voulions ajouter un lien vers notre politique de protection de la vie privée sur lequel les abonnés pourraient cliquer. C’est ainsi que nous l’avons mis en place :

Envoyez-nous votre nom et votre adresse e-mail pour vous inscrire à notre infolettre. <a href="https://www.activecampaign.com/privacy-policy/">Lisez notre politique de confidentialité ici.</a>

Lien_html.png
Insérer une ligne
Exemple de code utilisé : 
<div style="height:10px;border-bottom:1px solid #CCCCCC">
 
</div>

Dans cet exemple, nous avons utilisé un bloc de code HTML séparé pour créer une ligne à insérer entre deux éléments de formulaire.

Insert_line_html.png

exemple_de_ligne.png

Créer une liste à puces
Tags utilisés <li> </li>

Dans cet exemple, nous avons voulu dresser la liste de ce que les abonnés peuvent s’attendre à entendre lorsqu’ils s’inscrivent à notre infolettre. C’est ainsi que nous l’avons mis en place :

En savoir plus sur les sujets suivants : <li>Bilan énergétique de la maison</li><li>Consultation solaire</li><li>Isolation</li>

bulleted_list_html.png

Ajoutez de la couleur à votre texte
Exemple de code utilisé :
<span style="color: #267ec2"; <p>Envoyez-nous votre nom et votre e-mail pour vous inscrire à notre infolettre</p> </span>

Dans cet exemple, nous voulions ajouter de la couleur au texte dans notre bloc de code HTML. Le code utilisé se trouve ci-dessus.

apply_color_html.png

CSS

Vous pouvez utiliser la boîte CSS personnalisée et l’inspecteur pour modifier les éléments visuels de votre formulaire, comme par exemple ajuster la largeur de votre bouton d’envoi, ajuster le type et la taille de la police, centrer le texte dans un élément, changer la couleur de votre texte, et plus encore. Cette option se trouve sous l’onglet Style. Tous les types de formulaires comprennent la boîte CSS personnalisée et l’inspecteur.

custom_css_box.png

Pour utiliser la boîte CSS personnalisée et l’inspecteur, cliquez sur le « Style » tab situé en haut à droite de votre éditeur de formulaire. Cliquez ensuite sur le bouton de l’inspecteur et ciblez l’élément auquel vous souhaitez ajouter un style personnalisé en cliquant dessus.

Ajuster la largeur d’un élément de formulaire

Vous pouvez utiliser un pourcentage ou un pixel pour déterminer la largeur d’un élément. Dans cet exemple, nous allons ajuster la largeur du bouton « Envoyer » :

  1. Aller à « Style » puis cliquez sur « Inspecteur ».

    inspector_button.png

  2. Ciblez le bouton « Envoyer » en cliquant dessus.

    click_submit_button_to_adjust.png
  3. Dans la boîte CSS, enter:width : numéropx; Et remplacez « numéro » par votre propre numéro. Dans cet exemple, nous avons utilisé 250px :

    exemple_largeur.png

Le bouton d’envoi fait maintenant 250 pixels de large :
wide_submit_button.png

Ajuster le type et la taille des polices

Vous pouvez utiliser la boîte CSS pour changer la police de n’importe quel élément de votre formulaire. Dans cet exemple, nous allons modifier le bouton d’envoi en changeant la police en Géorgie et en ajustant la taille de la police à 25 pixels :

  1. Aller à « Style » puis cliquez sur « Inspecteur ».

    inspector_button.png

  2. Ciblez l’élément en cliquant dessus. Dans cet exemple, nous choisissons le bouton « Envoyer ». click_submit_button_to_adjust.png
  3. Dans la boîte CSS, enter:font-size : 25px;font-family: La Géorgie !important :

    css_for_font_type_et_taille.png

La taille et le type de police du bouton « Soumettre » sont désormais adaptés :
new_submit_button.png

Centrer le texte en utilisant le CSS

  1. Aller à « Style » puis cliquez sur « Inspecteur ».

    inspector_button.png

  2. Ciblez l’élément contenant le texte que vous souhaitez centrer par en cliquant dessus

    center_text_using_css.png
  3. Dans la boîte CSS, saissez :text-align: center

    center_text_using_css_1.png

Votre texte est maintenant centré :
texte_centré.png

Ajouter de la couleur avec le CSS

  1. Aller à « Style » puis cliquez sur « Inspecteur ».

    inspector_button.png

  2. Ciblez l’élément contenant le texte dont vous souhaitez modifier la couleur par en cliquant dessus.

    Cliquez_l’élément_à_ajouter_la_couleur.png
  3. Dans la boîte CSS,saisissez : color:#hexcodeforcolor ; et remplacez « nombre » par votre propre numéro. Dans cet exemple, nous avons utilisé #f441b8

    hex_color.png

Votre texte est maintenant coloré :

blue_text.png

Si vous souhaitez en savoir plus sur le CSS, il existe plusieurs ressources intéressantes comme celui-ci.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 1
Vous avez d’autres questions ? Envoyer une demande