El post vamos a ver cómo crear un formulario de contacto para WordPress que además se adapte a todos los dispositivos para una correcta visualización mediante su diseño responsive y que lo podamos insertar en cualquiera plantilla de WordPress..
En la mayoría de sitios web precisamos de un formulario, ¿no te parece?.
Nuestro objetivo es que cualquier visitante pueda contactar con nosotros fácilmente.
Sí, podemos indicar un correo al que posteriormente pueda escribirnos y comunicarse con nosotros, pero la mejor manera es hacerle el camino sencillo, además evitaremos que nuestro email sea visible en nuestro website evitando que sea captado para remitirnos correo spam.
Por tanto se hace necesario disponer de un formulario en el que pueda escribirnos en el momento para situarlo en el sitio más adecuado de nuestra plantilla de WordPress.
Para hacer esto usaremos un plugin en WordPress que hace su función a la perfección, es sencillo, totalmente configurable y además es responsive adaptándose a todos los dispositivos, ¿qué más podemos pedirle?.
Estoy hablando de Contact Form 7, un plugin que nos facilita la creación de formularios para WordPress.
Vamos a ver cómo en unos sencillos pasos podemos disponer en nuestra web/blog de un form o de varios, ya que nos permite la creación de múltiples forms.
Bien, para instalarlo podemos buscarlo desde el administrador de plugins de nuestro WordPress o bien descargarlo desde la web del plugin para posteriormente subirlo vía FTP a nuestra carpeta de plugins.
En el primer caso bastará con hacer click a Añadir nuevo, en la sección de plugins de nuestro panel de administración de WordPress y realizar la búsqueda, nos aparecerá y antes de nada es aconsejable hacer click en ‘Detalles' con el fin de comprobar que funcionará adecuadamente en nuestra versión de WordPress.
Realizada la comprobación bastará con Instalar el plugin.
En el segundo caso, de igual forma, deberíamos comprobar que sea compatible con nuestra versión actual de WordPress. Finalmente activarlo.
Una vez activado ya nos aparecerá en la barra de admin el título de Contacto como podemos ver a continuación:
Contenido
Nuestro primer formulario de contacto
Llegado este punto ahora nos disponemos a crear nuestro primer formulario de contacto en nuestro blog de WordPress.
Si vamos a la pestaña de Contacto se nos muestran las opciones de Formularios, donde se muestra la relación de formularios que tenemos creados y en segundo lugar Añadir un nuevo.
Una ventaja de este plugin es que podemos crear tantos formularios como deseemos para diferentes objetivos para mostrarlos en nuestro blog o website.
Podríamos crear uno para el contacto, otro para pedidos, otro de sugerencias, etc. Gracias a la versatilidad de éste plugin podemos hacer cualquier tipo que nos planteemos.
Vamos a añadir uno nuevo y vemos los campos que podemos incluir. El idioma en este caso será el Español.
El primer paso será darle un Nombre, aconsejo que sea diferenciador para identificarlo fácilmente.
Por defecto se nos crear un formulario con los campos Nombre, Email, Asunto y Mensaje, más el botón de Enviar.
¿Cómo muestro el formulario y dónde lo puedo ubicar?
Una de las cosas que más me gusta de este plugin es que los formularios que creamos son adaptativos por lo que se ajustarán a las diferentes ubicaciones donde deseemos ponerlos en nuestra web, ya sea en el sidebar, en el footer, en el contenido, etc.
Para agregar el formulario basta con copiar el shortcode que genera y pegarlo allá donde deseemos mostrarlo. Para que gener el shortcode debemos Guardar los cambios.
En la siguiente imagen vemos cómo se muestra.
¿Qué tipo de campos puedo disponer en mi form?
Existen diferentes campos que podemos emplear para crear nuestro formulario, lo que el plugin llama etiquetas, la relación es la siguiente:
- Campo de texto.
- URL
- Número de teléfono
- Número (casilla)
- Número (control deslizante)
- Fecha
- Área de texto
- Menú desplegable
- Casillas
- Botones de opción
- Aceptación
- Acertijo
- CAPTCHA
- Subida de archivos
- Botón de enviar
Como veis con todas estas etiquetas es posible generar cualquier tipo de form lo que hace al Contact Form 7 uno de los mejores plugins para crear formularios para WordPress ya que además su diseño se adaptará a todos los dispositivos.
¿Qué pasos debo seguir para generar etiquetas?
Para generar una etiqueta debes desplegar el botón con el nombre Generar etiqueta.
Una vez selecciones la correspondiente etiqueta debes configurarla según el tipo.
En todas es posible añadir clases e id por si deseas posteriormente dar estilos mediante CSS.
Una vez generada la etiqueta debes copiar un pequeño shortcode sobre la pantalla en la que se van introduciendo los elementos del formulario y otro shortcode deberás pegarlo en la pantalla del Mensaje, que serán los valores que se remitirán al enviar el form.
En la siguiente imagen puedes ver mayor detalle haciendo clic aquí.
En la imagen anterior puedes observar que también deberás configurar la dirección de email donde deseas recibir los datos que te remitan desde los forms que hayas dispuesto en tu website.
Si deseas más información te recomiendo que visites cómo crear y configurar un sencillo formulario de contacto para WordPress.
Si deseáis ver cómo optimizar la carga de los ficheros CSS y JS que incluye el plugin en vuestro sitio para mejorar el rendimiento podéis leer el post sobre Contact Form 7: Cargar CSS y JS en las páginas que lo precisen.
Además de este plugin para crear formularios de contacto podemos encontrar otros tipos de formularios que pueden adaptarse a nuestro sitio, sólo queda investigar y elegir el que mejor se adapte.
Conclusión
La necesidad de disponer de un formulario para nuestro blog está totalmente cubierta con el Contact Form 7 ya que es versátil, responsive y además lo podemos obtener gratuitamente desde el repositorio de plugins de WordPress.
Verdaderamente resulta interesante, ¿no te lo parece?
Si os ha gustado el artículo estais invitados a compartirlo por los canales sociales. Así mismo si necesitáis ayuda con vuestro formulario seguir leyendo más abajo. 😉
¿Necesitas ayuda para configurar o crear un formulario de contacto?
Si precisas de ayuda para configurar el Contact Form 7 o deseas hacer un formulario más complejo puedo hacerlo por tí, escríbeme aquí y hablamos 🙂
En la siguiente imagen puedes ver cómo podría quedar tu formulario, por ejemplo.