Formulaire De Contact jQuery Gratuit

Créez votre formulaire de contact jQuery avec Ajax et PHP, aussi simplement qu'1-2-3 grâce un code pour formulaire de contact
jQuery ou au concepteur 123ContactForm.

Formulaire De Contact Gratuit jQuery Avec Code Ajax Et PHP
Comment créer un formulaire de contact jQuery avec Ajax et PHP
Un formulaire de contact est un des éléments les plus importants, que doit contenir votre site. Si vous voulez créez votre premier formulaire de contact, c'est primordial de connaitre les fonctionnalités et options dont vous auriez besoin, afin de rendre le site plus simple et pratique à vos visiteurs. Regardons de plus près la recète de succès d'un formulaire de contact:
  • Un affichage clair & responsive
  • Une possibilité de validation en ligne
  • Une solution de faire appraître le message de succès de soumission sur la même page et sans redirection!

Pourquoi choisir les formulaires de contact jQuery

En prenant en considération les éléments requis mentionnés, avoir un simple formulaire de contact avec jQuery, PHP et Ajax est la solution. C'est pourquoi:
  • HTML: Vous aide à créer une structure à vos formulaires de contact
  • PHP: Vous permet le traitement des données sur votre serveur
  • Ajax: Permet aux utilisateurs de souscrire le formulaire par un simple clic sur un bouton et sans actualisation de la pae
  • jQuery: Utile pour les vérifiaction en ligne
Ce tutoriel vous explique comment avoir toutes les fonctionnalités citées et comment créer un formulaire de contact complet jQuery avec Ajax et PHP. Regardez comment votre formulaire appraîtra à la fin, sur l'image à côté. Voous pouvez aussi télécharger gratuitement le code de formulaire de contact jQuery.
La Fonctionnalité Du Formulaire De Contact jQuery Avec Ajax & PHP

Création de votre formulaire jQuery en quelques étapes

Étape 1: Commencez par du HTML
On va commencer par créer une structure pour notre formulaire de contact grâce au code HTML. Créez simplement votre fichier index.php et écrivez un code HTML pour les champs que vous voulez ajouter à votre formulaire jQuery.

Dans notre exemple, nous allons ajouter les champs Name, E-mail, Message, et nous allons les vérifier avec le code jQuery:
  • Champ Name (validation d'une longueur maximum; valider si les entrées sont bien saisies)
  • Champ E-mail (validation du format correct de mail; valider le champ selon sa longueur)
  • Champ Message (valider pour une longueur minimale et maximale)
Sur la droite l'affcihage de la tructure HTML de votre formulaire de contact jQuery.
Étape 2: Customiser avec CSS
Après avoir écrit votre code HTML de notre simple formulaire de contact jQuery, nous devons ajouter le CSS pour une structure plus raffinée. La personnalisation CSS va:
  • Cacher les messages de vérifictaion grâce au display:none property
  • Afficher en rouge les messages d'erreur pour les champs précis
  • Ajouter de les propriétés de la marge, qui vont définir l'espace autour des éléments
  • Utiliser les proprités CSS comme les coleurs d'arrière-plan, box-shadow et border-radius pour affiner les cases
Vérifier l'onglet des "Résultats" de l'iframe à droite, afin de visualiser l'affichage final de votre formulaire jQuery.

Dans les étapes suivantes, nous allons pouvoir valider les formulaires des deux côtés (client/ serveur) grâce à jQuery.

Étape 3: Ajouter le script de validation jQuery et Ajax
La validation jQuery est une vérification du côté client, ce qui veut dire que la vérifictaion jQuery est réalisée au niveau de chaque champ. Dès qu'une saisie a lieu, le validateur de données valide ou pas l'information, et affiche, si besoin un message d'erreur ou bloque la souscription du formulaire.

L'étape suivante est l'utilisation du code Ajax pour envoyer les données à votre serveur. Le code Ajax aide l'utilisateur à envoyer ses données au serveur sans besoin d'actualisation de la page. La librairie jQuery possède beaucoup de fonctions intégrées, qui envoient les données au serveur en simple HTML ou JSON, et celui-ci répond par une donnée JSON, qui va nous aider à afficher les messages d'erreur.

Voir le tout en action
Testez le script de formulaire de contact jQuery sur JSFiddle, un éditeur de code intéractif qui vous montre le tout en action.

*NB: Cet exemple particulier, n'utilise pas une URL valide pour notre requête AJAX, à cause des problèmes de sécurité de JSFiddle. Par contre, on utilise une astuce interne JSFiddle pour avoir une réponse à notre requête AJAX.
Étape 4: Rendre le formulaire accessible grâce au code PHP et tester le formulaire jQuery en action!
Comme on a pu valider notre formulaire jQuery à l'étape précédente, grâce à PHP nous allons traiter les données souscrites et enregistrer, retourner un message de succès ou un autre d'erreur, selon les cas.

<?php
// $_REQUEST - the data that is coming from the form, through AJAX
$params $_REQUEST;
// Do something with the parameters, probably you would like to save them in your database
if (everything_went_ok) echo "Everything is ok. Your submission was saved";
else (
something_went_wrong) echo "There was a problem. Your submission could not be saved";
?>
Plus de fonctionnalités avec notre concepteur de formulaires à validation jQuery intégrée
123ContactForm est un concepteur de formulaires basé sur PHP, jQuery et Ajax, qui vous permet de générer des formulaires customisés en ligne avec une validation du côté client & serveur.

Cela offre aussi une large palette de customisation et d'options comme les thèmes professionnels, CSS personnalisés, l'aliasing de domaine, (vérification d'image Captcha) et bien plus encore.

Grâce à 123ContactForm, concepteur de formulaires jQuery, créez tout type de formulaires en ligne et publiez le code généré sur votre site Web, blog et plateforme sociale: Wordpress, Facebook, Joomla, Wix, Blogger, Twitter, pour commencer. Sans code et en gagnant du temps!.
Concepteur De Formulaires HTML Avec Vérification