Publicité

Cherchez-vous depuis des jours comment insérer un formulaire de contact sur votre site web ? Gratuitement et qui ne pose pas de problèmes ? Ici, vous allez découvrir 6 différentes méthodes, et non pas une !

Que vous soyez sur WordPress, Joomla ou Blogspot, ou si vous avez un site web statique écrit en HTML, vous allez saurez en lisant ce tutoriel comment créer facilement un formulaire de contact pour votre site web !

Voici les méthodes que vous allez trouvé dans ce tutoriel : EmailMeForm, MonSiteGratuit, FoxyForm, Kontactr, Google Docs et Script PHP

N’oubliez pas que les méthodes que vous allez voir sont toutes gratuites…

Allons-y !

Publicité

REMARQUE POUR LES UTILISATEURS DE WORDPRESS : Vous pouvez utiliser l’extension Contact Form 7 pour créer une page de contact en suivant ce tutoriel (cliquez ici)

6 méthodes pour créer un formulaire de contact pour son site web !

1ère méthode : EmailMeForm.com

EmailMeForm est un service existant depuis 2 années environ, il est connu par sa stabilité, sa rapidité et sa performance, vous pouvez en utilisant ce service pour obtenir 5 formulaires de contact gratuits avec une limite de 200 messages/1mois !

Vous pouvez vous inscrire à EmailMeForm via la page d’inscription http://www.mailmeform.com/v-signup.html

Remplissez le formulaire d’inscription comme il faut, et validez en cliquant sur « Sign Up« …

166

Publicité

Une fois votre inscription validé, un message d’activation sera envoyé sur votre boîte…

175

Terminez votre inscription en cliquant sur le lien bleu dans le nouveau message reçu…

185

Une fois l’inscription confirmée, ouvrez le tableau de bord en cliquant sur « here »

Publicité

194

Comme je vous l’ai dit, vous avez la possibilité de créer 5 formulaires de contact par compte, suivez la procédure qui suit pour créer le premier formulaire de contact…

Cliquez sur « Add Form » pour créer un nouveau formulaire…

203

Cliquez sur « Go to Template section. I’d like to choose from a list of pre-made forms« , pour obtenir un formulaire pré-créé…

Publicité

2111

Cliquez ensuite sur « Customize » pour modifier les entrées du formulaire de contact…

226

Comme vous l’avez remarqué, le formulaire est écrit en anglais, donc on doit le traduire, facile à faire :)

Cliquez premièrement sur le champ « Name« , changez-là en « Nom » et faites la même chose avec les autres champs… Enregistrez les changements en cliquant sur « Save Form« …

Publicité

232

Cliquez ensuite sur « Modify email notifications for this form » pour modifier la façon de recevoir le message envoyé par l’internaute…

242

Ajoutez d’autres emails, si vous n’êtes pas le seul à recevoir les messages envoyés par les visiteurs de votre site… Changez les autres paramètres comme dans l’image ci-dessous, n’oubliez pas de cocher « Show Visitor IP » pour faciliter la localisation…

252

Publicité

Votre formulaire est prêt pour l’utilisation…

Cliquez ensuite sur « Take me back to the Form Manager » pour revenir à l’interface principale du gestionnaire de formulaires…

262

Pour obtenir le code HTML à insérer, vous n’avez qu’à cliquer sur le bouton « Code« …

Le code HTML obtenu va vous permettre d’utiliser le formulaire de contact à n’importe quelle place dans votre site web…

Publicité

272

Pour cette étape, on va vous proposer par défaut un code HTML mélangé avec du CSS et JavaScript…

Vous avez le choix, si vous pensez que ce code peut être un peu lourd pour le chargement de la page, je vous invite à utiliser le code « HTML Only« , vous pouvez ainsi obtenir un code léger, qui n’utilise ni des feuilles de style, ni du code JavaScript…

282

Pour les débutants, si vous ne savez pas comment copier le code, je vous invite à me passer le logiciel qu’utilise votre site web…

Publicité

2ème méthode : Le générateur de MonSiteGratuit

L’avantage de cette méthode c’est la facilité et la rapidité, mais l’inconvénient c’est que je ne peux nul part garantir la disponibilité du service…

Pour créer un formulaire de contact, ouvrez ce lien : http://www.monsitegratuit.com/services/cybermail/formulaire_type1.php

Lisez les conditions d’utilisation, et validez en cliquant sur « J’accepte les conditions d’utilisations« …

292

Cochez les champs indispensables pour un formulaire de contact : Nom, Adresse Email, Sujet et Message…

Publicité

Mettez un titre et une description, changez les couleurs comme dans l’image ci-dessous…

Mettez le lien principal de votre site web, et l’adresse email de contact…

Cliquez sur « Enregistrer les paramètres », la page va se recharger… Vous allez pouvoir accéder au code HTML prêt à utiliser…

Copiez le code HTML sur une page intitulée « Contactez-nous! »…

301

Publicité

En voici le résultat, avec les codes de couleurs que j’ai utilisé…

315

Le créateur du site annonce dans les conditions d’utilisation qu’il est interdit d’enlever les liens de retour en bas du formulaire…

3ème méthode : Foxyform.com

Si vous voulez obtenir le code HTML de votre formulaire en 3 minutes gratuitement et sans inscription, je vous recommande Foxyform.com !

Valable en 8 différents langages, ce site web offre la création d’un formulaire de contact gratuit sans inscription, à une facilité extrême !

Publicité

Sans trop parler, ouvrez ce site web : http://fr.foxyform.com

Cochez les champs nécessaires pour votre formulaire de contact, je vous recommande de cocher les quatre champs proposés…

Changez les couleurs de votre formulaire en cliquant sur « color« …

Mettez l’adresse de contact et validez en cliquant sur « Créer un formulaire« …

322

Publicité

Et voici le code HTML, rien de plus facile que cela…

Vous n’avez qu’à copier le code HTML sur votre site web…

332

4ème méthode : Kontactr.com

Kontactr.com offre le service de création de formulaires de contact en anglais, l’avantage de ce service c’est qu’il est toujours gratuit, et utilisé par des milliers d’utilisateurs… Ce service peut être utile pour les sites web en anglais…

Pour créer un compte kontactr, ouvrez ce lien et mettez les informations d’inscription : http://kontactr.com/signup

Publicité

Cliquez sur « Sign Up » pour valider l’inscription…

1115

Validez votre inscription en cliquant sur le lien bleu se trouvant dans l’email d’activation…

1212

Ouvrez cette page : http://kontactr.com/login et ouvrez votre compte…

Publicité

139

Cliquez ensuite sur « Customize » pour modifier les couleurs…

Copiez par la suite le code HTML généré et insérez-le sur votre site web…

146

5ème méthode : Google Docs

Si vous disposez d’un compte chez Google, alors là vous pouvez créer un formulaire de contact facilement, en utilisant le service Google Docs… Pour ceux qui ne savent pas encore ce service, alors c’est une alternative web au logiciel de Microsoft, l’Office :D

Publicité

Connectez-vous à votre compte Google, et ouvrez ce lien : http://docs.google.com

Cliquez sur « Créer » > « A partir du modèle »…

138

Utilisez le modèle : « Contact us » website form (vous pouvez le retrouver en utilisant la barre de recherche…)

225

Publicité

Mettez un titre, une description et modifiez les champs comme dans l’image ci-dessous…

Cliquez sur « Thème » dans la barre en haut pour modifier le style du formulaire…

314

Voici la page du choix du thème, un clic suffit pour choisir le thème et revenir à la page de modification du formulaire…

411

Publicité

Cliquez sur « Autres actions » > « Intégrer » pour obtenir le code HTML

512

En voici le code que vous devez utiliser, il s’agit d’un <iframe>…

Vous pouvez donc modifier le code en passant par la même page de Google Docs…

612

Publicité

Et voici le résultat, pas mal…

811

L’inconvénient de la méthode utilisant Google Docs, c’est que vous ne pouvez pas recevoir les emails envoyés sur votre boîtes, les messages vont être regroupées dans un tableau d’excel… Cela peut être utile pour quelqu’un qui veut exporter tous les messages reçu en un temps record…

6ème méthode : Script écrit en PHP

Si vous êtes un utilisateur avancé, vous pouvez utiliser la méthode qui est à l’origine de toutes les méthodes que j’ai cité en haut… Vous pouvez créer un script PHP qui permet l’envoi des messages, mais cela n’est possible que si vous disposez d’un hébergement qui traite les fichiers PHP…

Et pour ne pas vous perturber les choses… Je vais vous donner code prêt que j’ai trouvé sur ce site web (php-astux)

Publicité

Vous n’avez qu’à modifier les valeurs « $destinataire », « $copie » si vous n’êtes pas un utilisateur avancé…

Mettez à la place de l’adresse email « Soufiane@easytutoriel.com » votre adresse email de contact, mettez non pour la variable « $copie » si vous ne voulez pas que l’utilisateur reçoit une copie du message envoyé…

Vous pouvez modifier d’autres trucs, mais je vous recommande de ne pas modifier la structure du code PHP…

[php]

<!–?php <br ?–> /*
********************************************************************************************
CONFIGURATION
********************************************************************************************
*/
// destinataire est votre adresse mail. Pour envoyer à plusieurs à la fois, séparez-les par une virgule
$destinataire = ‘Soufiane@easytutoriel.com’;

Publicité

// copie ? (envoie une copie au visiteur)
$copie = ‘oui’;

// Action du formulaire (si votre page a des paramètres dans l’URL)
// si cette page est index.php?page=contact alors mettez index.php?page=contact
// sinon, laissez vide
$form_action =  »;

// Messages de confirmation du mail
$message_envoye = "Votre message nous est bien parvenu !";
$message_non_envoye = "L’envoi du mail a échoué, veuillez réessayer SVP.";

// Message d’erreur du formulaire
$message_formulaire_invalide = "Vérifiez que tous les champs soient bien remplis et que l’email soit sans erreur.";

/*
********************************************************************************************
FIN DE LA CONFIGURATION
********************************************************************************************
*/

Publicité

/*
* cette fonction sert à nettoyer et enregistrer un texte
*/
function Rec($text)
{
$text = trim($text); // delete white spaces after & before text
if (1 === get_magic_quotes_gpc())
{
$stripslashes = create_function(‘$txt’, ‘return stripslashes($txt);’);
}
else
{
$stripslashes = create_function(‘$txt’, ‘return $txt;’);
}

// magic quotes ?
$text = $stripslashes($text);
$text = htmlspecialchars($text, ENT_QUOTES); // converts to string with " and ‘ as well
$text = nl2br($text);
return $text;
};

/*
* Cette fonction sert à vérifier la syntaxe d’un email
*/
function IsEmail($email)
{
$pattern = "^([a-z0-9_]|\\-|\\.)+@(([a-z0-9_]|\\-)+\\.)+[a-z]{2,7}$";
return (eregi($pattern,$email)) ? true : false;
};

$err_formulaire = false; // sert pour remplir le formulaire en cas d’erreur si besoin

// si formulaire envoyé, on récupère tous les champs. Sinon, on initialise les variables.
$nom = (isset($_POST[‘nom’])) ? Rec($_POST[‘nom’]) :  »;
$email = (isset($_POST[’email’])) ? Rec($_POST[’email’]) :  »;
$objet = (isset($_POST[‘objet’])) ? Rec($_POST[‘objet’]) :  »;
$message = (isset($_POST[‘message’])) ? Rec($_POST[‘message’]) :  »;

Publicité

if (isset($_POST[‘envoi’]))
{
// On va vérifier les variables et l’email …
$email = (IsEmail($email)) ? $email :  »; // soit l’email est vide si erroné, soit il vaut l’email entré
$err_formulaire = (IsEmail($email)) ? false : true;

if (($nom !=  ») && ($email !=  ») && ($objet !=  ») && ($message !=  »))
{
// les 4 variables sont remplies, on génère puis envoie le mail
$headers = ‘From: ‘.$nom.’ ‘ . "\r\n";

// envoyer une copie au visiteur ?
if ($copie == ‘oui’)
{
$cible = $destinataire.’,’.$email;
}
else
{
$cible = $destinataire;
};

// Remplacement de certains caractères spéciaux
$message = html_entity_decode($message);
$message = str_replace( »’,"’",$message);
$message = str_replace(‘’’,"’",$message);
$message = str_replace(‘
‘, »,$message);
$message = str_replace(‘
‘, »,$message);

// Envoi du mail
if (mail($cible, $objet, $message, $headers))
{
echo ‘
‘.$message_envoye.’

Publicité

‘."\n";
}
else
{
echo ‘
‘.$message_non_envoye.’

‘."\n";
};
}
else
{
// une des 3 variables (ou plus) est vide …
echo ‘
‘.$message_formulaire_invalide.’ <a href="contact.php">Retour au formulaire</a>

‘."\n";
$err_formulaire = true;
};
}; // fin du if (!isset($_POST[‘envoi’]))

if (($err_formulaire) || (!isset($_POST[‘envoi’])))
{
// afficher le formulaire
echo ‘</pre>
<form id="contact" action="’.$form_action.’" method="post">’."\n";
echo ‘
<fieldset><legend>Vos coordonnées</legend>
‘."\n";
echo ‘
‘."\n";
echo ‘ <label for="nom">Nom :</label>’."\n";
echo ‘ <input id="nom" tabindex="1" type="text" name="nom" value="’.stripslashes($nom).’" />’."\n";
echo ‘

‘."\n";
echo ‘
‘."\n";
echo ‘ <label for="email">Email :</label>’."\n";
echo ‘ <input id="email" tabindex="2" type="text" name="email" value="’.stripslashes($email).’" />’."\n";
echo ‘

Publicité

‘."\n";
echo ‘</fieldset>
‘."\n";

echo ‘
<fieldset><legend>Votre message :</legend>
‘."\n";
echo ‘
‘."\n";
echo ‘ <label for="objet">Objet :</label>’."\n";
echo ‘ <input id="objet" tabindex="3" type="text" name="objet" value="’.stripslashes($objet).’" />’."\n";
echo ‘

‘."\n";
echo ‘
‘."\n";
echo ‘ <label for="message">Message :</label>’."\n";
echo ‘ <textarea id="message" tabindex="4" name="message" rows="8" cols="30">’.stripslashes($message).'</textarea>’."\n";
echo ‘

‘."\n";
echo ‘</fieldset>
‘."\n";

echo ‘
<div style="text-align: center;"><input type="submit" name="envoi" value="Envoyer le formulaire !" /></div>
‘."\n";
echo ‘</form>
<pre>
‘."\n";
};
?>

Publicité

[/php]

Le code PHP utilisé ci-dessus n’utilise aucun style, vous pouvez ajouter votre propre style si vous êtes doué en webmastering…

Et voilà !

Si vous avez des questions à poser je vous invite à les poser dès maintenant en utilisant les commentaires en dessous de cet article :)

Soufiane – Easytutoriel.com

Publicité