Créer un simple formulaire de contact pour des besoins simples

Que vous commenciez un simple blog, créiez un site Web d'entreprise ou bâtissiez un portefeuille de créations avec WordPress, une page "Contactez-nous" est (presque) toujours nécessaire et il est (presque) toujours préférable d'avoir un formulaire de contact plutôt que de le partager. votre adresse e-mail publiquement (les robots de spam les adorent cependant). Bien sûr, il existe beaucoup d'excellents plugins de formulaire de contact pour WordPress, mais pourquoi gonfler le site Web avec des plugins lourds avec beaucoup de requêtes de base de données, alors que nous pouvons utiliser simplement un joli plugin shortcode personnalisé à la place?

Avantages de construire votre propre formulaire de contact

Les plugins sont géniaux, mais un trop grand nombre d’entre eux avec beaucoup de fonctionnalités inutiles peut alourdir votre site web en utilisant des connexions à une base de données, en exécutant du code PHP supplémentaire, en ajoutant des feuilles de style CSS et des fichiers JS à votre en-tête… je veux juste rester à l'écart des plugins existants, quelle que soit la qualité du plugin que vous souhaitez utiliser.

Si vous ne savez pas comment coder, je dois admettre que vos mains sont (en quelque sorte) liées et que vous êtes obligé d'utiliser des plugins. Mais si vous êtes familier avec le développement WordPress à tous les niveaux (et je suppose que vous l’êtes, puisque vous êtes toujours avec moi), vous devriez envisager les avantages de pirater votre propre thème ou de coder votre propre plugin. Voici les avantages dans mon esprit:

Optimisation - Utiliser trop de code, en particulier du code supplémentaire dont vous n'avez pas besoin, peut même pousser les limites de votre plan d'hébergement dans certains cas. Mais même si vous avez beaucoup de ressources sur votre serveur, l'optimisation est toujours bénéfique pour la santé de votre site Web..
Propreté - Outre la santé du serveur, un code plus propre peut représenter un avantage considérable pour la vitesse de chargement et d'analyse de votre site Web. En codant / piratant vous-même, vous utilisez simplement ce dont vous avez besoin et n'avez pas à charger des tonnes de données pour pouvoir utiliser une fonctionnalité simple sur votre site Web. C'est même bon pour le référencement, vous savez.
La joie de prendre le contrôle - Vous ne devriez jamais sous-estimer le pouvoir d'appeler les coups. Prendre le contrôle de votre site Web fait de vous un concepteur / développeur plus enthousiaste que d'utiliser un tas de code prêt à l'emploi. C'est pourquoi, même si nous fournissons le code complet à ceux qui ne le souhaitent pas, je pense personnellement que vous ne devez pas copier / coller le code ici, mais l'écrire vous-même. Même si vous tapez exactement le même code, vous pouvez voir comment fonctionne le plug-in et ressentir le plaisir de prendre le contrôle. Sérieusement.

Le code

Très bien, assez avec le bavardage - commençons à coder! Nous n'allons pas faire face à d'énormes quantités de code ni à aucun type de travail ardu ici, donc même si vous êtes débutant en PHP et / ou WordPress, vous pouvez comprendre le code en suivant mon exemple et en recherchant une partie du code que vous ne reconnaissez pas.

Il est possible de mettre ce code directement sur votre thème functions.php fichier, mais une meilleure façon de le faire est de l’utiliser comme plugin. Ainsi, lorsque vous changez de thème, vous ne perdez pas de fonctionnalité et vous finissez par imprimer des codes courts dans votre contenu. Commençons par les informations standard du plugin:

 [contact email = "[email protected]"] Version: 1.0 Auteur: Barış Ünver Auteur URI de l'auteur: http://beyn.org/ * / // Cette ligne de commentaire tient lieu du code incroyablement simple que nous allons écrire. Donc, vous n'avez pas vraiment besoin de lire ceci. ?>

Une petite fonction d'assistance: `get_the_ip ()`

Comme vous pouvez le deviner à partir du nom de la fonction, nous obtenons la véritable adresse IP de l'utilisateur, même s'il se connecte via un serveur proxy. Bien sûr, ce n'est pas à l'épreuve des balles, mais nous allons quand même l'utiliser comme une information supplémentaire de la part de l'utilisateur..

Fondamentalement, nous allons essayer d'obtenir les différents $ _SERVER variables: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP et REMOTE_ADDR, respectivement. Voici le code:

 fonction wptuts_get_the_ip () if (isset ($ _ SERVER ["HTTP_X_FORWARDED_FOR"])) return $ _SERVER ["HTTP_X_FORWARDED_FOR"];  elseif (isset ($ _ SERVER ["HTTP_CLIENT_IP"])) return $ _SERVER ["HTTP_CLIENT_IP"];  else return $ _SERVER ["REMOTE_ADDR"];

Le Shortcode

Si vous suivez mes messages ici sur Wptuts +, vous savez que je suis absolument amour API Shortcode de WordPress.

Je vais diviser le shortcode en 3 sections pour mieux l'expliquer, mais n'oublions pas d'ouvrir et de fermer la fonction de shortcode en premier:

 function wptuts_contact_form_sc ($ atts) // Cette ligne de commentaire tient également la place du shortcode brillant mais simple qui crée notre formulaire de contact. Et pourtant, vous perdez encore votre temps à lire ce commentaire. Bravo.  add_shortcode ('contact', 'wptuts_contact_form_sc');

Attributs de notre shortcode

Nous devons définir quelques attributs afin de rester flexible tout en restant léger. En voici dix:

 extract (shortcode_atts (array (// si vous ne fournissez pas d'adresse e-mail, le shortcode choisira l'adresse e-mail de l'administrateur: "email" => get_bloginfo ('admin_email'), "subject" => "", "label_name" => "Votre nom", "label_email" => "Votre adresse e-mail", "label_subject" => "Objet", "label_message" => "Votre message", "label_submit" => "Submit", // le message d'erreur lorsqu'au moins un des champs obligatoires est vide: "error_empty" => "Veuillez renseigner tous les champs obligatoires.", // le message d'erreur lorsque l'adresse de messagerie n'est pas valide. : "error_noemail" => "Veuillez entrer une adresse e-mail valide.", // et le message de confirmation de l'envoi de l'e-mail: "success" => "Merci pour votre e-mail! Nous reviendrons à vous dès que possible. "), $ atts));

Rappelez-vous que nous allons les référencer dans notre code en tant que variable avec le nom de l'attribut (par exemple. $ label_submit).

Envoi par courrier électronique

C'est la partie la plus importante de la fonction, je vais donc expliquer le code dans le code, avec des lignes de commentaire:

 // si la  L'élément est POSTé, exécutez le code suivant si ($ _SERVER ['REQUEST_METHOD'] == 'POST') $ error = false; // définit les "champs obligatoires" pour vérifier $ required_fields = array ("votre_nom", "email", "message", "sujet"); // cette partie récupère tout ce qui a été posté, les assainit et nous permet de les utiliser comme $ form_data ['subject']] poureach ($ _POST en tant que $ field => $ value) if (get_magic_quotes_gpc ()) $ value = stripslashes (valeur en $);  $ form_data [$ field] = strip_tags ($ value);  // si les champs obligatoires sont vides, réglez $ error sur TRUE et définissez le texte du résultat sur l'attribut de shortcode nommé "error_empty" poureach ($ required_fields as $ required_field) $ value = trim ($ form_data [$ required_field]); if (empty ($ value)) $ error = true; $ result = $ error_empty;  // et si le courrier électronique n'est pas valide, réglez $ error sur TRUE et définissez le texte du résultat sur l'attribut de shortcode nommé "error_noemail" if (! is_email ($ form_data ['email'])) $ error = vrai; $ result = $ error_noemail;  if ($ error == false) $ email_subject = "[". get_bloginfo ('nom'). "]". $ form_data ['subject']; $ email_message = $ form_data ['message']. "\ n \ nIP:". wptuts_get_the_ip (); $ headers = "De:". $ form_data ['name']. " <" . $form_data['email'] . ">\ n "; $ headers. =" Content-Type: text / plain; charset = UTF-8 \ n "; $ en-têtes. =" Encodage de contenu: 8 bits \ n "; wp_mail ($ email, $ email_subject, $ email_message, $ en-têtes); $ resultat = $ succès; $ envoyé = true ; // mais si $ error est toujours FALSE, rassemblez les variables POSTed et envoyez l'e-mail! if ($ error == false) // récupère le nom du site et le met devant l'objet $ email_subject = "[". get_bloginfo ('name'). "]". $ form_data ['subject']; // récupère le message à partir du formulaire et ajoute l'adresse IP de l'utilisateur ci-dessous $ email_message = $ form_data ['message' ]. "" \ n \ nIP: ". wptuts_get_the_ip (); // définit les en-têtes de courrier électronique avec le nom de l’utilisateur, son adresse électronique et le codage de caractères $ headers =" De: ". $ form_data ['votre_nom']. " <" . $form_data['email'] . ">\ n "; $ headers. =" Content-Type: text / plain; charset = UTF-8 \ n "; $ headers. =" Codage de transfert de contenu: 8 bits \ n "; // envoie le courrier électronique avec l'attribut de shortcode nommé 'email' et les données POSTed wp_mail ($ email, $ email_subject, $ email_message, $ headers); // et définissez le texte du résultat sur l'attribut de code court nommé 'success' $ result = $ success; //… et réglez la variable $ envoyé sur TRUE $ envoyé = vrai;

Le formulaire de contact

Cette partie est, bien sûr, aussi importante que la précédente. Après tout, comment le code précédent peut-il envoyer un courrier électronique s’il n’ya pas de formulaire de contact? :)

 // s'il n'y a pas de texte $ result (ce qui signifie qu'il n'y a ni erreur ni succès, c'est-à-dire que l'utilisateur vient d'ouvrir la page et n'a rien fait), il n'est pas nécessaire d'afficher la variable $ info if ($ result! = "") $ info = ''. $ résultat. '
';  // de toute façon, construisons le formulaire! (rappelez-vous que nous utilisons des attributs de shortcode comme variables avec leurs noms) $ email_form = '  '. $ label_name. ':  
  '. $ label_email. ':  
  '. $ label_subject. ':  
  '. $ label_message. ': '. $ form_data ['message']. ' 
   
 ';

Pointe: Si vous avez bien regardé le code HTML du formulaire de contact, vous avez probablement déjà vu le supplément $ sujet variable. Rappelez-vous l'attribut shortcode 'sujet' sans valeur par défaut? Cela signifie que vous pouvez utiliser le shortcode comme ceci, si vous voulez définir un sujet par défaut: [contact sujet = "demande d'emploi"]

le `revenir` du Shortcode

Ce dernier bit est assez simple: affichez le message de réussite si l’e-mail est envoyé, ou le formulaire de messagerie et le message d’erreur (s’il en existe un). Voici le code:

 if ($ envoyé == vrai) return $ info;  else return $ info. $ email_form;

Nous ne montrerons plus le formulaire si l'e-mail est envoyé, mais si vous voulez le montrer quand même, vous pouvez utiliser cette simple ligne à la place:

 retourne $ info. $ email_form;

Le CSS

Bien sûr, le code en lui-même n'aurait pas fière allure. Avec un peu de maquillage, CSS, nous pouvons rendre notre formulaire plus joli. Ajoutez ces lignes de code CSS dans votre style.css fichier de votre thème:

 .étiquette de formulaire de contact, entrée .contact-form, .contact-form textarea display: block; marge: 10px 0;  .contact-form label font-size: plus grand;  Entrée .contact-form padding: 5px;  #cf_message width: 90%; rembourrage: 10px;  #cf_send padding: 5px 10px;

Si vous avez tout fait correctement, vous verrez quelque chose de similaire à l'image ci-dessous:

Félicitations, vous venez de créer votre propre formulaire de contact shortcode!

Conclusion

Ce formulaire de contact simple convient à la plupart des sites Web, mais si vous souhaitez y ajouter d'autres champs, il vous suffit de le modifier et d'ajouter le $ form_data ['name_of_the_new_field'] variables dans le $ email_message variable (et peut-être ajouter le nom du champ à la $ required_fields tableau.

Si vous avez des idées sur la façon d’améliorer ce code ou d’afficher les pages de votre site Web où vous les avez utilisées, veuillez nous faire part de votre commentaire ci-dessous.!

Code