Diferencia entre revisiones de «Configurar un formulario de contacto en WordPress»
Línea 10: | Línea 10: | ||
− | + | ==Introducción== <!--T:1--> | |
− | + | <br /> | |
− | + | Verá en este artículo cómo configurar un formulario de contacto en Wordpress. | |
− | + | Utilizaremos los siguientes complementos : | |
− | + | <br/> | |
+ | * Contact Form 7 : https://fr.wordpress.org/plugins/contact-form-7/ | ||
+ | * WP Mail SMTP: https://fr.wordpress.org/plugins/wp-mail-smtp/ | ||
− | + | <br /> | |
− | |||
− | + | ==Formulario de contacto de instalación 7 WordPress== | |
− | |||
+ | <br /> | ||
+ | Todo sucederá a través de la página de administración de Wordpress, inicie sesión en su página de administración de Wordpress. | ||
+ | <br /> | ||
− | |||
− | |||
− | |||
+ | Vaya a "Complementos" y haga clic en "Agregar nuevo" : | ||
+ | <br /> | ||
− | + | [[File:01 ajoutextension.PNG|center|Recherche des plugins sur wordpress]] | |
− | + | <br /> | |
− | + | Busque "Formulario de contacto 7" y haga clic en "Instalar ahora" : | |
− | + | <br /> | |
− | |||
− | |||
+ | [[File:02 contactform7.PNG|center|Ajout de l'extension Contact Form 7]] | ||
+ | <br /> | ||
− | |||
− | |||
+ | Haga exactamente lo mismo para el complemento "WP Mail SMTP" | ||
+ | <br /> | ||
− | |||
− | |||
+ | Luego vaya a "Complementos" y active los complementos que acabamos de instalar a través del botón "Activar" : | ||
+ | <br /> | ||
− | |||
− | |||
+ | [[File:ActivatepluginsWP.PNG|center|Activer le plugins Wordpress contact]] | ||
+ | <br /> | ||
− | |||
− | |||
+ | ==Configuración del formulario de contacto 7== | ||
− | |||
+ | Inicialmente configuraremos el complemento "Formulario de contacto 7" que se utilizará para diseñar el formulario. | ||
+ | Para hacer esto, vaya a "Contacto" y haga clic en "Agregar nuevo" | ||
− | |||
− | |||
+ | [[File:Addnewformwp.PNG|center|COnfiguration de contact form]] | ||
− | |||
+ | Aquí puede definir el formulario que desea : | ||
− | |||
+ | [[File:Configgform.PNG|Ecriture du formulaire de contact]] | ||
− | |||
+ | Para obtener más información sobre la sintaxis y los diferentes campos disponibles, lo invitamos a seguir este enlace : https://contactform7.com/editing-form-template/ | ||
− | |||
+ | Aquí, la parte que nos interesa el + es la pestaña "Correo", en el nivel del campo "Para" puede definir a qué dirección de correo electrónico se enviará el correo : | ||
− | |||
+ | [[File:Configgform2.PNG|center|Configuration du mail]] | ||
− | |||
+ | Una vez que haya configurado su formulario, baje y guarde mediante el botón "Guardar" | ||
+ | La interfaz le devolverá un código como este : | ||
− | |||
− | |||
+ | [[File:SaveFormWP.PNG|center|Génération du short code pour le formulaire de contact]] | ||
+ | |||
− | |||
+ | <pre> [contact-form-7 id="10" title="My Form"] </pre> | ||
− | + | Este código se colocará en una página de Wordpress que debe crearse o en una página que ya tiene. | |
+ | Luego se mostrará el formulario : | ||
− | + | [[File:Testenvoiemailform.PNG|center|Aperçu du formulaire de contact]] | |
− | |||
− | |||
+ | Se crea el formulario, solo queda configurar el envío de correo a través del complemento "WP Mail SMTP". | ||
− | |||
+ | ==Configurar WP Mail SMTP== | ||
− | |||
+ | Vaya a "Configuración"> "WP Mail SMTP" : | ||
− | |||
+ | [[File:06 WPmailSMTP.PNG|center|Configuration de WP Mail SMTP]] | ||
− | |||
+ | Aquí está la configuración para realizar : | ||
− | |||
+ | [[File:07 configureWPMailSMTP.PNG|center|Settings]] | ||
− | |||
+ | [[File:08 configureWP2.PNG|center|Settings 2]] | ||
− | |||
+ | * From Email:Indique su dirección de correo electrónico, esta se utilizará para enviar correo '''(este buzón debe existir)''' | ||
+ | * From Name: Indique con qué nombre se enviará el correo | ||
+ | * Mailer: Elija "Otro SMTP" | ||
+ | * SMTP Host: Indique su servidor de correo así que si mi nombre de dominio es toto.com: mail.toto.com | ||
+ | * Encryption: None | ||
+ | * SMTP Port: 25 | ||
+ | * Authentication: ON | ||
+ | * SMTP Username: su dirección de correo electrónico | ||
+ | * SMTP Password: la contraseña de su dirección de correo electrónico | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | Luego tiene la posibilidad de probar un envío de correo electrónico a través de "Prueba de correo electrónico" : | ||
− | |||
+ | [[File:Testconfig.PNG|center|Envoie d'un email test]] | ||
− | |||
− | + | Una vez hecho, el envío de correo a través de su formulario debería funcionar sin problemas. | |
− | |||
− | |||
− | + | ==Seguridad== | |
− | + | Por razones de seguridad, es '''altamente recomendado''' configurar un "captcha anti-robot" que permitirá, como su nombre indica, evitar que los robots envíen spam a su formulario y, por lo tanto, a su buzón | |
− | + | Para esto, debe crear una clave pública secreta con google: https://contactform7.com/recaptcha/ (sin embargo, esto requiere una cuenta de Google) y siga el procedimiento que indica: | |
− | + | Copie el par de claves en la pantalla de administración de WordPress del sitio que ha guardado. | |
− | + | * Vaya al menú Admin Admin> Integración. | |
− | + | * Busque el panel reCAPTCHA y haga clic en Configurar claves. | |
− | + | * Copie la clave del sitio y la clave secreta en los campos y guárdelos. | |
− | + | * Finalmente, coloque una etiqueta reCAPTCHA ([recaptcha]) en el contenido de su formulario de contacto. | |
− | + | [[Catégorie: WordPress]] | |
− | + | [[Catégorie: Hébergement mutualisé]] |
Revisión del 15:41 12 ago 2019
es:Configurar un formulario de contacto en WordPress
Introducción
Verá en este artículo cómo configurar un formulario de contacto en Wordpress.
Utilizaremos los siguientes complementos :
- Contact Form 7 : https://fr.wordpress.org/plugins/contact-form-7/
- WP Mail SMTP: https://fr.wordpress.org/plugins/wp-mail-smtp/
Formulario de contacto de instalación 7 WordPress
Todo sucederá a través de la página de administración de Wordpress, inicie sesión en su página de administración de Wordpress.
Vaya a "Complementos" y haga clic en "Agregar nuevo" :
Busque "Formulario de contacto 7" y haga clic en "Instalar ahora" :
Haga exactamente lo mismo para el complemento "WP Mail SMTP"
Luego vaya a "Complementos" y active los complementos que acabamos de instalar a través del botón "Activar" :
Configuración del formulario de contacto 7
Inicialmente configuraremos el complemento "Formulario de contacto 7" que se utilizará para diseñar el formulario. Para hacer esto, vaya a "Contacto" y haga clic en "Agregar nuevo"
Aquí puede definir el formulario que desea :
Ecriture du formulaire de contact
Para obtener más información sobre la sintaxis y los diferentes campos disponibles, lo invitamos a seguir este enlace : https://contactform7.com/editing-form-template/
Aquí, la parte que nos interesa el + es la pestaña "Correo", en el nivel del campo "Para" puede definir a qué dirección de correo electrónico se enviará el correo :
Una vez que haya configurado su formulario, baje y guarde mediante el botón "Guardar" La interfaz le devolverá un código como este :
[contact-form-7 id="10" title="My Form"]
Este código se colocará en una página de Wordpress que debe crearse o en una página que ya tiene.
Luego se mostrará el formulario :
Se crea el formulario, solo queda configurar el envío de correo a través del complemento "WP Mail SMTP".
Configurar WP Mail SMTP
Vaya a "Configuración"> "WP Mail SMTP" :
Aquí está la configuración para realizar :
- From Email:Indique su dirección de correo electrónico, esta se utilizará para enviar correo (este buzón debe existir)
- From Name: Indique con qué nombre se enviará el correo
- Mailer: Elija "Otro SMTP"
- SMTP Host: Indique su servidor de correo así que si mi nombre de dominio es toto.com: mail.toto.com
- Encryption: None
- SMTP Port: 25
- Authentication: ON
- SMTP Username: su dirección de correo electrónico
- SMTP Password: la contraseña de su dirección de correo electrónico
Luego tiene la posibilidad de probar un envío de correo electrónico a través de "Prueba de correo electrónico" :
Una vez hecho, el envío de correo a través de su formulario debería funcionar sin problemas.
Seguridad
Por razones de seguridad, es altamente recomendado configurar un "captcha anti-robot" que permitirá, como su nombre indica, evitar que los robots envíen spam a su formulario y, por lo tanto, a su buzón
Para esto, debe crear una clave pública secreta con google: https://contactform7.com/recaptcha/ (sin embargo, esto requiere una cuenta de Google) y siga el procedimiento que indica:
Copie el par de claves en la pantalla de administración de WordPress del sitio que ha guardado.
- Vaya al menú Admin Admin> Integración.
- Busque el panel reCAPTCHA y haga clic en Configurar claves.
- Copie la clave del sitio y la clave secreta en los campos y guárdelos.
- Finalmente, coloque una etiqueta reCAPTCHA ([recaptcha]) en el contenido de su formulario de contacto.