Des moyens créatifs pour pimenter vos formulaires Pardot: Partie 2

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.

%% form-Opening-General-Content %%

%% form-if-thank-you %%
    %% form-javascript-focus %%
    %% form-thank-you-content %%
    %% form-thank-you-code %%
%% form-end-if-thank-you %%

%% form-if-display-form %%

%% form-before-form-content %%
%% form-if-error %%

Se il vous plaît corriger les erreurs ci-dessous:

%% form-end-if-error %%

%% form-start-loop-fields %%

%% form-if-field-label %%
%% form-field-label %%
%% form-end-if-field-label %%
                    %% formulaire-si-champ-description %%
%% formulaire-champ-description %%
%% form-end-if-field-description %%

                %% form-field-input %%

%% form-field-if-error %%

%% form-field-error-message %%

%% form-field-end-if-error %%

%% form-end-loop-fields %%

%% form-spam-trap-field %%

%% forme-après-forme-contenu %%

%% form-end-if-display-form %%

%% form-javascript-link-target-top %%

dix

accept-charset=« UTF-8 » méthode=« Publier » action=« %% form-action-url %% » classe=« forme » id=« pardot-forme »>

%%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 %%

Nom=« _utf8 » type=« caché » valeur=« & # 9731; » />

classe=« soumettre »>

type=« soumettre » clef d’accès=« s » valeur=« %% form-submit-button-text %% » %%forme–soumettre–désactivée%%/>

%% 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é.

<br> <script type="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); } }</script>

dix

="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.

dix

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

%% form-Opening-General-Content %%

%% form-if-thank-you %%
    %% form-javascript-focus %%
    %% form-thank-you-content %%
    %% form-thank-you-code %%
%% form-end-if-thank-you %%

%% form-if-display-form %%

%% form-before-form-content %%
%% form-if-error %%

Se il vous plaît corriger les erreurs ci-dessous:

%% form-end-if-error %%

%% form-start-loop-fields %%

%% form-if-field-label %%
%% form-field-label %%
%% form-end-if-field-label %%

                %% form-field-input %%
                %% formulaire-si-champ-description %%
%% formulaire-champ-description %%
%% form-end-if-field-description %%

%% form-field-if-error %%

%% form-field-error-message %%

%% form-field-end-if-error %%

%% form-end-loop-fields %%


        %% form-spam-trap-field %%

%% forme-après-forme-contenu %%

%% form-end-if-display-form %%

%% form-javascript-link-target-top %%

dix

accept-charset=« UTF-8 » méthode=« Publier » action=« %% form-action-url %% » classe=« forme » id=« pardot-forme »>

%%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 %%

%% 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 %%

Nom=« _utf8 » type=« caché » valeur=« & # 9731; » />

classe=« soumettre »>

type=« soumettre » clef d’accès=« s » valeur=« %% form-submit-button-text %% » %%forme–soumettre–désactivée%%/>

%% 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.

Source de l’article traduit automatiquement en Français