Tutorial Contact Form 7: Un plugin de formularios top

¿Aburrido de los simples formularios de contacto que suelen venir por defecto en WordPress?

Las plantillas normalmente ofrecen formularios básicos con los campos estrictamente necesarios, esto es un problema cuando queremos insertar más opciones; para ello te traigo el Tutorial Contact Form 7, un formulario personalizado para WordPress.

 

A no ser que uses un maquetador como Elementor Page Builder (sí trae formularios de contacto integrados muy personalizables) necesitas Contact Form 7.

Este plugin de formulario gratuito es el más usado por sus posibilidades. Puedes ampliar con sus funciones tantos campos como quieras.

 

Desplegables, casillas de confirmación, campos de direcciones, teléfonos etc se consigue de manera muy sencilla y aunque parezca que no es muy bonito al principio a nivel de diseño, se puede conseguir un formulario muy atractivo personalizándolo como luego veremos.

---

Te interesa leer:

• Cómo crear una web paso a paso
• Manual Elementor: El mejor constructor web en la actualidad
• Mejores page builder para WordPress
• Cómo crear un blog

---

 

¿Cómo instalar el plugin de formulario Contact Form 7 en WordPress?

 

 

Para añadir Contact Form 7 a tu wordpress debes instalar el plugin, para ello tienes que acceder a panel de control plugin-añadir nuevo y buscarlo o subirlo directamente una vez descargado del repositor de wordpress.

Aquí tienes el enlace: Contact Form 7

 

Una vez instalado y activo en el panel de administrador de tu wordpress, se instalará una carpeta llamada contacto con la imagen de un sobre.

Haciendo clic en el, accedemos a las opciones del nuevo formulario de contacto.

 

Haz clic en añadir nuevo

Por defecto ya te ha creado como puedes ver en la imagen, el campo nombre, email, asunto, mensaje y el botón «enviar».

 

 

Asígnale un nombre al formulario, haz clic en guardar y podrás ver como se ha generado un contact form 7 shortcode que tendrás que pegar en el sitio donde quieras que aparezca dicho formulario dentro de tu wordpress.

Para el ejemplo lo he llamado PRUEBAS 1

Este Shortcode podrás insertarlo dentro de cualquier página o entrada de wordpress o dentro de cualquier caja de texto del maquetador que estés usando.

Veamos el ejemplo para una entrada de wordpress:

 

 

El resultado al publicar la entrada es el siguiente:

 

Cómo ves, este es el formulario básico que trae por defecto cualquier wordpress o predefinido por los editores visuales habituales.

Vamos a ver cómo poder añadir tantos campos como queremos a través del contact form 7 tutorial español.

Es normal que dependiendo del nicho que estés trabajando puedas necesitar usar campos numéricos, desplegables, adjuntos etc…, todo esto lo hace contact form 7, vamos a verlo.

 

Con Contact Form 7 podrás crear y personalizar tantos campos como quieras

 

Tutorial Contact Form 7: Guía explicativa

Mediante este Tutorial sobe Contact Form 7  podrás ver paso a paso como crear un formulario personalizado WordPress a tu gusto, a través de él, podrás crear tantos campos como quieras y darle posteriormente un bonito diseño.

Echa un vistazo al video para ver cómo se hace y sigue después el tutorial para ver como personalizarlo todo lo que quieras.

Aunque en el Video puedes ver algunos aspectos simples de personalización, al final del artículo te dejo un manual CSS con ejemplos para que lo crees a tu gusto de una forma mucha más amplia.

 

 

Vamos a ver el Tutorial Contact Form 7 a través de 4 Secciones:

 

 #1.Opción Formulario

Si observas en las opciones de la barra superior que te ofrece el plugin Contact Form,  dentro de la opción que estamos viendo «formulario» hay varias secciones para crear campos:

 

 

Al abrir cada uno de las opciones abrirá unas ventanas que generaran los diferentes campos, vamos a verlo (Recuadro naranja ♠)

〉〉 Texto

 

• Tipo de campo: Si lo marcas, indicas que será obligatorio para el usuario, si no rellenas ese campo, el formulario no podrá enviarse.

• Nombre: Puedes asignar uno para identificarlo o dejarlo como esta.

• Valor predeterminado: Si marcas la casilla inferior y asignas un valor puedes hacer una aclaración por ejemplo para el usuario.

• Akismet: Para usar esta opción tienes que tener instalado el plugin Akismet. Al marcar la casilla «este campo requiere el nombre de autor», aparece un parámetro de autor para validar el formulario, de esta manera puede detectar un posible Spam en el envío.

• Atributo de ID o CSS: Para establecer un estilo CSS al campo mediante un ID o una clase.

 Esto es útil como más abajo verás para personalizar campos, de esta manera asignando un nombre podrá        identificar el elemento para asignarle código CSS.

Para el ejemplo vamos a marcar el campo requerido para que sea obligatorio rellenar, seguidamente haz clic en insertar

 

 

〉〉 Correo electrónico

 

Igual que el campo texto, marca la opción campo requerido y clic en insertar

〉〉 Campo URL

 

Esta opción mostrará si quieres que se rellene una campo donde insertar la url o página web del usuario.

Haremos clic en insertar para que más abajo veamos el resultado

〉〉 Campo Teléfono

Igual que los otros apartados, insertamos el campo

〉〉 Campo Numérico

 

• En tipo de campo aparecen 2 opciones: Selector de valor y selector deslizante. 

Selector de valor para introducir un número o selector deslizante para usar una barra deslizante.

• Rango establece un valor mínimo y otro máximo.  El usuario solo podrá moverse entre ese rango numérico.Acepta números negativos.

Elegimos para el ejemplo selector de valor e insertar

〉〉 Fecha

• Rango: Marca los días mínimos o máximos a tu elección

Por defecto lo dejaremos para el ejemplo como esta.

 

〉〉 Area de Texto

Esta opción crea un campo de area para que escribas un texto con la densidad que quieras

 

〉〉 Campo Menú desplegable

Esta opción es muy útil para ofrecer varias opciones al usuario. De esta manera puede escoger entre varias opciones para simplificar la duda o petición del formulario y el receptor sabrá mejor cual es el asunto

Si marcas el campo “Permitir selecciones múltiples“, el usuarios podrá marcar más de una. Si marcas el campo “Insertar un elemento en blanco como primera opción“, el desplegable aparecerá con la primera opción en blanco.

Para el ejemplo hemos escogido 3 opciones.

 

〉〉 Casilla de verificación

 

Checkbox donde el usuario puede elegir varias casillas.

 

〉〉 Botones de Selección

Esta otra opción de contact form checkbox es para para que sólo elijas una de las opciones en linea

〉〉 Campo de aceptación

Opción de marcado en la que te da la posibilidad de tener que aceptar ciertas condiciones. Es útil para indicar por ejemplo que aceptas las condiciones.

Puedes insertar un enlace por ejemplo de aviso legal o política de privacidad etc, luego lo veremos

Para poder enviar el formulario debe estar marcada. Te ayuda a cumplir con las normas de la LOPD.

Permite dos opciones: Que la casilla aparezca marcada por defecto o bien que funciona a la inversa.

Para el ejemplo crearemos un campo llamado «Acepto»

 

〉〉 Cuestionario

Para solicitar una respuesta a una pregunta.

La configuración es sencilla rellena el campo «preguntas y respuestas» separando la pregunta de la respuesta con una barra vertical ( | ) , esta se consigue usando la combinación de teclas Ctrl + Alt + 1.

Para el ejemplo usaremos la pregunta Capital de España|Madrid

Si el usuario no responde bien a la pregunta, dará error en el envío.

 

Si quieres usar seguridad ReCaptcha en tu formulario, te explico como se hace facilmente

 

〉〉 Rcaptcha

Necesitas darte de alta con una API para poder usar este sistema de seguridad.

Su uso es para verificar si la persona que esta rellenando el formulario es humana o es un robot Spam.

Para ello accede a la Web oficial de Recaptcha.

Haz clic en Get Recaptcha para dar de alta el dominio que quieres usar para este sistema de seguridad.

 

Elige un nombre, marca la opción de captcha visible o invisible. indica el dominio que vas a utilizar y acepta las condiciones.

La herramienta te va a dar dos claves que tendrás que insertar en la opción Integración de Contact Form 7.

 

 

Accede al menú Contact form7-Integración, haz clic en «Configurar claves» y  copia las claves API en los dos apartados habilitados para ello.

 

 

Ahora ya podrás usar esta etiqueta en tu formulario.

 

Simplemente asigna un color y un tamaño y se habrá insertado una nueva linea de código que  al guardar en el formulario mostrará al visualizar la página el siguiente apartado de seguridad:

 

 

Debes marcar la pestaña «no soy un robot» para que acepte enviar el formulario.

 

〉〉 Archivo

Campo que permite subir un archivo para que el usuario pueda adjuntar los archivos que quiera

• Limite de tamaño de archivo: Para marcar el limite de subida

• Formato de archivos aceptados

 

〉〉 Envío

Puedes insertar botones de envío de formulario.

En la sección etiqueta indica que nombre quieres que aparezca en el botón.

 

 

 

 

 

Puedes insertar un enlace en «acepta las condiciones de publicidad» de tal forma que el usuario puede leer toda la información para aceptar (En el video del principio explico como hacerlo en el minuto 16:35) Ese enlace iría a continuación de la etiqueta label del campo casilla de verificación.

 

 

 

Contact Form 7 crea un formulario algo simple, pero tranquilo, se puede personalizar 

 

#2. Opción Correo electrónico

Esta sección es la que tienes que configurar para que los datos que el usuario rellena puedas visualizarlo en tu email cuando lo recibas.

La configuración es muy sencilla.

• Para: indica el  email donde irán los envíos de los formularios. Si quieres que los datos se reciban en varios emails, solo tienes que poner todos las direcciones de correo electrónico separados por comas.

• De: señala de qué formulario viene, en este caso es el de la página joseprobando.es

• Asunto: señala el motivo del escrito que insertará en el campo el usuario.

• Cabeceras adicionales: el email desde el que se envía.

• Cuerpo del mensaje:

Lo que puedes ver en la imagen de abajo es lo que por defecto aparece configurado en Contact form 7 una vez instalado.

Los códigos de los campos nuevos que hemos ido añadiendo, también tendremos que crearlos manualmente para poder visualizar los resultados definidos por el usuario al rellenar los datos del formulario

 

 

Los corchetes de la parte de arriba (cuadro negro ♠ de la imagen) corresponden a los códigos generados en el boletín de formulario creado para el usuario por defecto, estos deben ir como ves para que haya conexión entre lo que el usuario rellena y lo que tu verás en el email de recepción.

Modifica el texto a tu gusto, este texto será el que visualices en tu email.

Cada corchete corresponde a los diferente campos creados.

El resultado tras crear los otros campos (cuadro naranja ♠)  es el siguiente:

 

 

 

#3. Mensajes

La sección mensajes es la tercera ventana de Contact form 7.

Esta apartado simplemente es de carácter informativo para el usuario, puedes configurar los distintos avisos que recibirá el usuario cuando haya enviado el formulario de contacto a tu web, inicandole posibles errores o notificaciones o si hace falta rellenar un campo que ha dejado en blanco por ejemplo.

En cada casilla, puedes modificar el texto y poner lo que quieras

 

#4. Ajustes adicionales

Esta cuarta ventana sirve para redirigir a los usuarios a una página después de enviar el formulario wordpress.

Cuando se ejecuta el envío del formulario aparece un mensaje de agradecimiento y el usuario sigue donde está.

Si quieres que una vez rellene el formulario sea redirigido por algún a otra página específica de «Gracias», puedes hacerlo de la siguiente manera:

En la pestaña Ajustes adicionales debes añadir lo siguiente:

on_sent_ok: «location = ‘http://tupagina.com/’;»

Debes crear una página nueva en la que pondrás un texto de agradecimiento y luego tras guardar copiar la url en lugar de «tupagina.com»

De esta manera un usuario que rellene el formulario será enviado a una página como esta:

 

Vamos a dar un poco de color a Contact Form 7, ¿me sigues?

 

Personalización de formularios de contacto Form 7

Contact Form 7 por defecto es un formulario muy poco atractivo 🙁

No pasa nada, como ya te he comentado en el video del principio, desde el mismo editor de Contact form 7 puedes realizar algunos cambios de diseño sencillo, un maquetador puede darte ciertas posibilidades de cambio e incluso hay plantillas que llevan integrados este formulario en ellas y lo dotan de un diseño más atractivo.

Lo mejor es que uses código CSS como más abajo te indico, es muy sencillo y en unos pocos minutos puedes configurar fácilmente tu formulario a tu gusto.

Si no quieres optar por el código puedes usar un wordpress form plugin como Contact Form 7 Customizer , con el podrás hacer cambio de margenes, tamaños o colores y ver los resultados en tiempo real.

Lo se, es cómodo y rápido pero si prescinde de este plugin consumirás menos recursos en tu wordpress y siempre ganarás algo de velocidad.

Por esto te explico de forma muy rápida y fácil cómo hacerlo a través de Código CSS.

No instales el plugin, prueba con código 🙂

 

Personalización sencilla del formulario de contacto con CSS

Para insertar los códigos que voy a mostrarte a modo ejemplo, puedes acceder a la opción de personalización que lleve tu tema o puedes instalar en tu web el plugin Simple CSS.

Los códigos que vas a insertar no afectarán en nada a tu web, si no te gusta el aspecto(lo vas a ver en tiempo real)que va teniendo sólo tienes que ir modificando o eliminando aquello que no te guste.

 

El funcionamiento es muy sencillo, sólo tienes que identificar inspeccionando el código fuente html del formulario(botón derecho del ratón-inspeccionar)

Para wordpress Contact Form 7 no hace falta que hagas nada, es más sencillo todavía por defecto te indica el nombre Id: wpcf7.

 

Cómo ves en la imagen a la izquierda el donde insertarás los códigos de personalización y a la derecha se reflejarán los cambios que vayan provocando dichas lineas de texto.

Vamos a ver los cambios a través de ejemplos:

〉〉 Color de fondo, color de letra y marco del formulario Contact form 7

Normalmente con cualquier maquetador podrás elegir fondo pero en el caso que no lo uses, puedes colocar el fondo que quieras, te digo como.

• Ejemplo:

.wpcf7 { background-color: #008EC2 ; color: #f1f1f1 ; border: 10px solid #963651 }

El resultado es el siguiente:

 

 

Con estas tres indicaciones de código se ha asignado un color de fondo, un color de letra y los bordes de los formularios.

〉〉 Márgenes del formulario de contacto

Cómo ves en la imagen de arriba, los campos están muy pegados a la izquierda, vamos a solucionarlo.

Puedes asignar margenes a los formularios asignando los valores en px que quieras y hacerlo a tu gusto de la siguiente manera:

.wpcf7-form { margin-left: 25px; margin-right: 25px; margin-top: 25px; }

 

Este es el resultado.

Si quieres asignar un campo del mensaje un poco más pequeño puedes usar un ancho menor, por ejemplo:

.wpcf7-textarea { width: 75%; }

 

 

Pongamos más pequeños los tres primeros campos, para ello usa un código como este asignando los valores que necesites:

.wpcf7 input { width: 50%; }

 

 

〉〉 Color del botón de envío

Una forma sencilla si vuestro tema no da la opción de asignar por defecto otro color al botón es usar el siguiente código.

 

.wpcf7-form-control.wpcf7-submit { background-color: #8dc63f; }

 

El botón hasta ahora era gris por defecto, ahora con el código, es verde:

 

 

〉〉 Estilos (ID de cada campo)

Con esta opción podrás poner el color que quieras a cada campo.

#asignar nombre que quieras { color: #ffffff; border: 2px solid #333333; }

 

Para el ejemplo, hemos puesto el Id Cuestionarioprueba al campo Cuestionario.

El resultado es el siguiente:

#Cuestionarioprueba {

color: #ffffff;

border: 2px solid #333333;

}

Usando estas lineas podrás  insertar el color que quieras en el campo que desees.

Para el ejemplo ha sido el verde.

 

 

〉〉 Botones de verificación en vertical

La opción verificación por defecto muestra las opciones en horizontal.

Con el siguiente código podrás ponerlo en vertical:

 

span.wpcf7-list-item { display: block; }

 

 

 

Como ves usando un poco de código de manera muy fácil puedes personalizar a tu gusto el diseño.

No tiene nada que ver el formulario inicial al conseguido tras personalizar y como has podido ver puedes prescindir de un plugin para hacerlo ya que con CSS se consigue de manera muy sencilla.

Puedes hacer casi lo que quieras, incluso puedes crear boletines de suscripción para tu web y personalizarlo para atraer suscriptores, te explico como.

 

Aprovecha Contact Form 7 para crear boletines de suscripción personalizados

---

Si quieres leer más sobre CSS y aprender a utilizar este tipo de lenguaje como un profesional puedes leer este post:

Guía CSS para principiantes

---

 

Cómo crear boletines de suscripción con Contact Form7

Si el maquetador para wordpress que tienes no tiene la opción de crear boletines de suscripción o no quieres optar por uno de pago, puedes crearlos fácilmente con contact form7.

Ya sabes darle un bonito diseño, por qué no aprovecharlo, sácale el máximo partido a Contact form 7 y usa un plugin.

• Forms 3rd Party Integration te permitirá asociar un formulario de suscripción creado con algunas plataformas como mailrelay. Puedes ver como hacerlo a través de este video.

• Contact form 7 mailchimp extensión : Extensión de Mailchimp para que puedas crear formulariosn e insertarlos con esta plataforma de email marketing

• Mailpoet Contact Form 7 Integration: Para Mailpoet también existe un plugin.

 

Otros plugin de interés compatibles con Contact Form 7

Contact Form7 cuenta con varias extensiones algunos de pago y otros gratuitos, esto es otro punto a favor de este plugin para wordpress

Voy a indicarte dos que son gratis y muy interesantes.

• Contact Form 7 Paypal Addons: Sirve para integrar pagos por Paypal para los formularios.

• Flamingo: Con este plugin podrás tener almacenados todos los mensajes recibidos a través del formulario.

 

Conclusión

Contact Form 7 como has podido ver es un plugin de formulario de contacto muy completo.

Poder insertar casi cualquier tipo de campo unido a las posibilidades de personalización lo hacen muy útil.

¿Te ha gustado el tutorial contact form7?  ¿Conoces más extensiones wordpress para Contact form 7 interesantes? Cuéntamelo en los comentarios.

¡Compártelo y dame tu puntuación!