Diferencia entre revisiones de «Configurar un formulario de contacto en WordPress»

De ES Ikoula wiki
Jump to navigation Jump to search
Línea 10: Línea 10:
 
      
 
      
 
      
 
      
    ==Introducción== <!--T:1-->
+
==Introducción== <!--T:1-->
 
      
 
      
    <br />
+
<br />
    Verá en este artículo cómo configurar un formulario de contacto en Wordpress.
+
Verá en este artículo cómo configurar un formulario de contacto en Wordpress.
    Utilizaremos los siguientes complementos :  
+
Utilizaremos los siguientes complementos :  
    <br/>
+
<br/>
 +
* Contact Form 7 : https://fr.wordpress.org/plugins/contact-form-7/
 +
* WP Mail SMTP: https://fr.wordpress.org/plugins/wp-mail-smtp/
 
      
 
      
    * Contact Form 7 : https://fr.wordpress.org/plugins/contact-form-7/
+
<br />
    * WP Mail SMTP: https://fr.wordpress.org/plugins/wp-mail-smtp/
 
 
      
 
      
    <br />
+
==Formulario de contacto de instalación 7 WordPress==
 
      
 
      
    ==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 />
 
      
 
      
    <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 />
 
      
 
      
    Vaya a "Complementos" y haga clic en "Agregar nuevo" :  
+
[[File:01 ajoutextension.PNG|center|Recherche des plugins sur wordpress]]
    <br />
+
<br />
 
      
 
      
    [[File:01 ajoutextension.PNG|center|Recherche des plugins sur wordpress]]
+
Busque "Formulario de contacto 7" y haga clic en "Instalar ahora" :  
    <br />
+
<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 />
 
      
 
      
    [[File:02 contactform7.PNG|center|Ajout de l'extension Contact Form 7]]
 
    <br />
 
 
      
 
      
 +
Haga exactamente lo mismo para el complemento "WP Mail SMTP"
 +
<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 />
 
      
 
      
    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 />
 
      
 
      
    [[File:ActivatepluginsWP.PNG|center|Activer le plugins Wordpress contact]]
 
    <br />
 
 
      
 
      
 +
==Configuración del formulario de contacto 7==
 
      
 
      
    ==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"
 
      
 
      
    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]]
 
      
 
      
    [[File:Addnewformwp.PNG|center|COnfiguration de contact form]]
 
 
      
 
      
 
      
 
      
 +
Aquí puede definir el formulario que desea :
 
      
 
      
    Aquí puede definir el formulario que desea :
 
 
      
 
      
 
      
 
      
 +
[[File:Configgform.PNG|Ecriture du formulaire de contact]]
 
      
 
      
    [[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/
 
      
 
      
    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 :
 
      
 
      
    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]]
 
      
 
      
    [[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 :
 
      
 
      
    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]]
 +
 
      
 
      
    [[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>
 
      
 
      
 
      
 
      
    <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 :
 
      
 
      
 
      
 
      
    Este código se colocará en una página de Wordpress que debe crearse o en una página que ya tiene.
+
[[File:Testenvoiemailform.PNG|center|Aperçu du formulaire de contact]]
    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".
 
      
 
      
 
      
 
      
    Se crea el formulario, solo queda configurar el envío de correo a través del complemento "WP Mail SMTP".
 
 
      
 
      
 +
==Configurar WP Mail SMTP==
 
      
 
      
 
      
 
      
    ==Configurar WP Mail SMTP==
 
 
      
 
      
 +
Vaya a "Configuración"> "WP Mail SMTP" :
 
      
 
      
 
      
 
      
    Vaya a "Configuración"> "WP Mail SMTP" :
 
 
      
 
      
 +
[[File:06 WPmailSMTP.PNG|center|Configuration de WP Mail SMTP]]
 
      
 
      
 
      
 
      
    [[File:06 WPmailSMTP.PNG|center|Configuration de WP Mail SMTP]]
 
 
      
 
      
 +
Aquí está la configuración para realizar :
 
      
 
      
 
      
 
      
    Aquí está la configuración para realizar :
 
 
      
 
      
 +
[[File:07 configureWPMailSMTP.PNG|center|Settings]]
 
      
 
      
 
      
 
      
    [[File:07 configureWPMailSMTP.PNG|center|Settings]]
 
 
      
 
      
 +
[[File:08 configureWP2.PNG|center|Settings 2]]
 
      
 
      
 
      
 
      
    [[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
 
      
 
      
 
      
 
      
    * 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" :
 
      
 
      
 
      
 
      
    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]]
 
      
 
      
 
      
 
      
    [[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.
   
 
    Una vez hecho, el envío de correo a través de su formulario debería funcionar sin problemas.
 
 
    
 
    
    ==Seguridad==  
+
==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  
+
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:  
+
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.
+
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.
+
* Vaya al menú Admin Admin> Integración.
    * Busque el panel reCAPTCHA y haga clic en Configurar claves.
+
* 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.
+
* 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.
+
* Finalmente, coloque una etiqueta reCAPTCHA ([recaptcha]) en el contenido de su formulario de contacto.
 
      
 
      
    [[Catégorie: WordPress]]
+
[[Catégorie: WordPress]]
    [[Catégorie: Hébergement mutualisé]]
+
[[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 :


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" :

Recherche des plugins sur wordpress


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.

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