Besoin d'un coup de pouce ?

Vous avez appelez au secours !
Voici quelques informations qui vous permettrons de mieux utiliser ou comprendre ce générateur de formulaire.

Utilisation générale du générateur

Acceder au formulaire par l'intermédiaire de ce site, la liaison se trouve sur cette page "générateur de formulaire"

Identifiez-vous avec les identifiants visiteur (indiqués sous le module de connexion)

Cliquez sur "Create a new form" pour accéder à l'interface de création

Lorsque vous êtes dans l'éditeur de formulaire, utilisez le menu de gauche pour ajouter de nouveaux éléments dans votre formulaire de contact

Utilisez le menu en haut à changer la typographie, les couleurs, les frontières et les attributs de remplissage pour tous les éléments de votre formulaire

Utilisez le menu s'affichant à droite pour modifier les propriétés de chaque entrée dans votre formulaire

Vos champs établis et paramètrés, cliquez sur le bouton "Next step: go to form configuration" pour définir le fonctionnement de votre formulaire (adresse email d'envoie des données, gestion et couleurs des messages et alertes utilisateur)

Vous voulez modifier votre formulaire, cliquez sur le bouton "return to the form" pour revenir à l'nterface de création

Une fois votre formulaire de contact prêt, cliquez sur le bouton "Save and create source files "

Plusieurs choix se propose alors :

  • "View your form" : visualisé et essayé votre formulaire dans un nouvel onglet ou fenetre (aucun mail ne sera transmis lors d'un test)

  • "Return to the form" : vous renvoie à l'interface de création en cas de modifications à effectuer
  • "Save and update" : remet votre code source à jour si vous avez remodifier votre formulaire
  • "Download sources" : Vous permet de télécharger les fichiers sources du formulaire que vous venez de créer afin de l'intégrer à votre site ou page Web (format .zip)

Intégration du formulaire dans votre page Web

Votre formulaire conçu et ses paramètres définis, cliquez sur le bouton "download sources"

Votre navigateur vous proposera alors de télécharger le fichier archive .zip contenant l'ensemble des fichiers nécessaire au fonctionnement de votre formulaire. Enregistrez la à l'emplacement voulu et accèdez y.

Décompresser cette archive.
Ouvrez les dossiers "contactform-download" > "My-Contact-Form-xx" pour arriver au fichier "index.php" et dossier "cfg-contactform-xx".

Pour intégrer le formulaire de contact dans votre code, ouvrez, avec votre éditeur de code, le fichier "index.php" de votre formulaire de contact et effectuez les actions suivantes :

  • Copier-coller le code se trouvant entre les balise de commentaires <!-- Contact Form Start --> et <!-- Contact Form End --> entre les balises d'en-tête <head> et </ head> de votre page.
    Le contenu peut varier de l'exemple ci-dessous en fonction du type de champs que vous avez inclus dans votre formulaire et en fonction de l'identifiant du formulaire que vous venez de créer.
    Ps : Le script nécessite au moins jQuery 1.7.2 pour fonctionner correctement.
    Exemple d'integration :

    <head>

    ...

    <!-- Contact Form Start -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script src="cfg-contactform-3/js/contactform.js"></script>
    <link rel="stylesheet" type="text/css" href="cfg-contactform-3/css/contactform.css"/>

    <!-- Contact Form End -->

    </head>

  • Copier-coller tout ce qui est entre les balises <div class="cfg-contactform" id="cfg-contactform-3"> et </div><!-- cfg-contactform --> (ces 2 balises étant aussi à intégrer dans le code à copier-coller) entre les balises de corps <body> et </body> de votre page.
    Exemple d'intégration :

    <body>

    ...

    <div class="cfg-contactform" id="cfg-contactform-3"> <!--debut du formulaire-->

    <div class="cfg-contactform-content">

    ... <!--contenu de votre formulaire-->

    </div><!-- cfg-contactform-content -->

    </div><!-- cfg-contactform --> <!--fin du formulaire-->

    ...

    </body>

  • Placez le dossier "cfg-contactform-xx" dans le même dossier que celui de la page qui contiendra votre formulaire de contact.
    Le dossier "cfg-contactform-xx" contient tous les fichiers nécessaires au bon fonctionnement de votre formulaire de contact.
  • La page dans laquelle vous intégrez votre formulaire de contact doivent avoir l'extension ". php".
    Si vous décidez d'intégrer un formulaire de contact dans une page qui existe déjà sur votre site web mais qui comporte l'extension ". html" (comme "contact.html" par exemple), vous aurez simplement à renommer cette page en "contact.php" pour faire fonctionner le formulaire de contact correctement.
    Si votre formulaire de contact comprend un champ "Upload", créez manuellement un dossier nommé "upload" que vous placerez dans le dossier "cfg-contactform-xx" du formulaire.

Utilisation du menu supérieur

Le menu supérieur vous propose des options de modifications générales lors de la création, personnalisation ou modification de votre formulaire :

  • Fonts and color : Vous permet de personnaliser les paramètres de police de caractères pour l'ensemble de vos champs, paragraphes texte, labels et titres
  • Input field style : Modifications des paramètres des champs (marges internes padding, bordures arrondies, épaisseur et couleur de la bordure)
  • Expand / Collapse all : Ouvre ou ferme l'ensemble des fenetres de personnalisation des champs
  • Clear form : Réinitialise l'espace de création (suppression des champs en place)
  • New form : Création d'un nouveau formulaire, soit d'un espace vide, soit à partir de la base en cours
  • Exit : Sortir de l'espace de création et retour à l'espace d'accès au formulaire

Définition du fonctionnement de votre formulaire (étape 2)

Plusieurs éléments sont à définir lors de l'étape 2 de création de votre formulaire :

  • Form configuration

    • Form name : c'est le nom du formulaire affiché lors de la réception par email des données saisies par l'utilisateur
    • Your email address : adresse email à laquelle les données saisies par l'utilisateur seront transmise, celle à laquelle vous souhaitez recevoir les informations
    • Notification subject line : information qui seront affichées en tant qu'objet dans l'email que vous recevrez
    • Timezone : zone horaire de référence

  • Form validation message

    • Redirect the user to a specific url after he submits the form : redirige l'utilisateur vers la page Web de votre choix aprés l'envoie du message
    • Show the confirmation message in the form page : affiche un message de confirmation d'envoi dans la meme page que celle contenant le formulaire
    • Message : message de confirmation d'envoi affiché
    • Message color : définissez les paramètres du message de confirmation
    • URL : page vers laquelle est redirigé, après envoi du formulaire, l'utilisateur (uniquement si choix "Redirect the user to a specific url after he submits the form")

  • Form message error

    • Invalid email address : message affiché si l'adresse email saisie est invalide
    • Message color : définissez les paramètres des messages d'erreurs

  • Delivry receipt

    • Activate delivery receipt : notify the user by email that his message has been sent to you : avertissement par email de l'utilisateur que son message a été envoyé
    • Insert a copy of the form data in the user notification message : l'utilisateur recevra une copie du message transmis
    • Name in the inbox "From" field : nom d'expéditeur qui sera affiché dans la boîte de réception de l'utilisateur (par defaut l'adresse email à laquelle sont transmises les données)
    • Notification message format : format du language de code du message transmis
    • Notification subject line : intitulé objet de l'email de confirmation d'envoi transmis à l'utilisateur
    • Notification message : message de l'email de confirmation d'envoi transmis à l'utilisateur

Derniers ajouts