Cómo crear un formulario de contacto en WordPress

¿Necesitas un método de comunicación entre los visitantes de tu web y tú? En este post te vamos a ayudar a crear un formulario de contacto en WordPress y a adaptarlo a tu tipo de negocio.

¿Por qué tener un formulario de contacto en WordPress?

Si hay una página que toda web debe tener aparte de las típicas “Inicio”, “Sobre mí” y “Servicios”, es la de “Contacto”.

Esta página es tan importante como las anteriores porque es aquí donde debes incluir un formulario de contacto para que todos aquellos que visitan tu página web puedan ponerse en contacto contigo.

De no hacer esto, imagina que te has currado una súper página de servicios en la que das rienda suelta a toda tu creatividad para presentar tus servicios o productos pero luego, no tienes un medio para que quien te visite se comunique contigo.

Sería trabajo perdido.

Sabemos que puede parecer algo increíble, pero es algo que hemos visto más de una vez.

Por eso, queremos que sepas que un formulario de contacto bien implementado puede suponer una mayor posibilidad de convertir visitas en clientes.

Añadir un formulario de contacto con Contact Form 7

A estas alturas del partido ya sabrás que una de las razones por las que recomendamos WordPress para la creación de página webs es por la infinidad de plugins que puedes instalar en tu página.

Pues bien, eso es precisamente lo que vamos a hacer para añadir un formulario de contacto.

Instalar uno de los plugins imprescindibles para WordPress: Contact Form 7.

Existen muchos plugins para crear formularios pero creemos que este es el mejor plugin gratuito para crear formularios de contacto.

Una vez que haya instalado este plugin, en el panel de administración de WordPress te va a aparecer un nuevo campo con el nombre “Contacto”.

Pues bien, si haces clic en “Añadir nuevo”, te aparecerá una ventana en donde hay que definir un nombre al formulario de contacto así como todos los campos que va a tener.

A continuación te vamos a explicar cómo añadir los principales campos de cualquier formulario de contacto así como los más avanzados y que te ayudarán a tener más y mejor información de quién rellene el formulario.

Campos de un formulario de contacto en WordPress

Una vez que has hecho clic en “Añadir nuevo”, deberías tener una imagen como la siguiente.

1. El primer paso es el más fácil de todo: darle un nombre.

Añade el título que quieras y guarda los cambios.

2. El segundo no es obligatorio, pero queremos decirte cuál es por si quieres hacerlo. Este paso es cambiar el nombre de las etiquetas a español.

Además, también puedes cambiar los mensajes de:

• “Tu nombre (requerido)” por “Nombre (requerido)”
• “Tu correo electrónico (requerido)” por “Email (requerido)”
• “Tu mensaje” por “Mensaje

Si has hecho esos cambios, ahora tu formulario debería tener esta pinta:

Sabemos que es algo innecesario, pero que todo esté en español menos las etiquetas y tanto “Tu” nos resulta raro.

Pues bien, una vez que has guardado los cambios, ya puedes utilizar el formulario de contacto en alguna página de tu web.

Para ello debes crear una página con WordPress y pegar el shortcode que está debajo del título de tu formulario.

Eso sí, dependiendo de tu plantilla que estés utilizando tendrá algunas variaciones, pero en definitiva vas a ver algo como esto:

Este formulario es el típico que suelen usar muchas empresas y que si crees que para ti es suficiente entonces te recomendamos que vayas a la última parte del post.

De no ser así y quieres personalizar tu formulario de contacto, sigue leyendo porque ahora empieza lo bueno 😉

Campos personalizados en un formulario de contacto

Si te has fijado en las imágenes donde hemos cambiado las etiquetas de inglés a español, además de las etiquetas que parecen en corchetes, hay un texto antes y después de las mismas:

Pues bien, casi todas las etiquetas de los campos tienen que tener:

• El texto <label> al prinicipio y </label> al final de la etiqueta del campo.
• El título que se va a ver en el formulario de contacto y que se escribe después de <label>

Ahora que ya sabes lo que tienes que escribir antes y después de la etiqueta de cada campo personalizado, es momento de que sepas cómo añadirlos.

Desplegable

Este campo va más enfocado a aquellas personas que ofrecen más de un servicio en su página web.

Es decir, va más enfocado a aquellas personas freelance o empresas que incluyen más de un área dentro de su cartera de servicio.

• Ejemplo: una persona que ofrezca servicios de “Diseño gráfico”, “Diseño web”, “SEO”, etc.

Es posible que estés pensando, ¿para qué tener un menú desplegable cuando el cliente lo puede rellenar en “Asunto”?

Razón no te falta, pero recuerda que tu página web debe dar la mejor experiencia de usuario a quien la visita.

Por tanto, en casos como estos creemos que es mucho mejor tener un desplegable para que la persona elija una opción en vez de que tenga que escribirla en el campo “Asunto”.

Si crees que este campo es para ti, entonces haz los siguientes pasos y podrás implementarlo en tu formulario de contacto.

1. Haz clic en el campo “Menú desplegable” y te aparecerá la siguiente ventana:

Ya sabes que te recomendamos escribir la etiqueta en español así que aquí tenemos poco más que decirte.

En cuanto a las opciones que quieres que tenga el menú, debes escribir cada una de ellas en cada línea, tal y como lo puedes ver en la imagen.

Dependiendo del tipo de información que quieras conseguir con tu formulario de contacto, marca la casilla “Permitir selecciones múltiples” si lo crees conveniente.

Además, te recomendamos que marques la casilla “Insertar un elemento en blanco como primera opción”. Esto servirá para que no elija por defecto la primera opción, sino que sea el usuario quien elija la que más quiere.

Una vez hecho esas configuraciones, haz clic en “Insertar” para que añada la nueva etiqueta en tu formulario de contacto.

Si todo ha ido bien, tu formulario de contacto debería tener un menú desplegable como el de la esta imagen:

Archivo

Este campo permite que quien te esté enviando el formulario también te pueda adjuntar algún archivo como una imagen o PDF.

Sabemos que es un campo que a muchas empresas no les resultará útil, pero creemos que es un campo interesante al que se le puede sacar cierto partido.

• Ejemplo: una empresa de recursos humanos/contratación de personal y que necesite que les envíes tu CV.

Para añadir este campo tienes que hacer los siguientes pasos:

1. Haz clic en el campo “Archivo” para que te salga esta ventana.

2. Define un límite de bytes para el archivo que se vaya a adjuntar
3. Establece los formatos en que pueden subir el archivo y sepáralos con “,”.

Una vez hecho esto, es momento de “Insertar” la etiqueta y verificar que en tu formulario de contacto aparezca la opción de adjuntar un archivo como en esta imagen:

Botones de Selección

Este campo tiene un objetivo similar al de menú desplegable, pero con otro aspecto.

Te puede servir si ya has usado el campo “Menú desplegable” y quieres dar un poco más de dinamismo a tu formulario de contacto.

• Ejemplo: ofreces un servicio con diferentes niveles y quieres que el usuario elija qué nivel quiere.

Para agregarlo, lo que tienes que hacer es:

1. Hacer clic en el campo “Botones de selección” para que te aparezca la siguiente ventana:

2. Escribir cada opción en diferentes líneas y hacer clic en “Insertar”

Ahora ve a mirar si en tu formulario aparecen unas casillas de selección como en esta imagen:

Casilla Política de Privacidad

Si hay algo que a todos los que nos dedicamos al Marketing Digital nos tuvo locos el año pasado, esa es la famosa RGPD.

La RGPD es una ley que entró en vigor el año pasado en la que obliga a todas las páginas web a informar a los usuarios para qué se iban a usar los datos que se solicitaban en los formularios de contacto así como el responsable de los mismos.

Para ello, en los formularios de contacto debe haber una casilla en la que se enlace a la página que contenía todas las “Políticas de privacidad”, además de una pequeña información sobre quién iba a ser el propietario de los datos.

Por tanto, para que tu formulario de contacto de WordPress cumpla con la RGPD, debe tener esta casilla de aceptación de las políticas de privacidad.

Para ello, te explicamos cómo añadirlo con estos pasos:

1. Hacer clic en el campo “Aceptación”

2. Definir un nombre a la etiqueta y hacer clic en “Insertar”

Ahora en tu formulario de contacto debe estar la etiqueta [acceptance politica]

3. Añade “acceptance_as_validation: on” en medio de la etiqueta. Ahora, la etiqueta tiene que quedar así:

• [acceptance acceptance_as_validation: on politica]

4. Después del corchete de cierre “]” agrega un espacio y después pega esto:

• Acepto la <a href=»#» target=»_blank»>Política de Privacidad</a>

Con este fragmento vas a añadir un enlace a tu página de “Política de Privacidad” y para ello tienes que reemplazar la “#” por la URL de la página donde estén tus políticas.

No elimines las comillas. Solo remplaza la “#”.

Finalmente, tu etiqueta debe ser así:

• [acceptance acceptance_as_validation: on politica] Acepto la <a href=»URL» target=»_blank»>Política de Privacidad</a> [/acceptance]

Haciendo todos estos cambios, tu formulario de contacto debería aparecer una casilla como la de esta imagen:

1º capa de información de la RGP

Aparte de la casilla de aceptación de tu Política de privacidad, la RGPD obliga a mostrar una 1º capa de información en todos los formularios de contacto.

Para ello, también tienes que añadir el siguiente párrafo para que puedas implementarlo y adaptarlo a tu página web:

• <p style=»font-size: 15px;»><strong>Responsable: </strong>…</span><br/><strong>Finalidad: </strong>contestar el mensaje que me envíes con este formulario<br /><strong>Legitimación: </strong>tu consentimiento<br /><strong>Destinatarios: </strong>tus datos se guardarán en …, mi proveedor de hosting, que también cumple con la RGPD<br /><strong>Derechos: </strong>tienes derecho a, entre otros, a acceder, rectificar, limitar y suprimir tus datos</p>

Tienes que pegar este texto al final de tu formulario de contacto, de manera que quede así:

Una vez copiado este párrafo, tu formulario debe tener los mismos textos que en esta imagen:

Ahora bien, en esta imagen hay puntos suspensivos que hay que reemplazar por la siguiente información:

• “Responsable”: tienes que escribir el nombre de la persona que será quien tenga todos los datos.
• “Destinatarios”: tienes que escribir el nombre de tu empresa de hosting que tienes contratada.

Para ello tienes que volver al párrafo que has pegado en el formulario de contacto y cambiar los puntos suspensivos por la información que corresponda.

Con esto ya te hemos explicado los campos más usados en un formulario de contacto.

Recuerda que estos campos son los que te llegarán a tu correo, así que cuanta más información tengas de ese posible cliente, mejor.

Ahora es momento de ir a la pestaña “Correo electrónico” donde también tenemos que hacer algunas configuraciones.

Si has ido probando los diferentes campos, tu formulario de contacto debería estar así:

Y si todo ha ido bien, tu formulario debería lucir así:

Correo electrónico

Hasta ahora ya sabes cómo crear un formulario de contacto en WordPress y qué campos puedes agregar al tuyo, sin embargo, esto no es todo el trabajo que hay detrás de la creación de un formulario.

En esta parte del plugin es donde tienes que configurar datos como:

• El correo va a llegar el formulario
• El asunto del correo
• El nombre de quien envía el formulario
• El contenido del mensaje

Esta configuración es muy importante porque si no se configura correctamente podrías no recibir la información que has solicitado con todos los campos de tu formulario y, en el peor de los casos, ni siquiera recibir los correos.

Vamos a dividir esta sección en diferentes partes para no liarnos demasiado.

Empezamos con la primera.

Aquí es muy probable que te venga información por defecto (la cual es válida), pero te recomendamos que la dejes como nosotros te recomendamos:

• Para: es el correo al que van a llegar los formularios. Tiene que ser un correo de tu dominio así que elige el que mejor te convenga. Los más comunes son “info@com” u “hola@tudominio.com”
• De: el nombre de quien envía el formulario. Para ello te recomendamos que pegues la etiqueta “[nombre]”. Además, vas a ver que al final hay un <wordpress@tudominio.com>, así que te recomendamos que lo dejes tal cual. De esta manera, este campo quedar así “[nombre] <wordpress@tudominio.com>”.
• Asunto: es el nombre del asunto con el que te van a llegar los formularios a tu bandeja. Si quieres que el “Asunto” tenga el mismo nombre que el que ha escrito el usuario al momento de rellenar el formulario, tienes que pegar la etiqueta [asunto].

Otra opción es poner un texto genérico que será el “Asunto” en todos los mensajes que lleguen a tu bandeja. En ese caso, una buena opción sería algo como “Contacto desde la web”.

• Cabecera adicionales: por defecto viene “Reply-To: [your-email]”. Si has cambiado la etiqueta a español, tienes que cambiarlo por “Reply-To:[la-etiqueta-en-español]. En nuestro caso sería “Reply-To: [email]”.

Cuerpo el mensaje

En el cuerpo de mensaje es donde vamos a estructurar cómo va a llegar toda la información que se han pedido en los campos del formulario de contacto. Para ello tienes que añadir las etiquetas de los campos de tu formulario de contacto.

Sabemos que por defecto este campo suele venir con contenido, pero eso es algo que tienes que cambiar.

En primer lugar porque si cambiaste las etiquetas que venían por defecto a español, estas no se han modificado en este parte y seguro que aún aparecen las que estaban en inglés. Por ello, te recomendamos eliminar el contenido de esa parte y dejarla algo parecido a esto:

Como ves, se han usado todas las etiquetas que se han creado en el formulario de contacto.

Si tu formulario tienes más campos, recuerda agregar sus etiquetas en esta parte porque si no los pones, esa información no aparecerá en el correo que te llegue a tu bandeja.

¡OJO! La última parte de “Este mensaje se ha enviado…” también formará parte del correo así que si quieres puedes eliminarlo. Sin embargo, si lo dejas como está, cambia los últimos puntos suspensivos por la URL de tu página web (viene así por defecto).

Mensajes

En este parte del formulario es donde se definen los mensajes que van a aparecer cuando ocurra algo en tu formulario de contacto. Por ejemplo:

• Cuando se ha enviado el mensaje correctamente
• Si hay algún error en el envío
• Cuando no se ha completado algún campo obligatorio

Siéntete libre de cambiar estos mensajes adaptándolo a tu marca y su tono de comunicación.

Ajustes adicionales

Este es un campo que por defecto viene en blanco y que vamos a dejar que así permanezca.

Conclusión

Ahora ya estás preparado para crear tu formulario de contacto y personalizarlo cuanto quieras. Te esperamos en los comentarios para que nos cuentes cómo piensas emplear cada uno de los campos en tu página web o decirnos si pensabas que un formulario de contacto tuviese tal poder de personalización.

¡Hasta el siguiente artículo!

[wpbc_stamp]