Personnalisation en image d’un formulaire de SG-autorépondeur

Personnalisation en image 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):

formulaire sg auto-répondeur

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

Partie 1

Cliquez ici pour afficher la transcription de la vidéo :
« Tuto N° 10 : personnalisez votre formulaire de SG-autorépondeur (Partie 1/2) »


Bonjour à tous. Ici Marie-Eve du blog Les Doigts Dans Le Net. 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 codeDans 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 formulaireEt 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épondeurCe 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 PhotoshopEnsuite, il y a des images que j’ai créées avec Photoshop que nous allons importer.
  • Finition en CSSEt 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 1:09

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 width="732" align="middle" scrolling="no" height="220" frameborder="0" style="margin:-5px 0 0 -10px;" src="http://lesdoigtsdanslenet.com/wp-content/themes/vertulab_lddln/files/form-newsletter.html">

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="http://lesdoigtsdanslenet.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 04:05

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 05:10

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

<style type="text/css">
	table{border: solid 1px red;} /*bordure rouge sur les tables*/
	td{border: solid 1px green;} /*bordure verte sur les cellules*/
</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"> * </font>: </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.</b></i></font>
			<br><input type="image" src="http://lesdoigtsdanslenet.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…

Fin de la 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

Partie 2

  • Niveau: Intermédiaire
  • Durée: 7’16

Cliquez ici pour afficher la transcription de la vidéo :
« Tuto N° 10 : Personnalisez votre formulaire de SG-autorépondeur (Partie 2/2) »

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" enctype="utf-8" target="_blank" action="http://sg-autorepondeur.com/inscriptionabonne.php" method="post">

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 4:19

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 method="post" action="http://sg-autorepondeur.com/inscriptionabonne.php" target="_blank" enctype="utf-8" accept-charset="UTF-8" style="background-color: #EEEEEE; border: solid 1px #333; height: 220px; position: relative; width: 680px;" >

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 src="http://lesdoigtsdanslenet.cm/wp-content/themes/vertulab_lddln/images/form/webmaster-efficace-250-offert.png" style="position: absolute; right :-10px;" />
[code]

Pareil pour l’image en dessous. 

[code]
<img 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" style="margin : 20px 0 40px 20px;" />

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.

http://lesdoigtsdanslenet.com

Voilà. Bien, merci beaucoup de m'avoir suivie et je vous dis à très bientôt sur Les Doigts dans Le Net. Au revoir!

Fin de la transcription

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

avis sg autorépondeur, CSS, formulaire sg autorépondeur, HTML, intégrer formulaire sg autorépondeur, intermédiaire, personnaliser formulaire sg autorépondeur, vidéo

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

28 commentaires

  1. Salut MarieEve,

    C’était un peu rapide pour moi, mais je vais le regarder encore une fois fois pour comprendre. Une question : est-ce que c’est applicable pour les formulaire Mailchimp aussi.

    PS : tu as une belle voix :)

    Elmokhtar

    Répondre
    • Salut Elmokhtar, le tuto marche avec n’importe quel formulaire qui possède une mise en page en tableau (ou « table »). Je pense que c’est le cas avec MailChimp.
      Bien à toi,

      Répondre
  2. Merci pour ces 2 vidéos! Je mis colle des ce soir pour mon blog!

    Répondre
    • Bon courage ! Tiens nous au courant!

      Répondre
  3. Excellent site d’autorépondeur en effet. Et il offre de multiples possibilités de personnalisations.

    Répondre
  4. Salut MarieEve.

    Bravo pour ta vidéo super clair. Après, je suis d’un niveau expert, mais je pense que tu as tout bien expliqué :)

    Par contre, deux petites choses:
    Tu le rajoute manuellement le code de l’iframe ou tu utilise un plugin ?

    Je reste sceptique par rapport à l’iframe. Une fois le formulaire remplis, tu ne fais pas de redirection vers une page remerciement ?
    Si oui, comment fais tu pour cette redirection ne se fasse pas juste à l’intérieur de l’iframe ?

    Répondre
    • Salut Florian,
      Merci pour les compliments :)
      Je rajoute l’iframe à la main. En fait, j’ai choisi cette solution par pure fainéantise…mon thème possède une mise en page très avancée des tableaux, dont je ne voulais pas pour ce formulaire. Plutôt que de surcharger tout le css, je suis passée par une iframe pour ne pas hériter du css de mon thème. De toute façon, j’utilise des images, donc c’est déjà mauvais pour le référencement du texte, alors je ne suis plus à ça près…

      Pour la redirection, j’avais bien le problème que tu décris au départ…comment ai-je résolu ça ? Je crois qu’en donnant un chemin absolu à mon auto-répondeur, ça a suffit. Je ne me souviens plus trop, mais je sais que je n’y ai pas passé beaucoup de temps, ça doit être quelque chose comme ça.

      A +

      Répondre
      • Merci pour le complément.
        Je vais tester pour voir ce que cela donne :)

        Ya tout de même un truc assez gênant avec cette personnalisation externe: tu ne peux plus utiliser le split testing de formulaire.
        Et c’Est dommage de ne pas pouvoir tester ses formulaires :/

        Une solution ?

      • Je n’ai jamais testé le spit testing (honte à moi) mais j’imagine que la distinction entre les deux formulaires se fait au moyen d’un id (dans un champ input « hidden ») ou de paramètres dans l' »action » de la balise « form » ? Du coup, la personnalisation ne gêne en rien le split testing.

      • mhhh, pas si sur.
        On split-test généralement la présentation justement 😉

        Je connais pas trop SG-autorépondeur.
        Sur Aweber, on intégre un code javascript pour le formulaire.
        Quand on fait un split-test, c’est un autre code javascript. Et tout se fait tout seul derrière (statistique précise, impression des formulaires)

        C’est le défaut que je vois.
        Cela dis, on est pas obligé de faire des split-test à tout va sur ses formulaires :)
        Ton formulaire est déja pas mal je trouve

      • En effet, si c’est un javascript qui change la présentation « à la volée », alors ça va être plus compliqué de faire une présentation personnalisée. Je pense pas que ce soit impossible mais on n’utilisera plus uniquement de CSS mais aussi du JavaScript.

        Tout ça c’est des suppositions, bien sûr ^^

        Le jour où je me penche sur les split-tests, ce sera l’occasion d’écrire un petit billet 😉 mais pour l’instant ça va, mon formulaire convertit bien! :)

        Merci pour la réflexion en tout cas. A+

  5. Bonsoir Marie-Eve,
    Moi aussi je rêvais de ce genre de tuto.
    Je ne sais pas si je vais y arriver
    mais je vais revoir et tout analyser.

    Répondre
    • Salut Hannah,
      si je réalise les rêves de mes lecteurs, c’est la fête! :) bon courage pour mettre tout ça en pratique !

      Répondre
  6. Quel est le nom du plugin que vous utilisez pour notepad++ afin qu’il soit connecté au ftp ?
    Merci.

    Répondre
    • Bonjour Patricia,
      il s’agit de NppFTP, il est en natif je crois. Sinon il faut l’installer via le plugin manager (complément > plugin manager > show plugin manager) ou à la main. Tous les plugins installés sont dans le menu « complément ».

      Répondre
  7. J’apprécie beaucoup cet article car cela montre qu’on peut réellement personnaliser en quelques manipulations, un formulaire généré automatiquement par votre autorépondeur.

    L’autorépondeur fait en général son possible pour proposer de beaux templates déjà prêts pour vos formulaires, mais une personnalisation telle qu’elle est expliquée dans cet article, fera que votre blog restera authentique.

    N’avez-vous pas déjà vu de nombreux formulaires et ne vous êtes-vous pas déjà dit : « Ah, ce blog utilise Aweber. » ou « Tiens ce formulaire vient de SG Autorépondeur ».

    Cet article fort intéressant sera mis en lien en dessous de nos vidéos de notre programme d’apprentissage.

    Merci Marie Eve !

    Répondre
    • Bonjour Sébastien,
      Tu as bien raison de souligner l’importance en terme d’image d’avoir un formulaire personnalisé. Moi en tout cas, je personnalise tout, déformation professionnelle sans doute.
      Merci de lier cet article à ton programme d’apprentissage, je suis ravie qu’il puisse aider le plus grand nombre d’utilisateurs de SG Auto-répondeur.
      Amicalement,

      Répondre
  8. Bonjour,

    Tout cela est bien intéressant, mais comme tu le dis, ça ne s’adresse pas aux débutants.

    Si tu le permets, pour ceux qui ne se sentent pas d’attaque, il y a la solution d’insérer son formulaire d’abonnement dans 1 boîte d’action qui permet de faire sensiblement la même chose, mais avoir à toucher au code et aux fichiers.

    J’ai rédigé 1 tutoriel à ce sujet sur le blog de Rodrigue: http://www.cree1site.com/boite-daction/

    Bonne journée,

    Bruno

    Répondre
    • Ben en fait, comme je te l’expliquais dans mon commentaire précédent, ce tuto permet de personnaliser le formulaire en lui même, mais ne traite pas de l’intégration du form dans la page (ce que fais ton plugin).

      Donc l’un n’exclu pas l’autre!

      Je laisse quand même ton lien, ton article est complémentaire.

      Bonne journée

      Répondre
    • Bonjour, mon blog est en ligne depuis aujourd’hui. Je suis abonné à SGA et l’utilise pour mes listes d’emails et plusieurs formulaires. J’ai personnalisé un formulaire « à ma façon » pour les abonnements à mes newsletters que j’intègre à la fin de tous mes posts. J’ai trouvé très facile à réaliser et à intégrer dans mes articles. C’est le 1er formulaire SGA que je personnalise. Prochainement je vais personnaliser l’email de confirmation en Html. Bien à vous, Ralph

      Répondre
      • Bonjour Ralph, j’ai voulu jeter un oeil à ce formulaire mais je ne le trouve pas sur votre site…il est sur une page en particulier ?

        Bien à vous et bonne continuation!

  9. Oui, j’avais bien compris.

    La boîte d’action te permet également de personnaliser ton formulaire, c’est même 1 de ses principaux intérêts avec l’intégration du formulaire dans la page ou l’article.

    Pour te remercier du lien, je vais en mettre 1 vers cet article sur ma page.

    Bonne journée

    Répondre
  10. De rien,

    C’est normal et c’est ma vision du blogging: le partage et l’entraide!

    Répondre
  11. Bonjour,
    Je viens de me lancer sur sg autorépondeur. Franchement, une fois toutes les étapes de mise en place franchies, je trouve ça génial. L’envoi de mails était une corvée qui me prenait un temps fou, et ce service me facilite considérablement la vie. J’apprécie particulièrement le professionnalisme de Sébastien et de son équipe, la qualité des tutoriaux vidéos détaillés et plein de conseils judicieux. Le fait que le site soit en français le rend extrêmement compréhensible, même par des novices des services autorépondeurs comme moi.
    Je ne peux qu’encourager toutes les entreprises françaises présentes sur le web à l’utiliser. Ca vous change la vie.

    Maxihicham

    Répondre
  12. Salut MarieEve,

    C’était un peu rapide pour moi, mais je vais le regarder encore une fois fois pour comprendre. Une question : est-ce que c’est applicable pour les formulaire Mailchimp aussi.

    PS : tu as une belle voix :)

    Elmokhtar

    Répondre
  13. Bonjour,

    Un énorme merci pour ce tutoriel, il m’a fallut 3 heures pour réaliser mon formulaire et sans vos vidéos j’aurais vraiment galéré 😉

    Bon courage et bonne journée ^^

    Répondre
    • Bonjour Jeremy,

      Ravie d’avoir pu aidé :) Saviez-vous que SG propose aussi pas mal de vidéo tutoriel pour prendre en main ce logiciel ?

      Répondre

Trackbacks/Pingbacks

  1. Personnalisation en CSS d'un formulaire donné par SG-autorépondeur - Les Doigts dans le Net | Communication web professionnelle | Scoop.it - [...] Dans cette vidéo, je vous montre pas-à-pas comment personnaliser un formulaire d'inscription à une newsletter, en CSS.  [...]
  2. Intégrer son formulaire d’inscription newsletter dans 1 boîte d’action | Bruno TRITSCH - [...] plugin supplémentaire et qui n’ont pas peur de la technique, je vous invite à lire l’article de Marie-Eve du…
  3. Vous administrez vous-même votre site professionnel: vos difficultés techniques et comment les résoudre - Les Doigts dans le Net - [...] vous êtes affolé par le prix annoncé. Est-ce bien raisonnable de compter une demi-journée pour personnaliser le formulaire par…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint