Simplifiez la création de formulaires de contact avec des exigences de base

Que vous démarriez un simple blog, créiez un site Web d'entreprise ou construisiez un portfolio créatif avec WordPress, une page Contactez-nous est (presque) toujours nécessaire, et avoir un formulaire de contact est (presque) toujours mieux Plutôt que de partager votre adresse e-mail publiquement (même si les robots spammeurs les adorent). Bien sûr, il existe des tonnes d’excellents plugins de formulaire de contact pour WordPress, mais pourquoi surcharger le site avec un plugin lourd avec de nombreuses requêtes de base de données alors que nous pouvons utiliser un joli et simple plugin de shortcode personnalisé à la place ?

---

Avantages de créer votre propre formulaire de contact

Les plugins sont géniaux, mais trop d'entre eux ont des fonctionnalités dont vous n'avez pas besoin et peuvent gonfler votre site en utilisant des connexions de base de données, en exécutant du code PHP supplémentaire, en ajoutant des feuilles de style CSS et des fichiers JS à l'en-tête.. ....Donc, à à un moment donné, vous voulez simplement rester à l'écart des plugins existants, quelle que soit la qualité des plugins que vous souhaitez utiliser.

Si vous ne savez pas coder, je dois admettre que vous avez les mains (un peu) liées et que vous devez utiliser un plugin. Cependant, si vous êtes familier avec le développement WordPress à n'importe quel niveau (et je suppose que c'est le cas, puisque vous êtes toujours avec moi), alors vous devriez considérer les avantages de pirater votre propre thème ou d'écrire votre propre plugin. Voici les avantages selon moi :

• Optimisation - Utiliser trop de code, en particulier du code supplémentaire dont vous n'avez pas besoin, dépasse même dans certains cas les limites de votre plan d'hébergement. Mais même si vous disposez de suffisamment de ressources sur votre serveur, l’optimisation est toujours bénéfique pour la santé de votre site.
• Propreté - En plus de la santé de votre serveur, un code propre présente d'énormes avantages pour la vitesse de chargement et d'analyse de votre site Web. En le codant/piratant vous-même, vous n'avez que ce dont vous avez besoin pour profiter de fonctionnalités simples sur votre site sans avoir à charger une tonne de contenu. Vous savez, c'est même bon pour le référencement.
• La joie du contrôle - Vous ne devriez jamais sous-estimer le pouvoir de donner des ordres. Prendre le contrôle de votre site Web fera certainement de vous un concepteur/développeur plus passionné que d’utiliser un tas de code prêt à l’emploi. C'est pourquoi, même si nous avons fourni le code complet pour ceux qui ne le souhaitent pas, je ne pense personnellement pas que vous devriez copier/coller le code ici mais l'écrire vous-même. Même si vous entrez exactement le même code, vous pouvez voir comment fonctionne le plugin et ressentir la joie de prendre le contrôle. Sérieusement.

---

Code

D'accord, assez de bavardages : passons au codage ! Nous n'allons pas traiter ici d'une tonne de code ou de tout type de travail acharné, donc même si vous êtes débutant en PHP et/ou WordPress, vous pouvez comprendre le code en suivant mon guide et en étudiant n'importe quelle partie de il. Code que vous ne reconnaissez pas.

Vous pouvez mettre ce code directement dans le fichier functions.php de votre thème, mais une meilleure façon est de l'utiliser comme plugin. De cette façon, 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 :

<?php
/*
Plugin Name: Simple Contact Form Shortcode
Plugin URI: https://tutsplus.com/authors/Bar%C4%B1%C5%9F%20%C3%9Cnver
Description: A simple contact form for simple needs. Usage: <code>[contact email="your@email.address"]</code>
Version: 1.0
Author: Barış Ünver
Author URI: http://beyn.org/
*/

// This line of comment holds the place of the amazingly simple code we're going to write. So you don't really need to read this.

?>

---

Une petite fonction d'assistance : get_the_ip()

Comme vous pouvez le deviner d'après le nom de la fonction, nous obtenons la véritable adresse IP de l'utilisateur même si l'utilisateur se connecte via un serveur proxy. Bien sûr, ce n’est pas infaillible, mais nous l’utilisons quand même comme information complémentaire pour les utilisateurs.

En gros, nous allons essayer de faire différent $_SERVER 变量：分别为 HTTP_X_FORWARDED_FOR、HTTP_CLIENT_IP 和 REMOTE_ADDR. Le code est le suivant :

function 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"];
	}
}

---

Shortcode

Si vous suivez mes publications sur Wptuts+, vous savez que j'adore l'API Shortcode de WordPress.

Je vais diviser le shortcode en 3 parties pour mieux l'expliquer, mais n'oublions pas d'abord d'activer et de désactiver la fonction shortcode :

function wptuts_contact_form_sc( $atts ) {

	// This line of comment, too, holds the place of the brilliant yet simple shortcode that creates our contact form. And yet you're still wasting your time to read this comment. Bravo.

}
add_shortcode( 'contact', 'wptuts_contact_form_sc' );

Propriétés de notre shortcode

Nous devons définir

certaines propriétés afin de rester flexibles tout en restant léger. En voici dix :

extract( shortcode_atts( array(
	// if you don't provide an e-mail address, the shortcode will pick the e-mail address of the admin:
	"email" => get_bloginfo( 'admin_email' ),
	"subject" => "",
	"label_name" => "Your Name",
	"label_email" => "Your E-mail Address",
	"label_subject" => "Subject",
	"label_message" => "Your Message",
	"label_submit" => "Submit",
	// the error message when at least one of the required fields are empty:
	"error_empty" => "Please fill in all the required fields.",
	// the error message when the e-mail address is not valid:
	"error_noemail" => "Please enter a valid e-mail address.",
	// and the success message when the e-mail is sent:
	"success" => "Thanks for your e-mail! We'll get back to you as soon as we can."
), $atts ) );

N'oubliez pas que nous les appellerons dans le code des variables avec des noms de propriété (par exemple

). $label_submit

Envoyer un e-mail par e-mail

C'est la partie la plus importante de la fonction, je vais donc continuer à expliquer le code dans le code

, avec la ligne commentée :

// if the <form> element is POSTed, run the following code
if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
	$error = false;
	// set the "required fields" to check
	$required_fields = array( "your_name", "email", "message", "subject" );

	// this part fetches everything that has been POSTed, sanitizes them and lets us use them as $form_data['subject']
	foreach ( $_POST as $field => $value ) {
		if ( get_magic_quotes_gpc() ) {
			$value = stripslashes( $value );
		}
		$form_data[$field] = strip_tags( $value );
	}

	// if the required fields are empty, switch $error to TRUE and set the result text to the shortcode attribute named 'error_empty'
	foreach ( $required_fields as $required_field ) {
		$value = trim( $form_data[$required_field] );
		if ( empty( $value ) ) {
			$error = true;
			$result = $error_empty;
		}
	}

	// and if the e-mail is not valid, switch $error to TRUE and set the result text to the shortcode attribute named 'error_noemail'
	if ( ! is_email( $form_data['email'] ) ) {
		$error = true;
		$result = $error_noemail;
	}

	if ( $error == false ) {
		$email_subject = "[" . get_bloginfo( 'name' ) . "] " . $form_data['subject'];
		$email_message = $form_data['message'] . "\n\nIP: " . wptuts_get_the_ip();
		$headers  = "From: " . $form_data['name'] . " <" . $form_data['email'] . ">\n";
		$headers .= "Content-Type: text/plain; charset=UTF-8\n";
		$headers .= "Content-Transfer-Encoding: 8bit\n";
		wp_mail( $email, $email_subject, $email_message, $headers );
		$result = $success;
		$sent = true;
	}
	// but if $error is still FALSE, put together the POSTed variables and send the e-mail!
	if ( $error == false ) {
		// get the website's name and puts it in front of the subject
		$email_subject = "[" . get_bloginfo( 'name' ) . "] " . $form_data['subject'];
		// get the message from the form and add the IP address of the user below it
		$email_message = $form_data['message'] . "\n\nIP: " . wptuts_get_the_ip();
		// set the e-mail headers with the user's name, e-mail address and character encoding
		$headers  = "From: " . $form_data['your_name'] . " <" . $form_data['email'] . ">\n";
		$headers .= "Content-Type: text/plain; charset=UTF-8\n";
		$headers .= "Content-Transfer-Encoding: 8bit\n";
		// send the e-mail with the shortcode attribute named 'email' and the POSTed data
		wp_mail( $email, $email_subject, $email_message, $headers );
		// and set the result text to the shortcode attribute named 'success'
		$result = $success;
		// ...and switch the $sent variable to TRUE
		$sent = true;
	}
}

Formulaire de contact

Cette partie est bien entendu aussi importante que la partie précédente. Après tout, comment le code précédent peut-il envoyer un email sans formulaire de contact ? :)

// if there's no $result text (meaning there's no error or success, meaning the user just opened the page and did nothing) there's no need to show the $info variable
if ( $result != "" ) {
	$info = '<div class="info">' . $result . '</div>';
}
// anyways, let's build the form! (remember that we're using shortcode attributes as variables with their names)
$email_form = '<form class="contact-form" method="post" action="' . get_permalink() . '">
	<div>
		<label for="cf_name">' . $label_name . ':</label>
		<input type="text" name="your_name" id="cf_name" size="50" maxlength="50" value="' . $form_data['your_name'] . '" />
	</div>
	<div>
		<label for="cf_email">' . $label_email . ':</label>
		<input type="text" name="email" id="cf_email" size="50" maxlength="50" value="' . $form_data['email'] . '" />
	</div>
	<div>
		<label for="cf_subject">' . $label_subject . ':</label>
		<input type="text" name="subject" id="cf_subject" size="50" maxlength="50" value="' . $subject . $form_data['subject'] . '" />
	</div>
	<div>
		<label for="cf_message">' . $label_message . ':</label>
		<textarea name="message" id="cf_message" cols="50" rows="15">' . $form_data['message'] . '</textarea>
	</div>
	<div>
		<input type="submit" value="' . $label_submit . '" name="send" id="cf_send" />
	</div>
</form>';

Astuce : Si vous regardez attentivement le code HTML du formulaire de contact, vous verrez peut-être des $subject 变量。还记得没有默认值的简码属性“subject”吗？这意味着如果您想设置默认主题，您可以使用这样的短代码： [contact subject="Job application"] supplémentaires

返回简码的

最后一点非常简单：如果电子邮件已发送，则显示成功消息，或者显示电子邮件表单和错误消息（如果有）。代码如下：

if ( $sent == true ) {
	return $info;
} else {
	return $info . $email_form;
}

如果电子邮件已发送，我们不会再次显示该表单，但如果您仍想显示该表单，可以使用以下简单的行：

return $info . $email_form;

---

CSS

当然，代码本身看起来不太好。通过一些化妆、CSS，我们可以使我们的表单更漂亮。将这些 CSS 代码行添加到主题的 style.css 文件中：

.contact-form label, .contact-form input, .contact-form textarea { display: block; margin: 10px 0; }
.contact-form label { font-size: larger; }
.contact-form input { padding: 5px; }
#cf_message { width: 90%; padding: 10px; }
#cf_send { padding: 5px 10px; }

如果一切正确，您将看到类似于下图的内容：

恭喜，您刚刚构建了自己的联系表单短代码！

---

结论

这个简单的联系表单对于大多数网站来说已经足够了，但是如果您想向其中添加更多字段，您只需编辑表单并将 $form_data['name_of_the_new_field'] 变量添加到 $email_message 中变量（并且可能将字段名称添加到 $required_fields 数组中。

如果您对如何改进此代码或显示您使用该代码的网站页面有任何想法，请在下面与我们分享您的评论！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!