Set up a contact form 7 on Wordpress - Revision history

Aouarab4ab79 at 10:34, 11 September 2019

2019-09-11T10:34:40Z

Aouarab4ab79 at 13:25, 29 August 2019

2019-08-29T13:25:19Z

Aouarab4ab79: Created page with "
2019-08-29T13:20:15Z

Created page with "
[[:es:Configurar un formulario de contacto en WordPress]][[es:Configurar un formulario de contacto en WordPress]]
[[:en:Set up a contact form on Wordpress]][[en:Set up a contact form on Wordpress]]
[[:fr:Mettre en place un formulaire de contact sur Wordpress]][[fr:Mettre en place un formulaire de contact sur Wordpress]]

{{#seo:
|title=Set up a contact form 7 on Wordpress
|titlemode=replace
|keywords=Contact Form 7
|description=You will see in this article how to set up a contact form on Wordpress. Using the Contact Form 7 plugins
|og:image=https://en-wiki.ikoula.com/resources/assets/logo_ikwiki.png
}}

==Introduction== 

 
You will see in this article how to set up a contact form on Wordpress.
We will use the following plugins:
 

* Contact Form 7 : https://wordpress.org/plugins/contact-form-7/
* WP Mail SMTP: https://wordpress.org/plugins/wp-mail-smtp/

 

==Installation contact form 7 Wordpress==

 
Everything will happen through the Wordpress admin page, sign in to your Wordpress admin page.
 

Go to "Plugins" and click on "Add New" :
 

[[File:01 ajoutextension.png|center|Search plugins on wordpress]]
 

Search for "Contact Form 7" and click on "Install Now" :
 

[[File:02 contactform7.png|center|Adding the Contact Form 7 extension]]
 

Do exactly the same thing for the "WP Mail SMTP" plugin
 

Then go to "Plugins" and activate the plugins that we just installed via the "Activate" button:
 

[[File:ActivatepluginsWP.png|center|Enable WordPress plugins contact]]
 

==Configuration Contact Form 7==

We will initially configure the plugin "Contact Form 7" which will be used to layout the form.
To do this, go to "Contact" and click on "Add new"

[[File:Addnewformwp.png|center|COnfiguration contact form]]

Here you can define the form you want:

[[File:Configgform.png|Writing the contact form]]

For more information about the syntax and the different fields available, we invite you to follow this link : https://contactform7.com/editing-form-template/

Here, the part that interests us the most is the tab "Mail", in the field "To" you can define to which email address the email will be sent:

[[File:Configgform2.png|center|Configuration mail]]

Once your form is configured, go all the way down and save via the "Save" button
The interface will then return you a code like this:

[[File:SaveFormWP.png|center|Generation of the shortcode for the contact form]]

<pre> [contact-form-7 id="10" title="My Form"] </pre>

This code will be put on a Wordpress page that must be created or in a page that you already have.
The form will then be displayed:

[[File:Testenvoiemailform.png|center|Overview of the contact form]]

The form is created, it remains only to configure the sending of mail via the plugin "WP Mail SMTP".

==Configuration WP Mail SMTP==

Go to "Settings"> "WP Mail SMTP":

[[File:06 WPmailSMTP.png|center|Configuration WP Mail SMTP]]

Here is the configuration to perform:

[[File:07 configureWPMailSMTP.png|center|Settings]]

[[File:08 configureWP2.png|center|Settings 2]]

* From Email: Enter your email address this one will be used for sending mail '''(this mailbox must exist)'''
* From Name: Indicate by which name will be sent the mail
* Mailer: Choose "Other SMTP"
* SMTP Host: ndicate your mail server so if my domain name is toto.com : mail.toto.com
* Encryption: None
* SMTP Port: 25
* Authentication: ON
* SMTP Username: your email
* SMTP Password: the password of your email address

You then have the possibility to test an email sending via "Email Test":

[[File:Testconfig.png|center|Send email test]]

Once done sending mail via your form should work without problems

==Security==

For reasons of security, it is '' 'highly recommended' '' to set up a "captcha anti-robot" it will allow as the name suggests to avoid robots spamming your form and therefore your mailbox .

For that you have to create a public and secret key with google: https://contactform7.com/recaptcha/ (This requires a Google account however) and follow the procedure:

Copy the key pair into the WordPress admin screen of the site you have saved.

* Go to the menu Admin Contact> Integration.
* Find the reCAPTCHA panel and click Configure Keys.
* Copy the site key and secret key into the fields and save them.
* Finally, place a reCAPTCHA tag ([recaptcha]) in the content of your contact form.

[[Catégorie: WordPress]]
[[Catégorie: Hébergement mutualisé]]

@@ Line 1: / Line 1: @@
 <span data-link_translate_es_title="Configurar un formulario de contacto en WordPress"  data-link_translate_es_url="Configurar un formulario de contacto en WordPress"></span>[[:es:Configurar un formulario de contacto en WordPress]][[es:Configurar un formulario de contacto en WordPress]]
 <span data-link_translate_en_title="Set up a contact form 7 on Wordpress"  data-link_translate_en_url="Set up a contact form 7 on Wordpress"></span>[[:en:Set up a contact form 7 on Wordpress]][[en:Set up a contact form 7 on Wordpress]]
 <span data-link_translate_fr_title="Mettre en place un formulaire de contact sur Wordpress"  data-link_translate_fr_url="Mettre en place un formulaire de contact sur Wordpress"></span>[[:fr:Mettre en place un formulaire de contact sur Wordpress]][[fr:Mettre en place un formulaire de contact sur Wordpress]]
 {{#seo:

@@ Line 1: / Line 1: @@
 <span data-link_translate="he"></span><span data-link_translate="ro"></span><span data-link_translate="ru"></span><span data-link_translate="pl"></span><span data-link_translate="ja"></span><span data-link_translate="ar"></span><span data-link_translate="zh"></span><span data-link_translate="de"></span><span data-link_translate="nl"></span><span data-link_translate="it"></span><span data-link_translate="pt"></span><span data-link_translate="es"></span><span data-link_translate="he"></span><span data-link_translate="ro"></span><span data-link_translate="ru"></span><span data-link_translate="pl"></span><span data-link_translate="ja"></span><span data-link_translate="ar"></span><span data-link_translate="zh"></span><span data-link_translate="de"></span><span data-link_translate="nl"></span><span data-link_translate="it"></span><span data-link_translate="pt"></span><span data-link_translate="es"></span><span data-link_translate="en"></span><span data-link_translate="he"></span><span data-link_translate="ro"></span><span data-link_translate="ru"></span><span data-link_translate="pl"></span><span data-link_translate="ja"></span><span data-link_translate="ar"></span><span data-link_translate="zh"></span><span data-link_translate="de"></span><span data-link_translate="nl"></span><span data-link_translate="it"></span><span data-link_translate="pt"></span><span data-link_translate="es"></span><span data-link_translate="en"></span><span data-link_translate="he"></span><span data-link_translate="ro"></span><span data-link_translate="ru"></span><span data-link_translate="pl"></span><span data-link_translate="ja"></span><span data-link_translate="ar"></span><span data-link_translate="zh"></span><span data-link_translate="de"></span><span data-link_translate="nl"></span><span data-link_translate="it"></span><span data-link_translate="pt"></span><span data-link_translate="es"></span><span data-link_translate="en"></span><span data-link_translate="he"></span><span data-link_translate="ro"></span><span data-link_translate="ru"></span><span data-link_translate="pl"></span><span data-link_translate="ja"></span><span data-link_translate="ar"></span><span data-link_translate="zh"></span><span data-link_translate="de"></span><span data-link_translate="nl"></span><span data-link_translate="it"></span><span data-link_translate="pt"></span><span data-link_translate="es"></span><span data-link_translate="en"></span><span data-link_translate="he"></span><span data-link_translate="ro"></span><span data-link_translate="ru"></span><span data-link_translate="pl"></span><span data-link_translate="ja"></span><span data-link_translate="ar"></span><span data-link_translate="zh"></span><span data-link_translate="de"></span><span data-link_translate="nl"></span><span data-link_translate="it"></span><span data-link_translate="pt"></span><span data-link_translate="es"></span><span data-link_translate="en"></span><span data-link_translate="he"></span><span data-link_translate="he"></span><span data-link_translate="he"></span><span data-link_translate="he"></span><span data-link_translate="he"></span><span data-link_translate="he"></span><span data-link_translate="ro"></span><span data-link_translate="ru"></span><span data-link_translate="pl"></span><span data-link_translate="ja"></span><span data-link_translate="ar"></span><span data-link_translate="zh"></span><span data-link_translate="ro"></span><span data-link_translate="pl"></span><span data-link_translate="de"></span><span data-link_translate="nl"></span><span data-link_translate="it"></span><span data-link_translate="pt"></span><span data-link_translate="es"></span><span data-link_translate="en"></span><!-- Début de l'article. Placez votre texte ci-après et n'hésitez pas à personnaliser les chapitres selon votre besoin -->
 <span data-link_translate_es_title="Configurar un formulario de contacto en WordPress"  data-link_translate_es_url="Configurar un formulario de contacto en WordPress"></span>[[:es:Configurar un formulario de contacto en WordPress]][[es:Configurar un formulario de contacto en WordPress]]
-<span data-link_translate_en_title="Set up a contact form on Wordpress"  data-link_translate_en_url="Set up a contact form on Wordpress"></span>[[:en:Set up a contact form on Wordpress]][[en:Set up a contact form on Wordpress]]
+<span data-link_translate_en_title="Set up a contact form 7 on Wordpress"  data-link_translate_en_url="Set up a contact form 7 on Wordpress"></span>[[:en:Set up a contact form 7 on Wordpress]][[en:Set up a contact form 7 on Wordpress]]
 <span data-link_translate_fr_title="Mettre en place un formulaire de contact sur Wordpress"  data-link_translate_fr_url="Mettre en place un formulaire de contact sur Wordpress"></span>[[:fr:Mettre en place un formulaire de contact sur Wordpress]][[fr:Mettre en place un formulaire de contact sur Wordpress]]
@@ Line 20: / Line 20: @@
 <br/>
-* Contact Form 7 : https://wordpress.org/plugins/contact-form-7/
+* '''Contact Form 7''' : https://wordpress.org/plugins/contact-form-7/
-* WP Mail SMTP: https://wordpress.org/plugins/wp-mail-smtp/
+* '''WP Mail SMTP''' : https://wordpress.org/plugins/wp-mail-smtp/
 <br />