TutorielsFormulaire de contact avec pièce jointe

Formulaire de contact avec pièce jointe gratuit !

Vous en rêviez ? Elfsight l’a fait ! Voici comment ajouter à votre site web un formulaire de contact avec pièce jointe.

Première étape, rendez vous sur le super site de Elfsight et créez votre compte gratuitement.

 

Une fois connecté, choisissez dans les applications le widget “Contact Form”

 

Personnaliser le formulaire

La première étape consiste à choisir le template que vous souhaitez. Cliquez sur le gros bouton rose “Continue with this template” pour continuer.

 

Dans le menu de gauche, il y a plusieurs onglets. Le premier onglet, Form, affiche les différents éléments de champs du formulaire. Vous pouvez ici supprimer des champs ou en ajouter. Par défaut, tout est en anglais, il va donc vous falloir dans un premier temps traduire les textes du formulaire. Cliquez sur le premier élément champ texte.

Le Label est le texte qui s’affiche au dessus du champ, vous pouvez le traduire ou décider de ne rien mettre pour ne pas afficher de label. Ainsi vous aurez un formulaire plus épuré. Si vous choisissez cette solution, il vous faudra donc renseigner le “placeholder”.

Choisissez également si le champ est requis ou pas en cochant le bouton “Make this field required”

Vous pouvez aussi afficher une description du champ.

Et pour finir la partie “Column layout” permet de choisir si vous souhaitez afficher le champ en une, deux, ou trois colonnes.

 

Vous avez, bien sûr l’élément “pièce jointe”. Cliquez dessus et traduisez tous les textes. Vous verrez, c’est très facile à personnaliser. Même si les termes sont en anglais vous comprendrez très vite j’en suis sûr. Même toi Régis 😉

 

Il y a plein d’autres éléments de formulaire intéressants ici ! Vous pouvez par exemple ajouter des éléments de notation. Sous forme d’étoiles, de pouces en l’air ou encore de smiley. Cette fonctionnalité peut être très pratique si vous souhaitez avoir des retours de vos clients ou prospects.

Il y a aussi un élément “Date picker” ou “sélecteur de date” je vous laisse la surprise de le découvrir. Hi hi !

 

Paramétrage du formulaire

Une fois tous les champs de votre formulaire terminés. Passez à l’onglet du menu “Mail”. Cet onglet vous permet de paramétrer l’envoi des emails.

Bon alors là, rien de plus simple, renseignez votre adresse email et puis c’est tout ! Vous pouvez ajouter plusieurs adresses email et par défaut, l’adresse email avec laquelle vous avez créez votre compte est utilisée.

Personnalisez ensuite le sujet de l’email et le petit texte dans le corps du mail qui s’affichera avant les informations du formulaire collectées.

Attention, ces deux paramétrage là seront affichés dans le mail que VOUS recevrez lorsque quelqu’un rempli le formulaire.

 

On passe maintenant à l’onglet “Settings”. C’est ici que vous allez personnaliser les messages qui s’afficheront à l’utilisateur du formulaire.

Première option, “Action After Submit ” ou Action après envoi”.

Choisissez le type d’action que vous souhaitez après l’envoi du formulaire “Action after form submission”. Vous avez le choix entre :

  • Afficher un message. (Que vous allez rédiger juste en dessous)
  • Renvoyer vers une autre page internet. (par exemple une page que vous aurez créée avec WebAcappella 😉
  • Simplement masquer le formulaire

Si vous avez choisi la première option, rédigez un petit texte dans l’espace en dessous “Thank you message”.

Deuxième option, traduisez le texte du bouton d’envoi ainsi que les messages d’erreur du formulaire. C’est également là que vous pourrez traduire les termes du date picker ou “sélecteur de date” pour ceux qui aurai choisi cet élément plus tôt.

Troisième option, choisissez un Recaptcha visible ou invisible.

Quatrième option, et celle-ci est quand même très cool ! Vous pouvez synchroniser votre formulaire à un Google Sheets pour collecter les données du formulaire directement dans votre compte Google Drive. C’est pas super cool ça ???!!!

 

Pour finir, l’onglet “Appearance” vous permet de choisir si vous souhaitez votre formulaire en mode “default”, “boxed” ou “floating”. Je trouve que le mode “boxed” ne sert par à grand chose. Préférez plutôt le mode par défaut ou le mode “Floating” Ce dernier affiche le formulaire sous forme de “slider” qui arrive part la droite de l’écran à condition que l’utilisateur clic sur un petit icon en bas à droite. Essayez, vous comprendrez.

L’option Style permet de personnaliser le style du formulaire. Vous pourrez par exemple obtenir un formulaire très épuré avec uniquement un petit trait pour symboliser le champ si vous choisissez le style “Material”.

Vous pourrez quoi qu’il arrive, modifier ces paramètres après avoir publié votre site avec le formulaire. Donc pas d’inquiétude, n’hésitez pas à tester les différentes options !

 

Bon voilà, vous avez personnalisé votre formulaire de contact, il faut maintenant l’intégrer à votre site internet. cliquez sur le bouton vert en haut à droite “Save” puis choisissez votre Plan. La version gratuite n’est limité que dans le nombre de vues du widget. Commencez donc par la version gratuite puis vous changerez de Plan le moment venu.

Intégrez votre fil Instagram sur votre site internet

 

Intégrer le code dans votre site web

Votre code d’intégration apparait, copiez le et rendez vous dans WebAcappella. Pas d’inquiétude, vous pourrez toujours afficher de nouveau le code si besoin.

Intégrez votre fil Instagram sur votre site internet

 

Ajoutez un élément html sur votre page, là où vous le souhaitez, et coller le code. Ce code peut être coller dans une page ou bien une sous-page pour WebAcappella Grid, ou dans un gabarit pour WebAcappella FX.

Intégrez votre fil Instagram sur votre site internet

 

Conclusion

grâce à Elfsight.com vous pouvez à present afficher un super formulaire de contact avec pièce jointe, évidement responsive !

Les possibilité de personnalisation sont énorme donc n’hésitez pas à tester toutes les options et à nous partager vos retours d’expérience.

Si ce type de widget vous plait, je vous invite à lire aussi notre article : Intégrez votre fil Instagram sur votre site internet

 

Bisous les neveux !

Un commentaire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Publier un commentaire