Configurar Contact Form 7

 ¿Cómo crear un formulario de contacto con “Contact Form 7”?

 

¿Para qué nos sirve un formulario de contacto?

La respuesta es obvia: los visitantes de tu sitio pueden necesitar contactar contigo por diversos motivos. Bien sea para solicitar información, resolver una duda  o comunicar cualquier asunto de su interés. 

No tener un formulario de contacto es cerrar una vía de comunicación de enorme importancia para tu web.

 ¿Por qué usar «Contact Form 7»?

“Contact Form 7” es un plugin que nos sirve para crear uno o varios formularios de contacto de forma sencilla y nos permite personalizar los mismos en función de nuestros objetivos. Además es gratuito y cumple eficientemente su función. Por todo ello está considerado el mejor plugin para añadir formularios de contacto.

 

Pasos para configurar Contact Form 7

Desde el escritorio nos vamos a «Plugins» y allí encontraremos «Contact Form 7», que ha debido ser descargado y activado previamente.

Configurar Contact Form 7 ajustes

También simplemente podemos acceder al plugin directamente desde la barra izquierda del escritorio, donde al instalar el plugin, se ha creado automáticamente una sección llamada «Contacto».

Configurar Contact Form 7 añadir nuevo formulario

 Al acceder en «Contact Form 7» vamos a encontrar un formulario base de tal forma:

Configurar Contact Form 7 formulario base

Vamos a clicar en «Duplicar» de esta forma tendremos una copia del formulario que puede resultarnos útil. Este formulario base solicita a los usuarios la siguiente información:

 ● Nombre

 ● Correo electrónico

 ● Asunto

 ● Mensaje

Configurar Contact Form 7  duplicar formulario

Si esos datos te resultan suficientes, puedes dejarlo así. Si quieres simplificarlo aún más, puedes eliminar el «asunto». Para ello simplemente borra estas líneas.

Borrar asunto formulario

Si entras en el apartado «Correo electrónico» comprobarás que el plugin ha incluido ya tu dirección de correo electrónico con la que te inscribiste en WordPress. Si lo deseas puedes cambiar esa dirección de email por otra donde quieras que te remitan los mensajes.

Correo electrónico formulario

Si entras en el apartado «Mensajes» podrás ver una serie de mensajes estandarizados, que se envían a aquellos usuarios que han rellenado el formulario de contacto, para comunicarles o bien que el mensaje se ha enviado con éxito o bien que se ha producido algún tipo de error al introducir los datos

Configurar Contact Form 7 mensajes

Si este formulario te resulta útil tal cual, entonces en la columna de la derecha clica en «Guardar» y automáticamente el plugin generará un «shortcode». Debes copiar este código y pegarlo en el lugar de tu sitio donde quieres que aparezca el formulario de contacto, esto es, en tu página de contacto, por ejemplo.

Shotcode formulario

Así de esta forma tan sencilla, ya tendrías tu formulario de contacto básico para insertarlo en tu web.

Ahora bien, es posible que necesites que tu formulario de contacto incluya otros datos como, por ejemplo, el número de teléfono.

Configurar Contact Form 7 Otros datos

 En el apartado «teléfono» tendremos que marcar la casilla «Campo requerido» si queremos que éste sea un dato obligatorio. Damos un nombre a ese campo. Marcamos además «Use este texto como marcador del campo» y, finalmente, a «Insertar».

Formulario datos requeridos

 También podemos usar una opción muy interesante para recabar información. Por ejemplo, tenemos una web de un hotel y ofrecemos 4 tipos de habitaciones. Podemos añadir unos botones de selección para conocer de antemano cual de ellas quiere reservar el usuario.

Configurar Contact Form 7 Botones Selección

 Simplemente, le damos un nombre y escribimos las diferentes opciones en diferentes líneas. Y no hay que olvidar clicar en «Insertar».

Generador etiquetas formularios

 Después guardamos el formulario, copiamos el código y lo pegamos en el lugar de la web donde queremos que sea visible. Este sería, entonces, el resultado. Simple pero funcional. 

Guardar formulario de contacto

 Después podemos añadir unas líneas de CSS adicional para cambiar el color. 

¿Como podemos hacerlo? Vamos a «Apariencia» → «Personalizar» → «CSS Adicional» y añadimos estas líneas, por ejemplo:

.wpcf7 { background-color: #C0C0C0; color: #000000 ; border: 10px solid #963651 }

Si deseamos otros colores sólo tenemos que cambiar el código de los mismos. Aquí encontrarás una tabla con todos los códigos de colores: Tabla de colores

Este es ahora el resultado:

Añadir CSS a formulario de contacto

Conclusión: Como hemos visto, configurar Contact Form 7 es bastante fácil y realmente resulta la forma más sencilla de incluir un formulario de contacto en tu sitio web.

Para cualquier duda que tengas, envíanos un comentario e intentaremos ayudarte.

 

[themoneytizer id=35358-1]

 

  Webtotal: tu guía web

DISEÑO WEB BÁSICA

➢ Creamos tu página web sencilla de 3 o 4 páginas.

➢ Contratamos por ti el hosting y el dominio.

➢ Incluímos un SEO básico que podrás ir ampliando.

➢ Instalamos los principales plugins para su correcto funcionamiento.

 ➢ Pago por PayPal con garantía de devolución si no quedas satisfecho.

Suscríbete

Sólo te enviaremos la información que solicites