formulario-wordpress

Formulario de contacto wordpress 2018

¿Qué pasa weberos? Os voy a explicar como crear un formulario de contacto wordpress para que tus visitas dejen su huella en tu pagina web.

¿Qué voy a necesitar?

1-Paciencia y algo de lectura no te llevara más de 5 minutos configurar tu formulario de contacto wordpress

2-Una página web en wordpress

3-Saber acceder al escritorio de wordpress

4-sabes como llegar a los plugins

5-olvídate del resto que te lo cuento ahora mismo.

Ve a tu escritorio o backoffice de WordPress

Es esta pantalla de aquí:

formulario de contacto wordpress 2018

A continuación iremos a Plugins > añadir nuevo

añadir nuevo plugin wordpress

Nos aparecerá esta ventana:

instalar plugins wordpress

Vamos a escribir donde os pongo en amarillo Contact form

Y aparecerá el siguiente plugin para poder instalar:

crear formulario wordpress

Pulsamos sobre “instalar ahora” irá instalando y a continuación nos aparecerá “activar” pues le damos.

A continuación nos llevara a la pagina de plugins de nuestro sitio wordpress, tendremos que darle a “ajustes” :

crear formulario wordpress con contactform

Os aparecerá la siguiente ventana de formulario para wordpress

formulario por contactform para wordpress

Nos vendrá dividido en 4 partes:

1-El título, este es el nombre que le daremos al formulario para poder identificarlo más adelante.

2-Código Abreviado, este código tendremos que copiar y pegar en la zona donde queramos que nos aparezca el formulario.

3-Autor, ¿quién ha creado este formulario?

4-Fecha, ¿cuando se ha creado este formulario?

Si nos ponemos con el ratón encima de Contacto form 1 veremos editar y duplicar, vamos a darle a editar.

formulario de contacto wordpress

Veremos esta ventanita tan maja, es la que nos permite personalizar nuestro formulario de contacto wordpress

Vamos a fijarnos en la ventana del formulario

veremos que pone

<label> Tu nombre (requerido)
[text* your-name] </label>

Este código HTML es el que nos presentara en la parte delante del sitio web de wordpress. Voy a ver como se vería para comparar:

Así se vería en la parte delantera

formulario wordpress

 

Bien visto esto y conociendo esta lógica, solamente voy a añadir 2 detalles vitales la aceptación de términos para cumplís el RGPD  y un Captcha para evitar que me manden mails de SPAM.

Añadir Check de aceptación de términos.

En la misma ventana de formulario de wordpress nos ubicaremos debajo de Tu Mensaje y por encima de Enviar

crear formulario wordpress

Como en la imagen de Arriba daremos a Aceptación ( os lo he puesto en amarillo )

Nos aparecerá la siguiente ventana:

formulario wordpress

Donde pone condición vamos a poner “He leído y acepto las condiciones y aviso legal” sin las comillas. Y daremos a Insertar acto seguido a Guardar.

Con esto quedaría así nuestro formulario de wordpress

check en formulario de wordpress

Ahora si! así si! no nos pueden venir a clavar una multaza por no cumplir el RGPD ñañañaña

Bueno vamos a crear el segundo paso que será el reCaptcha de Google. Este paso es más tedioso:

Iremos a Contacto > Integracion

En Integración veremos lo siguiente:

Vamos a pinchar en el enlace del CAPTCHA

google recaptcha

A la izquierda pulsaremos sobre el boton My reCAPTCHA

captcha para integrar wordpress

Verás esto de aquí donde pone Etiqueta escribiremos el nombre de nuestra pagina web. Pulsaremos sobre reCAPTCHA v2 y nos aparecerá la siguiente ventana:

demo registrar dominio para captcha

aquí escribe la pagina web sin http ni https ni // solo el dominio. Pulsa sobre Acept the reCAPTCHA Terms of Service. Y damos a Registrer.

Aquí te vendrá lo que venimos buscando

Clave del sitio y Clave secreta

No cierres esta ventana y vuelve a tu wordpress > contacto > Integracion

Pulsa sobre Configurar y te pedirá las claves pon cada una en el lugar que le corresponde, dale a guardar.

Vuelve al formulario de contacto 1

recapcha forms 7
Pulsa sobre reCaptcha e insertar luego pulsa sobre Guardar.

Ahora vamos a ver como ha quedado el formulario:

recaptcha para el cliente wordpress
Al trabajar wordpress en modo local no me aparece pero si trabajais el sitio web de wordpress instalado en el dominio os aparecerá correctamente.

Bien una vez realizado estos pasos vamos a configurar el correo electrónico:

Dentro de formulario de contacto 1


Veremos la siguiente ventana:

correo en forms de wordpress
En Para pondremos el email que tengamos como principal en el sitio web

En De lo dejaremos como venga predeterminado

En el Asunto pondremos con lo que nos llegara el Email por ejemplo Mensaje desde mi pagina web

Cabeceras adicionales por si quisieras que llegara a 2 mails diferentes.

Cuerpo del mensaje Va a coger los datos de la primera configuración del formulario os dejo la lógica en la siguiente imagen:

como llegan los mails en wordpress

Si queremos saber si han aceptado las condiciones debajo de YOUR MESSAGE Dariamos un par de intros y pegariamos el codigo corto que viene arriba como os pongo en la imagen:

aceptacion terminos wordpress

Esta lógica se puede utilizar para todos los campos que insertéis en la personalización del formulario.

Ahora solo queda añadir el formulario donde queramos que se vea, para ello voy a crear una pagina dentro de wordpress que se llame “contacto”

Una vez la tenga creada voy a ir a contacto > formularios de contacto y vere el Codigo Abreviado copia todo ese enlace con los [ ] incluidos

y lo pegamos en la pagina que hemos creado:

pegar codigo abreviado

Y publica la pagina o guarda.

Comprueba como se ve y Voila! ya tendrías tu formulario de contacto wordpress listo.

¿Que tal ha sido la experiencia? aunque parezca mucho trajín al final es fácil de configurar.

¿Te ha quedado alguna duda o quieres avanzar mas con tu formulario de contacto wordpress? Escríbenos que seguro que te ayudamos.

Un saludito!!

Formulario de contacto wordpress 2018
5 (100%) 1 voto
  • Tiempo de lectura :
  • Nivel :
Categorias
Categorías del blog
¿Te puedo ayudar?




Comentarios

Solo di lo que piensas

Comentario

error: Content is protected !!