Personnalisation d’un formulaire de SG-autorépondeur

Dans cette vidéo, je vous montre pas-à-pas comment réaliser un formulaire SG Répondeur comme celui-ci (cliquez pour agrandir):

Cette démonstration m’a été demandée par Sèv ainsi que Rick. Merci à tous les deux pour leur demande, j’ai toujours plaisir à répondre à mes lecteurs.

Pour faciliter votre digestion, j’ai coupé la vidéo en deux parties.

• Niveau: Intermédiaire
• Durée: 11’32

Création d’un formulaire SG Répondeur avec mise en page avancée

Aujourd’hui, je réponds à une demande d’une lectrice qui m’a demandé comment j’avais fait pour créer le formulaire d’inscription à ma liste d’abonnés. Alors il s’agit du formulaire que vous avez sous les yeux jusqu’à présent et pour rappel, dans le site Web, il est situé juste sous les articles.

Créer une mise en page avancée sur un formulaire 00:21

Alors voici comment ce tutoriel va se dérouler.

• 1. Analyse du code Dans un premier temps, je vais analyser le code avec vous. Nous allons regarder comment est constitué ce code dans Firebug.
• 2. Remettre à zéro et créer le formulaire Et dans un deuxième temps, nous allons repartir de zéro et nous allons construire le formulaire de A à Z.
• Formulaire venant de SG-Autorépondeur Ce formulaire s’appuyant sur d’une part une base offerte par mon autorépondeur qui est SG-Autorépondeur. Ça, c’est vraiment la partie purement formulaire.
• Images créées avec Photoshop Ensuite, il y a des images que j’ai créées avec Photoshop que nous allons importer.
• Finition en CSS Et ensuite il y a de petits réglages en CSS à faire pour positionner tous les éléments au bon endroit et avoir pile-poil le rendu que nous voulons.

1. Analyse du code

Alors nous allons revenir sur le site Web en fait pour que je vous montre vraiment comment il est intégré dans le site Web. Donc voilà, là je suis sur mon blog. C’est la saga de l’été. Si vous n’avez pas encore lu, il est le temps d’y aller. Et juste en dessous, donc il y a le formulaire d’inscription. Alors, je vais faire un clic droit pour vous montrer comment ce formulaire est intégré dans la page. Voilà.

<iframe style="margin: -5px 0 0 -10px;" src="https://www.dessinemoiunsite.com/wp-content/themes/vertulab_lddln/files/form-newsletter.html" scrolling="no" width="732" height="220" frameborder="0" align="middle">

Vous voyez ici, il y a un iframe. Un iframe, qu’est-ce que c’est? C’est tout simplement une balise HTML qui permet d’afficher une page à l’intérieur d’une autre page. Donc en fait, cet iframe me permet d’afficher la page qui contient mon formulaire dans la page de mes articles, tout simplement. Et vous voyez ici, si vous regardez donc dans la balise de l’iframe, si vous regardez l’attribut SRC, il pointe vers une adresse url complète.
src="https://www.dessinemoiunsite.com/wp-content/themes/vertulab_lddln/files/form-newsletter.html"
Donc form-newsletter.html, c’est un fichier HTML dans lequel il y a toute cette mise en page et l’iframe ne fait qu’afficher tout ce formulaire avec la mise en page dans cette page d’articles.
J’espère que je suis bien claire. Je vous préviens tout de suite : le niveau de ce tutoriel est un petit peu au-dessus de l’habitude parce que c’est une mise en page avancée tout simplement. Et je sais que certains d’entre vous sont tout à fait capables de le réaliser et puis pour les autres, ça vous permettra de voir des manipulations un peu plus poussées. Même si vous n’êtes pas capables de les refaire, ça peut toujours vous servir.
Donc pour afficher juste le formulaire, ben c’est très simple : je vais cliquer ici sur le lien. Voilà. Je fais Ctrl + C pour copier. Collez dans la barre d’adresse + Entrée
Je vais dans un nouvel onglet, je copie tout mon URL et puis je valide, voilà. Et donc là, j’arrive sur mon fichier HTML directement. Donc j’ai mon formulaire. Donc la mise en page de ce formulaire est réalisée en table. Alors comment est fait ce formulaire?
D’abord, prenons par le début. Donc on a une grande balise « form », voilà.
<form target="blank" style="width: 680px; background: none repeat scroll 0 0 #EEEEE; border: 1 px solid #99999; margin: 0; padding: 15px 10px; position: relative;" method="post" enctype="utf-8" action="http://sg-autorepondeur.com/inscriptionabonne.php" accept-charset="UTF-8">

Ça montre bien que c’est un formulaire. Je clique sur la petite croix pour rentrer à l’intérieur. Donc le premier élément de ce formulaire, c’est une image. On voit ici sur mon formulaire qu’il s’agit de la grande image sur la droite. Ensuite, il y a une table. Là c’est une table dans laquelle il y a une seule cellule dans laquelle j’ai mis une grande image, en fait : Ne ratez pas les prochains articles pour créer votre site Web comme un pro. Plus une petite séparation et l’information gratuite : 12 actions pour améliorer votre site Web. Tout ça, c’est une seule et même image qui est donc dans une première table à une cellule. Et juste en dessous, il y a une deuxième table qui, cette fois-ci a deux cellules, une cellule sur la gauche où il y a le formulaire et une cellule sur la droite où il y a le bouton.
Remettre à zéro et créer le formulaire SG Autorépondeur
Bon, maintenant nous allons repartir de zéro et construire ce formulaire de A à Z. Pour cela, je vais aller dans mon éditeur de codes. Chez moi il s’agit de Notepad++ et vous voyez, j’installe un petit plug-in qui me permet d’être directement connectée sur mon serveur. Donc ça, c’est très pratique. Donc je vais tout simplement créer un nouveau fichier avec tous les fichiers qui contiennent mes différents formulaires. Je fais « Create new file » et je vais l’appeler « form-newsletter-test.html ». Voilà, je l’ouvre. Il est où? Form-newsletter-test, il est ici. Voilà, il est ouvert maintenant sur la partie de gauche et je vais l’exécuter. Alors pour ça, descendre un peu. Voilà. Vous avez ici un menu exécution ; vous pouvez faire « Launch in Firefox », et ça va en fait afficher cette page sur Firefox.
Cette page blanche correspond à mon fichier form-newletter-test.html (qui est vide) vu dans le navigateur.
Voilà. Pour l’instant évidemment elle est vide. Comme ça vous savez comment on fait le lien entre Notepad ++ et Firefox.
Récupération du formulaire venant de SG-Autorépondeur
Pour ça, je vais aller sur mon autorépondeur. Donc voilà, bien je suis déjà connectée à mon autorépondeur. Donc vous savez, c’est SG-Autorépondeur. Il y a une partie ici « Formulaires HTML » et donc, quand je vais dans les formulaires HTML, j’ai en mémoire le dernier formulaire que j’ai créé. Et pour le copier, bien j’ai juste à tout sélectionner, faire Ctrl + C pour copier et je vais aller le coller ici dans ma feuille blanche, dans le fichier que je viens juste de créer.
Voilà, j’ai sauvegardé et on va aller voir dans Firefox ce que ça donne. Donc je retourne sur l’onglet qui était au départ blanc, je recharge, voilà. On a le formulaire de base. Donc je vais déjà mettre un peu les bordures en fait sur la table et sur les cellules pour qu’on voie un petit peu comment c’est conçu. Alors pour ça, c’est très simple : je fais juste en haut ici une balise « style ».
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09table%7Bborder%3A%20solid%201px%20red%3B%7D%20%2F*bordure%20rouge%20sur%20les%20tables*%2F%3Cbr%20%2F%3E%0A%09td%7Bborder%3A%20solid%201px%20green%3B%7D%20%2F*bordure%20verte%20sur%20les%20cellules*%2F%3Cbr%20%2F%3E%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />


Voilà. Je sauvegarde, je recharge. Ah là, ça donne ça. Vous voyez bien : on a bien donc une table en rouge avec trois lignes contenant les deux premières deux cellules chacune et la dernière une seule cellule. Alors, moi ce que je voudrais faire, c’est déjà enlever la dernière cellule. Alors, ce n’est pas toujours évident de se repérer dans le code. Moi évidemment j’ai un peu l’habitude. Je veux vous montrer déjà quand vous pouvez vous y retrouver un peu mieux.
Indentez le code avec la touche TAB
Vous voyez, j’ai sélectionné la première balise « form » et je vais indenter le code. Donc entre « form » et « table » je saute à la ligne et je fais une petite indentation, voilà, jusqu’à « table » ici. Le input, il est là et le « form » de l’autre côté. Comme ça, on a les forms qui sont ensemble. Les tables, hop, on va les mettre ensemble aussi au même niveau. La suite de table, c’est « enter » pour une ligne, hop ! J’indente.
Les lignes sont délimitées par les
Donc on va faire juste par ligne. Ça sera plus simple. Voilà et notre ligne ici, elle se termine où ? Elle se termine là. Hop ! Une troisième ligne jusque-là.
<form method="post" action="http://sg-autorepondeur.com/inscriptionabonne.php" target="_blank" enctype="utf-8" accept-charset="UTF-8">
<table cellspacing="5">
<tr>
<td><b>PrxE9nom : </b></td>
<td><><input type="text" size="25" name="prenom" value="" /></td>
</tr>
<tr>
<td><b>Emailfont color="red"> * : </b></td>
<td><input type="text" size="25" name="email" value="" /></td>
</tr>
<tr>
<td colspan="2"><font color="red" style="font-weight: normal; font-size: 12px;"><i>* champ obligatoire.</i></font>

<input type="image" src="https://www.dessinemoiunsite.com/wp-content/themes/vertulab_lddln/images/form/button-guide.png" border="0" name="submit" alt="Je m'inscris" /></td>
</tr>
</table>

<input type="hidden" name="listeid" value="3795" />
<input type="hidden" name="memberid" value="2227" />
</form>


On a une première ligne qui contient le libellé prénom ainsi que le champ, une deuxième ligne qui contient le libellé e-mail ainsi que le champ et enfin une troisième ligne qui contient le petit texte « champ obligatoire » et l’image, l’image du bouton. Donc vérifier si je ne n’ai rien cassé. Je recharge de ce côté-là ; c’est bon, tout est en place.
Donc je vais enlever ce bouton ici, cette cellule, donc il s’agit de la dernière ligne.
Voilà, je la coupe avec un Ctrl + X comme ça. Je la garde en mémoire; je vais l’utiliser après. Donc je sauvegarde, je retourne voir de l’autre côté, voilà, OK : on a bien nos champs ici. Donc nous l’idéal maintenant, c’est qu’on voudrait mettre notre bouton sur la droite de ce formulaire. Pour ça, comment on va faire ? C’est là que ça devient un petit peu compliqué. En fait, on va créer une table à deux cellules. Dans la première cellule, on va mettre cette table ici et dans la deuxième cellule, je vais mettre une table avec la ligne j’ai enlevée ici, la ligne à la cellule contenant le bouton. Je vous montre; vous allez voir, ça va être beaucoup plus clair.
Donc tout d’abord, je vais créer une table à deux cellules. Alors je crée une table. Dedans je mets une ligne, une première cellule et une deuxième cellule, OK? Donc dans la première cellule, on va mettre toute cette table ici. Je le glisse et donc dans la deuxième cellule, je vais mettre la ligne que j’avais coupée précédemment qui contient le bouton. Et comme je ne peux pas mettre directement un « tr » dans un « td », je suis obligée de repasser par une table parce que seules les tables peuvent contenir des « tr » qui eux-mêmes contiennent des « td ». C’est un peu compliqué. Hop! Voilà.
Donc à présent, on a bien une table avec une ligne et deux cellules : la première cellule contenant la table avec le prénom et l’e-mail, la deuxième cellule contenant le bouton, la table avec le bouton. Je recharge et donc voilà : on a bien quelque chose qui ressemble à ce qu’on voulait avec le prénom et l’e-mail à gauche et puis le bouton à droite. Alors qu’est-ce qui nous manque maintenant? Bien, mettre les images.
Images créées avec Photoshop
On va commencer par mettre la grande image qui est en haut ici, tout le texte en fait. Alors je vais juste aller chercher l’image sur un autre formulaire puisque je ne connais pas le nom de mes images par cœur. Donc l’image, je vais la mettre juste dans le formulaire, juste avant la table. OK. Je vais mettre un petit commentaire pour que ce soit bien clair pour tout le monde. Ça, donc c’est l’image du titre.
Je veux enlever le style ici qui vient de l’autre formulaire pour vraiment repartir de zéro. Je sauvegarde, on va aller voir ce que ça donne ici. Paf, voilà on a bien : « Information Gratuite: 12 actions pour améliorer votre site Web ». Alors, ce n’est pas exactement la même image que celle que je vous avais montrée au départ, mais le principe est exactement le même. Voilà une image. Il me manque l’autre image, celle du guide. C’est pareil ; je vais aller la chercher de l’autre côté juste parce que je ne connais pas en fait son chemin par cœur. Après, ça n’a vraiment rien de spécial; c’est une balise image, complètement normale. Et je vais aussi enlever le style, comme ça, je ne triche pas. Je repars bien de zéro. Voilà, je sauvegarde, on va aller voir de l’autre côté. Donc OK, super. Ben voilà, ça marche bien.
Alors je vous remontre le code ici : on a bien première image, c’est le guide. La deuxième image, c’est le titre. Et en effet, ici la première image qui s’affiche, c’est le guide, deuxième image qui s’affiche, c’est le titre.. Ensuite on a les tables avec les formulaires.

A suivre… 

[/transcription]
Résumé

Analyse du code
Tout remettre à zéro et créer le formulaire, composé de:

une partie formulaire « pure » provenant de mon auto-répondeur
Des images crées avec Photoshop
Vous pouvez utilisez l’éditeur d’image de votre choix.



Création d’un formulaire avec une mise en page avancée

Finition en CSS
Alors tout d’abord, la première chose à faire ça va être de délimiter le formulaire pour voir où on travaille et d’en faire un contexte de positionnement. Alors vous vous rappelez peut-être, je vous en avais parlé lors de la précédente vidéo : le contexte de positionnement, c’est juste définir un élément conteneur pour dire: « Toi, tu es le contexte » et tous les autres éléments qui sont à l’intérieur de celui-ci vont pouvoir se positionner par rapport à lui. Donc ici, c’est vraiment très efficace. On va faire du formulaire un contexte de positionnement. Si vous avez du mal à comprendre ce que c’est, regardez la démonstration : vous allez comprendre tout de suite.
Alors bon, on va faire ça. Comme on est en CSS maintenant, on ne fait plus de HTML, donc on va pouvoir travailler directement dans Firebug. Alors on attrape le formulaire ici, « form ».
<form accept-charset="UTF-8" action="http://sg-autorepondeur.com/inscriptionabonne.php" enctype="utf-8" method="post" target="_blank">
Et il me dit bien que cet élément n’a pas encore règle, je peux en créer une. Donc j’en crée une et donc je vais lui dire que c’est une position relative.
C’est tout ce que je dois faire pour créer, pour dire que le formulaire est un contexte de positionnement. Mais pour le voir un peu mieux, je vais quand même lui mettre une bordure et même un fonds coloré. Comme ça, on le voit vraiment bien.
background-color: #EEEEEE;
border: solid 1px #333;
position: relative;

Voilà. Donc mon formulaire, vous voyez, il est très grand. Je vais le réduire.
background-color: #EEEEEE;
border: solid 1px #333;
position: relative;
width: 680px;

Voilà : 680 pixels, ça devrait suffire. Voilà, ça ne semble pas trop mal.
Donc maintenant, deuxième étape : je vais bouger ma grande image de guide pour la mettre à droite. Donc pour ça, je clique sur l’image, je vais créer une nouvelle règle et donc je la mets en position absolue et à droite, je vais la mettre carrément à zéro. Voilà. On peut même la faire dépasser un petit peu du cadre. Donc je peux même mettre -10 pour qu’elle aille encore un peu plus au-delà du cadre, vous voyez là? «Right» -10 elle est carrément un peu plus au-delà du cadre; donc ça, ça fait un peu joli. On a l’impression que c’est en 3D.
position : relative;
right : -10px;

Et voilà. La boîte, par contre, le formulaire n’est pas assez haut. Donc je vais retourner sur le formulaire et l’agrandir un peu avec 180 pixels, voilà.
background-color: #EEEEEE;
border: solid 1px #333;
position: relative;
width: 680px;
height : 180px;

Oui, ce n’est pas mal. Par contre je veux quand même un peu plus, voilà.
background-color: #EEEEEE;
border: solid 1px #333;
position: relative;
width: 680px;
height : 220px;

220 pixels, ça me semble bien. Bon, par contre, maintenant évidemment, les tables sont un peu trop hautes. Donc pour ça, je vais toujours agir en CSS sur le titre « Formation Gratuite » pour déjà le décaler un petit peu de la gauche et aussi pour pousser les tables qui sont juste après. Alors je clique sur mon image, je crée une règle, et donc je vais tout simplement mettre un «margin». Donc en haut, on n’en a pas besoin, à droite non plus, en bas ce serait bien quand même un petit «margin» de 40 pixels et à gauche, 20 pixels, ça ne sera pas mal du tout. Voilà.
Bien maintenant, je me rends compte qu’en haut ça ferait joli aussi d’en avoir un. Donc je vais mettre 20 pixels en haut aussi.
element.style {
margin : 20px 0 40px 20px
}

Voilà. Ça, c’est parfait. Et il me reste juste une dernière chose : ça va être de décaler mes tables. Donc pareille, je clique sur « tables ». J’avais déjà mis un border tout à l’heure, c’est pour ça qu’on voit la règle. Et donc je vais tout simplement mettre un petit «margin-left» à 20 pixels.
table {
border : 1px solid red;
margin-left : 20px
}

Et voilà!
Donc maintenant ce qui me reste à faire, c’est supprimer cette vilaine bordure. Donc je vais la supprimer ici comme ça pour vous montrer ce que ça donne, voilà.
Donc voilà. Le formulaire va ressembler à ça. Bon, je vous l’accorde : ce n’est pas tout à fait la même chose que ce qu’il y a sur mon site en ce moment, et ça demande un peu plus de travail. En fait, la base elle est là, maintenant il faut juste jouer un peu plus avec les propriétés CSS, voir la taille, la grandeur, peut-être retourner sur Photoshop pour éditer le titre « Formation Gratuite » pour le mettre sur deux lignes, par exemple, ou le mettre un peu plus gros. Enfin, ça demande beaucoup de temps. Donc voilà. Ici, c’est vraiment un condensé.
Copie des changements depuis firebug vers le fichier HTML
Pour que toutes ces modifications soient pérennes, je dois encore aller copier-coller tout le code que j’ai fait dans firebug sur mon fichier HTML. Et c’est ce que je vais faire à présent. Alors, on va commencer par un début : on va commencer par forme. On avait ici plein d’éléments, hop! Je sélectionne tout, je vais sur Notepad ++ et je vais dans mon «form».
Vous allez remarquer cette fois-ci que je ne travaille pas avec un fichier CSS séparé tout simplement parce que je n’ai qu’une seule page à styler. Donc ça n’a vraiment pas d’intérêt d’avoir un fichier CSS séparé étant donné que ce style ne s’appliquera qu’à cette page. Le but du CSS séparé, c’est justement de pouvoir l’utiliser sur plein de pages. Si vous utilisez que sur une seule page, ça n’a vraiment aucun intérêt.
Donc c’est pour ça ici j’utilise l’attribut style qui en fait est un espèce de raccourci du fichier séparé. Bon. En temps normal, il ne faut pas l’utiliser. C’est vraiment que dans ce cas très précis où j’utilise une page complètement indépendante que j’affiche dans un « iframe ». Alors je colle tout le style que j’avais copié dans firebug, voilà hop !
<form style="background-color: #eeeeee; border: solid 1px #333; height: 220px; position: relative; width: 680px;" accept-charset="UTF-8" action="http://sg-autorepondeur.com/inscriptionabonne.php" enctype="utf-8" method="post" target="_blank">
Je sauvegarde. Vous pouvez vous amuser à effacer les blancs comme ça, mais ce n’est pas obligatoire. Vous faites comme vous voulez. Moi, je vais le laisser en l’état.

Ensuite, on va aller chercher l’image, voilà, le style de l’image. Donc l’image, c’est la deuxième; je mets aussi un attribut «style », tac. Je le colle dedans.
<img style="position: absolute; right: -10px;" src="http://lesdoigtsdanslenet.cm/wp-content/themes/vertulab_lddln/images/form/webmaster-efficace-250-offert.png">


Pareil pour l’image en dessous.


<img style="margin: 20px 0 40px 20px;" src="http://lesdoigtsdanslenet.cm/wp-content/themes/vertulab_lddln/images/form/titre-newsletter-v4.png" alt="Formation Gratuite: 12 actions pour améliorer votre site web">

Voilà, et pareil pour la table qui me reste en dessous, là. Voilà, un «margin-left» 20 pixels.
Voilà et je vais supprimer les deux tables que j'ai en haut, les deux bordures que j'ai en haut sur mes tables et sur mes cellules.
Voilà, maintenant, toutes les modifications ont été apportées. Si je retourne sur le front et que je recharge, je devrais avoir la même chose que j’ai actuellement. Je recharge et voilà : c’est impeccable. Donc mon formulaire est terminé. Maintenant je vais pouvoir très simplement créer une petite balise «I frame» où je veux dans mon site web, faire pointer l’attribut SRC vers ce fichier-là qui est hébergé sur mon serveur et donc j’aurais le formulaire de mon choix que j’ai fait avec une petite main.
Voilà, j’espère que vous avez bien réussi à suivre ce tuto. C’était beaucoup plus long et beaucoup plus compliqué que d'habitude, mais voilà, ça a été une demande d’une lectrice donc j'avais envie de lui répondre et pis c’est aussi l’occasion de vous montrer que tout n’est pas toujours simple et que parfois, on a l'impression que c'est simple, que c'est rapide à faire, et ça prends\ des heures et des heures.
Voilà. Bien, merci beaucoup de m'avoir suivie et je vous dis à très bientôt.
Résumé

Le code CSS pour la mise en page

1. Faisons toute la mise en page dans firebug
2. Puis on copie tout dans le fichier HTML