Des moyens créatifs pour pimenter vos formulaires Pardot: Partie 21 minutes de lecture
31 octobre 2019 ->
La 2ème partie de la série de personnalisation de formulaire est enfin là! Dans la partie 1, je vous ai montré comment mettre en œuvre la technique d’étiquette flottante populaire et comment créer des listes déroulantes conviviales et consultables. Dans cet article, je vais vous montrer comment créer un formulaire conversationnel de style paragraphe et comment créer un formulaire sur une seule ligne.
C’est partie 2 du Série en 3 parties. Avez-vous récemment rencontré un formulaire et ne saviez pas répliquer la fonctionnalité dans Pardot? Partagez-le avec moi par e-mail, un tweet @jennamolby, ou dans les commentaires.
Créer un formulaire de style paragraphe
Ce formulaire «conversationnel» de style paragraphe est un moyen unique d’afficher votre formulaire Pardot. Cela nécessite la modification de votre modèle de mise en page et l’ajout de javascript et CSS personnalisés. Voici un aperçu de son apparence.
Modifiez votre modèle de mise en page
Pour que cette méthode fonctionne, vous devez apporter des mises à jour à votre modèle de mise en page. Accédez à votre modèle de mise en page et cliquez sur le FORME languette. Remplacez le code par le code ci-dessous.
1 2 3 4 5 6 7 8 9 dix 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | %%forme–ouverture–général–contenu%% %%forme–si–remercier–vous%% %% form-javascript-focus %% %% form-thank-you-content %% %% form-thank-you-code %% %%forme–fin–si–remercier–vous%% %%forme–si–afficher–forme%% %% form-before-form-content %% %% form-if-error %%
classe=« les erreurs »>Se il vous plaît corriger les erreurs ci-dessous: %% form-end-if-error %%
%% form-start-loop-fields %%
classe=« form-field %% form-field-css-classes %% %% form-field-class-type %% %% form-field-class-required %% %% form-field-class-hidden %% %% form-field-class-no-label %% %% form-field-class-error %% %% form-field-dependency-css %% « > %% form-if-field-label %% classe=« étiquette de champ » pour=« %% form-field-id %% »>%% form-field-label %% %% form-end-if-field-label %% %% formulaire-si-champ-description %% classe=« la description »>%% formulaire-champ-description %% %% form-end-if-field-description %%
%% form-field-input %%
id=« error_for _ %% form-field-id %% » style=« affichage: aucun »> %% form-field-if-error %%
classe=« erreur sans étiquette »>%% form-field-error-message %% %% form-field-end-if-error %%
%% form-end-loop-fields %%
%% form-spam-trap-field %%
classe=« soumettre »>
%% forme-après-forme-contenu %%
%%forme–fin–si–afficher–forme%% %%forme–javascript–lien–cible–Haut%% |
Qu’est ce qui a changé?
Les balises de paragraphe entourant les entrées ont été remplacées par des DIV et le code de description a été déplacé d’après l’entrée vers avant l’entrée.
Modifiez votre formulaire
Comme il s’agit d’une technique avancée, la configuration du formulaire est un peu unique. Les étiquettes du formulaire feront office de «texte de paragraphe» et l’option de description sera utilisée comme espace réservé dans les champs.
Voici à quoi ressemble la configuration de mon formulaire une fois les étiquettes mises à jour et le texte de description ajouté.
Ajoutez le Javascript
Ce javascript prendra le texte de description du formulaire et les transformera en texte d’espace réservé.
1 2 3 4 5 6 7 8 9 dix 11 12 13 14 15 16 17 18 | ="text/javascript"> var labels = document.querySelectorAll("span.description"); var i = labels.length; while (i--) { var label = labels.item(i); var text = label.textContent; label.parentNode.classList.contains("required") && (text += ""); var nextElement = label.nextElementSibling; if (nextElement) { if (nextElement.tagName == 'SELECT') { nextElement.options[0].text = text; } else { nextElement.setAttribute("placeholder", text); } label.parentNode.removeChild(label); } } |
Ajoutez le CSS
Le CSS est assez simple. Flottez toutes les étiquettes et entrées vers la gauche, stylisez le texte d’espace réservé et les messages d’erreur.
1 2 3 4 5 6 7 8 9 dix 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
Personnalisations supplémentaires
Renvoyer le texte sur une autre ligne
Par défaut, les champs du formulaire apparaîtront sur une ligne différente et s’habilleront en fonction de la largeur de votre formulaire. Si vous souhaitez forcer une nouvelle ligne, parcourez le champ de formulaire qui doit commencer sur un nouvelle ligne dans l’éditeur. Clique sur le Avancée onglet et ajouter la classe saut de ligne comme indiqué ci-dessous.
Ajouter un point à la fin d’une phrase
Vous pouvez également ajouter un point à la fin d’une phrase. Ajoutez simplement la classe fin où vous voulez que la période apparaisse.
Le résultat
Stylying minimal
Version stylée
Créer un formulaire sur une seule ligne
Je reçois beaucoup de demandes de renseignements sur la façon de mettre les champs de formulaire et le bouton d’envoi sur une seule ligne. Maintenant, j’ai enfin trouvé le temps de le documenter. Voici un exemple de l’apparence du formulaire.
Modifiez votre modèle de mise en page
Pour que cette méthode fonctionne, vous devez apporter des mises à jour à votre modèle de mise en page. Accédez à votre modèle de mise en page et cliquez sur le FORME languette. Remplacez le code par le code ci-dessous.
1 2 3 4 5 6 7 8 9 dix 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | %%forme–ouverture–général–contenu%% %%forme–si–remercier–vous%% %% form-javascript-focus %% %% form-thank-you-content %% %% form-thank-you-code %% %%forme–fin–si–remercier–vous%% %%forme–si–afficher–forme%% %% form-before-form-content %% %% form-if-error %%
classe=« les erreurs »>Se il vous plaît corriger les erreurs ci-dessous: %% form-end-if-error %%
%% form-start-loop-fields %%
classe=« form-field %% form-field-css-classes %% %% form-field-class-type %% %% form-field-class-required %% %% form-field-class-hidden %% %% form-field-class-no-label %% %% form-field-class-error %% %% form-field-dependency-css %% « > %% form-if-field-label %% classe=« étiquette de champ » pour=« %% form-field-id %% »>%% form-field-label %% %% form-end-if-field-label %%
%% form-field-input %% %% formulaire-si-champ-description %% classe=« la description »>%% formulaire-champ-description %% %% form-end-if-field-description %%
id=« error_for _ %% form-field-id %% » style=« affichage: aucun »> %% form-field-if-error %%
classe=« erreur sans étiquette »>%% form-field-error-message %% %% form-field-end-if-error %%
%% form-end-loop-fields %%
%% form-spam-trap-field %%
classe=« soumettre »>
%% forme-après-forme-contenu %%
%%forme–fin–si–afficher–forme%% %%forme–javascript–lien–cible–Haut%% |
Qu’est ce qui a changé?
Les balises de paragraphe entourant les entrées ont été remplacées par des DIV.
Ajoutez le CSS
Le résultat
Style minimal avec un seul champ
Style minimal avec plusieurs champs
Agencé avec un champ
Stylé avec plusieurs champs
Des questions?
Envoyez-les moi par e-mail, envoyez-moi un tweet @jennamolbyou laissez un commentaire.
