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 !

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

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

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

Une fois l'inscription confirmée, ouvrez le tableau de bord en cliquant sur "here"...

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

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

Cliquez ensuite sur "Customize" pour modifier les entrées du formulaire de contact...

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

Cliquez ensuite sur "Modify email notifications for this form" pour modifier la façon de recevoir le message envoyé par l'internaute...

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

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

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

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

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

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

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

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!"...

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

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 !

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

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

Vous n'avez qu'à copier le code HTML sur votre site web...

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

Cliquez sur "Sign Up" pour valider l'inscription...

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

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

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

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

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

Cliquez sur "Créer" > "A partir du modèle"...

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

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

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

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

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

Et voici le résultat, pas mal...

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)

Vous n'avez qu'à modifier les valeurs "$destinataire", "$copie" si vous n'êtes pas un utilisateur avancé...

Mettez à la place de l'adresse email "[email protected]" 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 = '[email protected]';

// 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
********************************************************************************************
*/

/*
* 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']) : '';

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

'."\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 '

'."\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";
};
?>

[/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