¿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í:
A continuación iremos a Plugins > añadir nuevo
Nos aparecerá esta ventana:
Vamos a escribir donde os pongo en amarillo Contact form
Y aparecerá el siguiente plugin para poder instalar:
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» :
Os aparecerá la siguiente ventana de formulario 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.
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
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
Como en la imagen de Arriba daremos a Aceptación ( os lo he puesto en amarillo )
Nos aparecerá la siguiente ventana:
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
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
A la izquierda pulsaremos sobre el boton My reCAPTCHA
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:
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
Pulsa sobre reCaptcha e insertar luego pulsa sobre Guardar.
Ahora vamos a ver como ha quedado el formulario:
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:
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:
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:
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:
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!!
[kkstarratings]
