Diferencia entre revisiones de «Configurar un formulario de contacto en WordPress»
Jump to navigation
Jump to search
(Página creada con «<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"></spa...») |
|||
| (No se muestran 21 ediciones intermedias de 2 usuarios) | |||
| Línea 1: | Línea 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_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_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>[[: | + | <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]] | |
| + | <span data-link_translate_it_title="Imposta un modulo di Contact Form 7 su WordPress" data-link_translate_it_url="Imposta un modulo di Contact Form 7 su WordPress"></span>[[:it:Imposta un modulo di Contact Form 7 su WordPress]][[it:Imposta un modulo di Contact Form 7 su WordPress]] | ||
{{#seo: | {{#seo: | ||
| − | |title=Configurar un formulario de | + | |title=Configurar un formulario de contact Form 7 en WordPress |
|titlemode=replace | |titlemode=replace | ||
|keywords=Contact Form 7 | |keywords=Contact Form 7 | ||
|description=Verá en este artículo cómo configurar un formulario de contacto en Wordpress. Uso de los complementos de Contact Form 7 | |description=Verá en este artículo cómo configurar un formulario de contacto en Wordpress. Uso de los complementos de Contact Form 7 | ||
|og:image=https://es-wiki.ikoula.com/resources/assets/logo_ikwiki.png | |og:image=https://es-wiki.ikoula.com/resources/assets/logo_ikwiki.png | ||
| − | + | }} | |
| − | + | ==Introducción== <!--T:1--> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | ==¿Por qué incluir un formulario de contacto en su sitio web?== | |
| − | + | El formulario de contacto es esencial para su sitio web. De hecho, es una forma eficaz de crear un enlace con los usuarios de su sitio web. | |
| + | Al crear un sitio web, no olvide este elemento, debe ser uno de los primeros temas para configurar en su sitio. | ||
| + | |||
| + | ==El formulario de contacto le permite :== | ||
| + | * Contactar con el servicio de atención al cliente | ||
| + | * Recibir clientes potenciales cualificados | ||
| + | * Evitar el spam | ||
| + | |||
| + | <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 /> | |
| + | |||
| + | |||
| + | ==Instalación de Contact Form 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 /> | |
| − | |||
| + | [[Archivo:01 ajoutextension.PNG|center|Recherche des plugins sur wordpress]] | ||
| + | <br /> | ||
| − | + | Busque "Contact Form 7" y haga clic en "Instalar ahora" : | |
| − | + | <br /> | |
| − | |||
| − | |||
| − | + | [[Archivo: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 /> | |
| − | + | [[Archivo:ActivatepluginsWP.png|center|Activer le plugins Wordpress contact]] | |
| − | + | <br /> | |
| − | + | ==Configuración del formulario de Contact Form 7== | |
| − | |||
| − | + | Inicialmente configuraremos el complemento "Contact Form 7" que se utilizará para diseñar el formulario. | |
| + | Para hacer esto, vaya a "Contacto" y haga clic en "Agregar nuevo" | ||
| − | |||
| − | |||
| + | [[Archivo:Addnewformwp.png|center|COnfiguration de contact form]] | ||
| − | |||
| + | Aquí puede definir el formulario que desea : | ||
| − | |||
| + | [[Archivo: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 : | ||
| − | |||
| + | [[Archivo: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 : | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | [[Archivo: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 : | |
| − | + | [[Archivo: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" : | |
| − | + | [[Archivo:06 WPmailSMTP.png|center|Configuration de WP Mail SMTP]] | |
| − | + | Aquí está la configuración para realizar : | |
| − | + | [[Archivo:07 configureWPMailSMTP.png|center|Settings]] | |
| − | + | [[Archivo: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" : | |
| − | + | [[Archivo: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 actual del 16:38 13 nov 2019
es:Configurar un formulario de contacto en WordPress en:Set up a contact form 7 on Wordpress fr:Mettre en place un formulaire de contact sur Wordpress it:Imposta un modulo di Contact Form 7 su WordPress
Introducción
¿Por qué incluir un formulario de contacto en su sitio web?
El formulario de contacto es esencial para su sitio web. De hecho, es una forma eficaz de crear un enlace con los usuarios de su sitio web. Al crear un sitio web, no olvide este elemento, debe ser uno de los primeros temas para configurar en su sitio.
El formulario de contacto le permite :
- Contactar con el servicio de atención al cliente
- Recibir clientes potenciales cualificados
- Evitar el spam
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/
Instalación de Contact Form 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 "Contact Form 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 Contact Form 7
Inicialmente configuraremos el complemento "Contact Form 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 :
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.