Tutorial Contact Form 7: Formulario personalizado para wordpress

tutorial contact form 7 formula personalizado wordpress

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

Las plantillas o editores visuales 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.

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.

 

¿Cómo instalar el formulario personalizado Contact Form 7 para 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”.

 

como instalar el formulario personalizado contact form7

 

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:

como instalar el formulario personalizado contact form 7

 

El resultado al publicar la entrada es el siguiente:

 

como instalar el formulario personalizado contact form 7

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 quierasClick To Tweet

 

 Tutorial Contact Form 7: Formulario personalizado para wordpress

Mediante este contact form 7 tutorial 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:

 

opcion formularo tutorial contact form 7

 

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

Texto

texto opcion formulario tutorial contact form 7

 

  • 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

 

¿Sobre que temática quieres que te hable? Recibe sólo lo que necesitas

Suscríbete y elige un GRUPO para recibir los últimos ARTÌCULOS, TRUCOS o TIPS de SEO, Marketing Digital, Diseño...

Tu elijes

 

Correo electrónico

correo electronico opcion formulario tutorial contact form 7

 

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

Campo URL

url opcion formulario tutorial contact form 7

 

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

campo telefono opcion formulario tutorial contact form 7

Igual que los otros apartados, insertamos el campo

Campo Numérico

campo numerico opcion formulario tutorial contact form 7

 

  • 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

fecha opcion formulario tutorial contact form 7

  • 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

area de texto opcion formulario tutorial contact form 7

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

 

Seguro que necesitas insertar un campo con opciones. Este formulario de contacto lo haceClick To Tweet

 

Campo Menú desplegable

menu desplegable formulario tutorial contact form 7

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

casilla de verificacion contact form

 

Checkbox donde el usuario puede elegir varias casillas.

 

Botones de Selección

botones seleccion form 7

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

aceptacion opcion formulario tutorial contact form 7

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

cuestionario contact form

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 facilmenteClick To Tweet

 

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.

recaptcha opcion formulario

 

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.

 

claves contact form

 

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.

 

apariencia captcha form 7

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:

 

captcha formulario

 

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

 

 

Archivo

archivo formulario wordpress

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

 

Envio

envio formulario contact form 7

Puedes insertar botones de envío de formulario.

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

 

Resultado del Formulario tras insertar códigos

resultado formulario tras insertar codigos

 

Para que aparezca un título has de poner la etiqueta <label> delante de cada corchete con el mensaje que quieras de cada campo y cerrarlo al final con </label>

 

Resultado del formulario tras insertar la etiqueta Label

El resultado del formulario tras insertar la etiqueta label será de la siguiente manera:

resultado formulario etiqueta label

 

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.

 

Resultado final del Formulario wordpress Contact Form 7

Este sería el resultado al visualizar en wordpress la creación del formulario creado con Contact Form7 para la web del ejemplo.

resultado final del Formulario wordpress Contact Form 7

Cómo ves ha generado muchos campos que en muchas ocasiones necesitarás para atender las necesidades del usuario.

Podrás pensar que es un poco simple, lo es, pero tranquilo que un poco más abajo te diré como personalizarlos añadiendo margenes y colores.

 

Contact Form 7 crea un formulario algo simple, pero tranquilo, se puede personalizar 😉Click To Tweet

#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

 

opcion correo electronico

 

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:

opcion correo electronico

 

Prueba de recepción del Formulario Contact form 7

Al hacer una prueba para ver si funciona correctamente el formulario de contacto form 7 y ver si se reciben todos los datos correctamente, puedes ver el email que recibí de muestra:

prueba de recepcion del formulario contact form 7

De esta manera podemos ver de forma detallada que quiere el cliente y la información que nos llegue de la manera más ordenada posible.

 #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

mensajes form 7

 

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

ajustes adicionales

 

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

 

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 🙂

 

¿Te está pareciendo interesante el contenido? ¡Compártelo en las redes sociales! 

 

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.

 

Personalización sencilla del formulario de contacto con CSS
Personalizador CSS instalados en las plantillas

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:

 

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

 

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; }

 

personalizacion de margenes del formulario de contacto

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%; }

 

personalizar margenes del formulacio

 

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%; }

 

cambios formulario de contacto 7

 

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:

 

personalizacion del color de boton de envio de formulario

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.

estilos id

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.

 

personalizcion de estilos del formulario

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; }

 

personalizacion verticalm de botones del formulario

 

 

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 personalizadosClick To Tweet

 

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.

 

 

Otros plugin de interes 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.

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

Tutorial Contact Form 7: Formulario personalizado para wordpress
4.2 (84%) 5 votes

José M. Peña

Diseñador web especializado en WordPress y consultor SEO. Trabajo como freenlance realizando sitios web para clientes que desean hacer crecer su negocio a través de internet. Además, enseño en mi Blog cómo crear un proyecto web absolutamente de cero. Me puedes encontrar en las redes sociales.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle PlusYouTube

12 comentarios en “Tutorial Contact Form 7: Formulario personalizado para wordpress

  1. Una pasada de tutorial! Muy completo, desde luego 🙂
    CF7 es un plugin muy completo, algunas opciones como la configuración de la página de destino OK debería venir de serie como un parámetro configurable, pero aun así está muy bien.
    Me guardo este post como chuleta para cuando haga falta, hay soluciones muy interesantes.
    Buen trabajo.

    • Hola Javier.

      Creo que es el plugin más personalizable y compatible que existe en la actualidad. Podría ser un poco más usable en ciertos aspectos como el que comentas, pero sin duda sabiendo manejarlo puedes hacer prácticamente lo que quieras.

      Gracias por pararte a comentar 😉

  2. ¿Muy buen artículo Jose! un verdadero tutorial de como crear y personalizar un formulario de contacto.
    Mi consulta es,
    1. ¿cómo creo un formulario en horizontal que contenga solo Nombre + email + botón? y ¿cómo personalizo sus tamaños de ancho y largo?
    Un ejemplo de lo que me refiero es el formulario de suscripción en la barra lateral de este post a tu minicurso de MKT Digital.
    2. ¿Este formulario de comentario es el que viene por defecto en la platilla o es creado con un plugin?

    Saludos!!!

    • Hola Pablo, te cuento.

      1. Se puede hacer perfectamente un formulario de suscripción horizontal usando código pero no es lo habitual porque el problema es que esa respuesta a ese email se tendría que ofrecer manual ya que no se insertaría directamente en el proveedor de email marketing para poder usar autoresponder por ejemplo.
      El que yo tengo viene incluido en el maquetador Forge Page builder el cual te da una API para que directamente manejes esa suscripción.

      2.Igualmente el formulario de contacto también está incluido.

      Lo que Contact form 7 es útil sobre cuando quieres personalizar más los campos o en el caso que no quieras usar un constructor.

      Saludos.

  3. Perfecto, entonces el uso del Contac Form 7 es útil como formulario de contacto en “Pagina de Contacto”. Para cajas de suscripción, captación de Leads lo ideal es utilizar el que ofrece por ejemplo Forge o alguna Herramienta de Email Marketing?

    • Así es Pablo.

      Como te digo se puede crear pero ni va a ser tan visual(a no ser que toques código) ni sobre todo la implementación y compatiblidadcon el servicio de email marketing va a ser tan fácil(a no ser que instales un plugin)

  4. Genial y detalladísimo. Muchas gracias!

    He aplicado el cógido CSS que recomiendas para personalizar el tamaño de los campos a rellenar porque antes había instalado el plugin “Contact Form 7 Customizer”, pero este aspecto no se puede modificar con él.

    Luego por cierto he observado haciendo una prueba de envío a mí mismo que ha dejado de aparecer el mensaje de “enviado con éxito” y en su lugar se queda una flechita dando vueltas que da a entender que está en proceso, cuando en realidad ya se ha mandado el mensaje. No es poca cosa, porque alguien puede creer que no se ha enviado su mensaje y hacer click infinidad de veces… ¡y yo recibir su mensaje en cada click!

    ¿Tienes noticia de este error? ¿Crees que es por usar el plugin que te he comentado?
    Abrazo y gracias de nuevo

    • Hola Omar, gracias a ti por el comentario.

      Nunca se me ha dado ese error en las webs en que he usado contact form 7.

      Por el plugin no debería pero como plugin siempre puede generar algún conflicto, desactivalo y prueba a ver si te sigue saliendo la flecha con las vueltas.
      También prueba a hacer el comentario en modo incógnito y limpiando las Cookies o cambiar de navegador.

      A ver si tienes suerte.

      Un abrazo

Deja un comentario

245 Shares
Share63
Tweet156
+114
Share12
Email