Configurar «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.

captura-de-pantalla-2019-02-17-a-las-20-05-4614439-42-6093433-1182500

➤ 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».

captura-de-pantalla-2019-02-17-a-las-22-25-3052931-35-8986662-6530168

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

captura-de-pantalla-2019-02-17-a-las-20-55-9690576-54-6440824-2883319

➤ 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

captura-de-pantalla-2019-02-17-a-las-21-02-4066161-12-7735946-1200x701-1609005

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.

captura-de-pantalla-2019-02-17-a-las-21-47-1187075-10-9526502-3762013

➤ 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-electrc3b3nico-contact-form-2821427-8447200-7831025

➤ 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

captura-de-pantalla-2019-02-17-a-las-21-44-5686284-01-7390428-2929784

➤ 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.

captura-de-pantalla-2019-02-17-a-las-22-05-1758352-41-9546658-4566751

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.

telc3a9fono-en-contact-form-7357286-6250535-4342932

 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».

insertar-telc3a9fono-en-contact-form-1-5003987-4570908-5810058

 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.

botc3b3n-seleccic3b3n-contact-form-5145582-6463639-3467023

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

captura-de-pantalla-2019-02-18-a-las-1-23-7830963-32-4629191-3035989

➤ 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. 

captura-de-pantalla-2019-02-18-a-las-1-22-6250754-17-5945870-3041559

➤ 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:

captura-de-pantalla-2019-02-18-a-las-2-45-4837234-39-5620403-6774951

Deja un comentario