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 instalar el plugin de formulario Contact Form 7 en WordPress?

Si ya conoces WordPress, adelante, ya puedes instalar este plugin  de formulario como vas a ver. Si no sabes muy bien como funciona, te recomiendo primero que aprendas en este Tutorial sobre 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.

Si quieres vivir de internet ¡Suscríbete!

 Recibe Trucos / Consejos sobre SEO y Monetización

Información básica sobre protección de datos:


  • Responsable: José Manuel Peña Fernández
  • Finalidad:  recoger y tratar los datos personales que te solicito para gestionar la solicitud que realizas en este formulario de contacto.
  • Legitimación: tu consentimiento de que quieres comunicarte conmigo.
  • Destinatarios: tus datos serán guardados en Webempresa,  (proveedor de hosting de Tu Web de Cero) dentro de la UE.
  • Derechos: tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
  • Información adicional: Puedes consultar la información adicional y detallada sobre protección de Datos en mi Política de Privacidad.

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

 

YouTube video

 

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

 

 

〉〉 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

 

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

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

 

〉〉 Envío

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 

 

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

 

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.

 

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

 

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.

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

José Peña
José Peña
Consultor SEO y Especialista en crear webs rentables con WordPress desde cero. He tenido la oportunidad de ayudar a muchas personas a comenzar y crecer su web hasta convertirse en un negocio de éxito. Además he creado “MkCero” (mi propia agencia de Marketing Digital). Más sobre mí | Mi Linkedin | Mi Canal de Youtube

127 comentarios en «Tutorial Contact Form 7: Un plugin de formularios top»

  1. Impresionante Josél! Me encantó este post super detallado y dando un toque distinto al formulario. Por supuesto veré de implementarlo! 😉 Saludos!

    Responder
    • Gracias María

      Es un plugin muy conocido pero se le puede sacar más partido que lo que te trae por defecto.

      Me alegro que te guste 😉

      ¡Saludos!

      Responder
  2. Fantástico post José. Me has despejado muchas dudas !!. Cómo no te habré encontrado antes ?. Muchas gracias.

    Responder
    • Gracias Gonzalo

      Me alegro que te haya ayudado.

      Pues ya que me has encontrado, aquí estoy para lo que que quieras 😉

      Responder
  3. 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.

    Responder
    • 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 😉

      Responder
  4. ¿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!!!

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

      Responder
  5. 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?

    Responder
    • 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)

      Responder
  6. 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

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

      Responder
  7. Hola José,
    Es genial lo que haces y gracias. Quisiera hacerte una pregunta… como puedo hacer en contact form 7 un formulario con opciones desplegables pero que al escoger una respuesta el formulario cambie dependiendo de la opción? Por ejem:
    – Es cliente de nuestra empresa? (si / no)
    Si responde si, escriba su rut.
    Si responde no, que se desplegue un formulario que le pida datos personales para el registro.
    Gracias y saludos,
    DK

    Responder
  8. Hola José,
    Muy buen tutorial el que nos regalas en este post pero tengo una duda, ahora mismo estoy utilizando el contact form 7 y quiero enviar varios formularios con un solo botón ya que tengo varios creados y quiero que todos se envíen juntos una vez llenos a través de un solo botón de envió para todos los formularios.

    Me puedes ayudar con esto?

    Responder
    • Hola Leonel, no entiendo bien tu pregunta. ¿Que quieres enviarlo a distintos destinatarios? A ver si me puede explicar un poco mejor que te entienda

      Responder
  9. Lo que quiero es enviar varios formularios a un mismo destinatario usando un solo botón de envío. Por ejemplo, tengo un formulario de contacto, otro formulario pidiendo datos personales como nivel escolar y esas cosas y otro formulario pidiendo nivel de conocimientos, cuantos idiomas dominas etc y quiero que esos 3 formularios se envíen al mismo destinatario al mismo tiempo usando un solo botón de envío, en vez de tener que usar un botón de envío en cada formulario.

    Dime si así me entiendes mejor.

    Responder
    • No se si te deja hacer eso Leonel porque cada formulario lleva asociado un botón y por defecto el plugin no lo permite, lo único que creo que se puede hacer es personalizar con CSS cada formulario para que parezcan independientes pero que sean campos del mismo formulario.

      Responder
  10. Buenas noches Leonel . . .

    Seguí todas las indicaciones dadas en este post y pude instalar y configurar un formulario de incripción para un evento de mi oficina (instalé inclusive el Flamingo y agregué el rcaptcha) y m funcionan correctamente. El único inconveniente que no logro resolver es que cual doy el botón enviar (en este caso se llama «Inscibirme») la página se queda pensando infinitamente (sale la famosa ruedita que gira y gira sin parar), y por ende no le arroja al usuario el mensaje de que se ha completado si inscripción.

    El correo electrónico de notificación de la inscripción si llega a mi buzón y también a la sección Flamingo, pero…………, le da la sensación al usuario de no haber realizado el proceso de forma satisfactoria.

    Ayúdame por favor!!.

    Muchas Gracias.

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

      Por el plugin no debería de generar ese conflicto, puede ser un problema de incompatibilidades con otros plugin.
      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, o limpiando los caché.
      Si sigue sin funcionar prueba a desactivar otros plugins para ver si es ese el problema

      Responder
  11. Hola José, el post es magnifico, con lo que lo leeré con detenimiento un poco más tarde, lo que yo ando buscando en concreto (estoy a falta de esto solo para finalizar la web) es crear un campo calculado con contact forms que solo sea visible para el que recibe el correo de formulario enviado, es decir, el desarrollador (yo) o el explotador de la web (mi cliente). El campo en sí tiene una estructra sencilla, lleva un sufijo (PCA) concatenado con día, mes y año y todo ello concatenado con un contador que se reinicia cada día, es decir a las 00:00 vuelve a 0, el campo que recibiría en cuestión quedaría así:
    PCA031020171
    PCA031020172
    PCA031020173
    .
    .
    .
    PCA03102017XXX
    ¿esto es posible hacerlo con el plugin de alguna forma?.
    Gracias!!!!! (aunque solo sea por la molestía de haber leido este tocho de comentario 😉 )

    Responder
  12. Hola José,

    Muy buen post y muy completo.

    Pero la función
    on_sent_ok: “location = ‘http://tupagina.com/’;”

    está descatalogada y ya no funciona.

    Tengo 2 formularios y querría que me llevara a 2 páginas de agradecimiento distintas

    ¿Sabes como puedo hacer para conseguirlo?

    Salu2

    Responder
    • Hola Angel, hace bastante tiempo que no toco Contact Form, ahora uso el editor Elementor que incluye unos formularios que evitan tener que usar este plugin, si han cambiado,desconozco el funcionamiento ;(, sorry

      Responder
  13. Buenas tardes, muy completo el tutorial, existe alguna forma colocando UN campo de numero: numbers me permita colocar números de moneda por ejemplo este numero: 1.550.000(campos de un millon en digitos de moneda) he probado de diferentes formas y no me deja enviar el formulario dice el siguiente mensaje: UNO O MAS CAMPOS TIENEN UN ERROR, solo he logrado que pasen este numero por ejemplo 250.000(los miles), me imagino que me toma como error porque piensa que estoy colocando 2 veces decimales, quisiera encontrar la solucion para no tener que hacer ese campo en LETRAS y asi si me lo toma, saludos

    Responder
    • Hola Alberto, llevo un tiempo sin usar contact form 7 ya que utilizo el maquetador Elementor que trae un formulario muy personalizable. Lo que pides a no ser que lo hayan actualizado últimamente no se puede(que yo sepa) hacer.
      Contact form 7 está programado y no permite hacer esos añadidos o configuraciónes si no es con código,la verdad es que deberían de insertarlo.

      Responder
  14. Buenas. Enhorabuena por el post.
    Me gustaría saber como editar el css de los mensajes que aparecen tras pulsar el botón de enviar. Me refiero a configurar colores y background, no a su ubicación (que ya incluyes en este post)
    Gracias. Espero que te acuerdes o sepas donde encontrar la info

    Responder
  15. Hola José, te felicito por el tutoríal, es amplio y útil. Permíteme una pregunta: Al incluir el reCaptcha en el formulario me aparece siempre un rectángulo gris debajo del botón «No soy un robot» aunque ignoro la causa. ¿Sabes la causa y cómo se puede quitar?
    Gracias

    Responder
    • Es raro Jesús, no debería aparecer.

      Si es molesto puedes eliminarlo con CSS

      Inspecciona la class del bloque gris y anota el código:

      .(nombre de class) {
      display:none;
      }

      Responder
  16. Cual es el CSS para , el ancho y el alto de la caja del formulario contact form 7, para hacerlo del tamaño que se requiera unicamente indicas de los campos, gracias de antemano???

    Responder
    • Hola Manu, el proceso es el mismo, la diferencia está al inspeccionar el elemento debes elegir el identificador o clase no del bloque si no de lo que abarque todo el contenido. Cuando pongas el boton encima del formulario y todo se ponga azul, ese será el identificador, el resto es igual.

      Responder
  17. Hola José, muy bueno tu post. Muy currado como todos tus post la verdad.
    Te quería pedir ayuda con dos cositas a ver si me puedes echar un cable porque yo de CSS entiendo poco. Quiero hacer un formularioy no consigo obtener dos cosas. Una que «tu nombre» «tu email», etc. salga dentro de la cajita (imagino que esto no tiene mucho misterio, pero no consigo hacerlo jeje) y luego (y más importante) conseguir una franja de color pero al mismo tiempo transparente que pase por el medio del formulario dejando parte de foto a ambos lados. Sólo consigo que sea de un color o transparente.
    A ver si me puedes echar una mano. Mil gracias de antemano!

    Responder
    • Hola Teresa, poco vas a poder conseguir con CSS ya que lo quieres hacer es modificar los campos y para ello tienes que personalizar el formulario por html.

      Por ejemplo para meter el nombre dentro de cada campo, tienes que introducir entre las «» del campo value el nombre que quieres que aparezca dentro, este va seguido del código type=»text».

      Respecto al color se puede usar rgb pero para lo que creo que quieres hacer necesitas configurar igualmente valor onfocus en html para que se aplique.

      Responder
  18. Muchas gracias José! Lo primero lo he conseguido los del color transparente nada jejeje algo de html sé, pero poco así que no sé qué es el valor onfocus ni cómo y dónde ponerlo dentro de las opciones que da contact form 7. De cualquier manera, mil gracias!

    Responder
  19. Hola José, tengo una duda… hice el formulario y funcionaba correctamente, pero hoy haciendo pruebas cuando se envia un formulario desde la web sale el mensaje de que «no se ha podido enviar por un error». Sabes cual puede ser la causa?

    Responder
    • Revisa bien la configuración del email Rosa.
      Si está todo correcto también podrías refrescar la caché de WordPress y del navegador por si no se hubieran grabado los cambios.

      Responder
  20. Te felicito, llevaba semanas intentando cambiar el color del botón de envío, y tu en una línea me lo has solucionado. Muy buen post, lo guardo como enlace de interés!

    Responder
  21. Hola José, muy buen post, tengo una duda ojala puedas resolverla, ¿como hago para pre cargar con valores el formulario? (la 1ra vez será vacío, la 2da con los datos enviados la primera vez.

    Responder
  22. Hola José.
    He aplicado lo de video para integrar mi formulario con mailrelay.
    Hice la prueba y me envié un formulario y todo aceptable.
    Pero encuentro un problema y no se a que se debe.

    Desde que apliqué lo aprendido en este video, me han llegado mas de 20 suscriptores pero en lugar de aparecer el nombre del nuevo usuario me viene un número raro como estos: 5aa99d4617250, 5aa99a320d9e1
    y si viene con un email.

    ejemplo: De: 5aa99d4617250

    En el ejemplo he colocado x en el correo del suscriptor.
    Me puedes ayudar a solucionar este problema?

    Gracias

    Responder
    • Si está marcado la opción como text no debería darte problemas Rolando, en otro caso no entiendo el error.

      Responder
  23. Disculpa, nuevamente te lo explico diferente:
    tu entras a mi página y te suscribes:
    nombre: jose
    email: jose@aol.com (ejemplo)

    Cuando yo lo recibo en mi bandeja de entrada, aparece asi:
    Nombre: 5aa99a320d9e1
    email: jose@aol.com

    Gracias

    Responder
  24. Te lo explico diferente:
    entras a mi página, te suscribes asi
    nombre: jose
    email: jose@aol.com

    Cuando recibo tu email en mi bandeja de entrada, aparece asi:
    Nombre: 5aa99a320d9e1
    email: jose@aol.com

    Porque me aparece asi, donde esta tu nombre?
    Que pasa ahi????

    Gracias

    Responder
    • Si tienes insertado:
      debería de funcionar Rolando

      Responder
  25. Felicidades por la guía. Muy completa. ¡Iba a escribir sobre el tema… pero creo que mejor referenciarlo a ti!

    Responder
  26. Muchas gracias. No me funcionaba CF7 Customizer, pero con este tutorial no ha sido necesario.

    Responder
  27. Por cierto, he echado en falta, en el punto 12.1, cómo cambiar el tamaño de las letras. Que no me aclaro con el size, font size o lo que sea. Por si lo quieres tener en cuenta.

    Un saludo, y gracias de nuevo.

    Responder
    • Te agradezco el comentario Christian, lo tendré en cuenta.

      Un saludo

      Responder
  28. Hola, no se porque cuando añadí el formulario de contacto se ajustaba atodo el ancho de página, pero de golpe y porrazo me sale en pequeño en la parte izquierda de la página como si se hubiera dividido en tres columnas, pero no es así no está dividido.

    Como puedo volver a ajustar otra vez todo el formulario al ancho de página?

    Responder
    • Parece que es por configuración de plantilla o de caché no por el plugin Ivan, no deja de ser un shortcode simple que debería de cumplir su función.
      Si la web es la que indicas en el perfil yo lo veo a pantalla completa

      Responder
  29. Muchisimas gracias José por tan espléndidas explicaciones! Gran trabajo!
    Lo único que no he encontrado es lo siguiente:

    Te comento: Tengo que hacer un formulario con muchos campos, y para que no parezca una lista interminable, quisiera poner al menos 2 campos en una misma linea horizontal. (con sus 2 cajas correspondientes). ¿Cómo debo configurarlo?

    Por ejemplo:

    Nombre 1er Apellido 2º Apellido
    Dirección
    C.P. Ciudad

    Y más cosas que debe llevar el formulario…

    Mil gracias Y buen fin de semana!

    Responder
  30. Buenas.

    He configurado el plugin y todo perfecto excepto que la casilla de aceptación de la Política de Privacidad no me aparece. El texto sí pero el recuadrito para clicar no.

    He probado con otro plugin y tampoco aparece.

    Un saludo y gracias.

    Responder
    • Debería aparecer utilizando el campo acceptance, a ver si ese es el problema, asegúrate.

      Saludos

      Responder
  31. Hola. Quería preguntar como puedo añadir un campo firma al formulario. Gracias.

    Responder
    • ya he conseguido poner el campo firma. Ahora tengo otro problema como puedo guardar en una base de datos los datos enviados por un formulario?

      Responder
  32. mil gracias! estuve buscando y buscando como hacer el enlace para la Política de Privacidad y pude hacerlo gracias a tu entrada 🙂 Tengo una pregunta, estoy usando el Plugin WP Comment Policy Checkbox pero en la parte de los comentarios no me sale ni el texto para dar click y la primera capa. Sabes como puedo hacer para insertarlo manualmente? en la plantilla? tienes algún código que puedas compartir? te lo agradecería un monton!

    Responder
    • Yo también he empezados utilizar ese plugin y me funciona bien. Consulta al soporte del plugin a ver si te pueden ayudar

      Responder
  33. Buenas tardes

    tengo 5 formularios en mi sitio web y deseo personalizar cada uno con su forma. que codigo css debo manejar para personalizar solo un formulario?

    Responder
    • Hola Andrés.
      Para eso tienes que inspeccionar elementos con el botón derecho del ratón y seleccionar el id de cada formulario para poder aplicar css a cada uno por separado.

      Responder
  34. Es muy completo el artículo, yo para trackear con analytics lo hago a través de redirección a pag. de gracias ahora que el ok_sent no funciona.

    Responder
  35. Hola,
    Tengo una problema :la casilla de aceptación no se marca cuando hago el click para aceptar la política pero después que envió el mensaje en falmingo aparce como estoy aceptando la política .

    Responder
    • Hola, sin verlo es difícil saber cómo solucionarlo pero prueba a mirar si tienes metido el código mal y si tiene indicado que es required

      Responder
      • Buen día Jose, muy buen articulo. me queda una duda
        Yo implemente con código y la casilla de verificación me aparece primero y debajo me aparece el texto que dice He leído…
        Mi pregunta es ¿Cómo puedo hacer para que el texto me aparezca a lado de la casilla de verificación y no debajo?

        Agradezco de antemano si me puedes ayudar

        Responder
        • Hace tiempo que no uso Contact form y no se las opciones que tiene para esto sorry. Usar CSS…

          Responder
  36. Hola,
    Muchas gracias. Me sirvió de mucha ayuda.
    Queria saber si seria posible modificar el alto (Solo el alto) de las casillas de contenido, me parecen muy altas, y en la que se escribe el mensaje demasiado grande, querria dejarla a la mitad.
    Tambien, seria posible el codigo para modificar colores y tamaños de las letras?

    Responder
    • Eso lo tienes que hacer a tú gusto Álvaro, echa un vistazo a los ejemplos de css que muestro en el post y deberías poder hacerlo sin problema.

      Responder
  37. Excelente post José.
    Muy detallado y a su vez muy bien explicado.
    Me preguntaba, ¿es posible usar un formulario de este tipo para registrarse en la web?, osea pidiendo contraseña incluido, para que luego puedan acceder a zona privada de miembros?.
    Aunque por lo que veo cuando alguien deja los datos no recibe ningun correo. osea que este formulario, solamente es de contacto, ¿es así?.
    Muchas gracias por tan importante información.

    Responder
    • Por hacerse se tiene que poder hacer ya que se basa en html pero necesitas de más funciones

      Responder
  38. Buenos días José, excelente artículo.
    Una pregunta, se podría con form contact 7 configurar por ejemplo en un campo fecha 23 o 24, dependiendo de lo que se pinche, que cambié el campo de horario?? dependiendo de disponibilidad??
    Se de otros pluging que sí lo tienen pero con contact form 7 no he encontrado nada.

    Un saludo y gracias por todo

    Responder
  39. José, he buscado por todos lados y no puedo encontrar cómo agregar un campo para el número de identificación, por ejemplo:
    76234567-k
    No puedo incorporar números, guiones y letras.
    ¿Puedes ayudarme? He puesto etiquetas de texto pero no me acepta guiones y si coloco etiqueta de número no puedo agregar letras.

    Responder
    • Hola Ximena, hace mucho tiempo que no utilizo Contact form pero hasta donde yo recuerdo no incluye esa opción, toca tocar código para eso.

      A ver si tienes suerte y encuentras información para ello

      Responder
  40. hola buen post, una consulta sabes alguna manera de validar el envío del formulario tengo un pequeño formulario de contacto en mi web lo hice con contact form 7, pero cuando el usuario le click al boton enviar varias veces por ejemplo 3 veces antes de que aparezca el mensaje de que ya fue enviado el correo esa misma cantidad de veces me llega el correo, he tratado de validar de varias formas pero no he tenido resultado, por favor agradezco su ayuda.

    Responder
  41. Un post muy bien desarrollado pero estaba tratando dilucidar el tema de la personalización de los autoresponders. Seguiré buscando. Saludos.

    Responder
  42. Hola José, he creado una web para un club deportivo con un área privada para los socios, acceden con un login y password personalizado. Para participar en un evento deportivo puse un formulario realizado con CF7 y he conseguido que al ir al formulario ya aparezca en pantalla el nombre y el email del usuario, pero aparecen como campos modificables, ¿hay posibilidad de bloquearlos para evitar que un socio registre a otro con bajo sus claves? Gracias por el tutorial

    Responder
    • No sé si entiendo bien Ignacio pero imagino que eso se debe simplemente a que un mismo navegador guarda las cookies y contraseñas. Entiendo en ordenadores nuevos no ocurre eso.
      A lo mejor estoy entendiendo mal.

      Responder
  43. Hola! Excelente post!
    Pero tengo una consulta: Quiero que la persona que rellena el formulario e ingresa su correo (requerido), tenga que escribirlo de nuevo para verificar que está bien escrito el correo. Y en el caso de no coincidir el tipeo en los dos campos, avise que no hay coincidencia en los correos ¿Se puede hacer esto?
    Esto lo quiero agregar porque a veces los usuarios tipean mal el correo y luego no tengo la posibilidad de comunicarme con ellos mediante el correo electrónico.
    Muchas gracias!

    Responder
  44. Gracias amigo

    Ya esta función aparece como obsoleta como Ajustes adicionales como notificación de confirmación
    on_sent_ok: “location = ‘http: tupagina com/’;”

    a ser obsoleta ya el formulario genera error y no hace nada.

    Que otra opción puedo configurar para qe el usuario reciba el mensaje personalizado de agradecimiento?

    Responder
  45. Hola.

    Me gustaría saber en un formulario con el href para abrir un link a otro sitio con que opción tendría que configurarlo para abrir el nuevo sitio en una pagina nueva.
    Muchas gracias.

    Responder
    • Es muy fácil Francisco, tienes que incluir el atributo target=»_blank» dentro del código de ahref

      Responder
  46. Hola José, super interesante ésta guía de contacform 7.
    Soy nueva editando mi sitio web uso Elementor, veía en las respuestas a los comentarios que Elementor tiene opciones que son mejores que contactform 7.

    Quiero incluir un hipervínculo en el formulario a la política de privacidad. Cómo lo hago? Algo así como el formulario que tienes al final para postear el comentario. Justo es eso lo que necesito.

    Agradezco tu apoyo!

    Responder
    • Hola Angélica.

      Para cualquier formulario creado con Elementor solo tienes que incluir el tipo aceptance y en el area de texto meter el enlace usando Responder

  47. Hola, me volví loco intentando darle CSS al botón y gracias a este articulo lo conseguí a la primera, muchísimas gracias amigo

    Responder
  48. Hola, muy util el post.
    Llegué aquí buscando una forma de disminuir mi formulario de contacto, ya que por defecto aparece del ancho de la pantalla. Logré hacerlo como indicas pero me cambia el de todos los formularios y solo necesito uno en específico.
    ¿Cómo puedo hacerlo?

    Responder
    • Tendrás que identificar el id de la página en concreto y delante de la clase en CSS aplicará los cambios solo a esa página determinada.

      Responder
      • disculpa como se hace? probe de varias formas y no logro hacerlo. gracias

        Responder
  49. Muy buen tutorial.. GRACIAS, me ha servido bastante. Pero tengo un problema que creo que se puede resolver con css. Me explico. En uno de los formularios pongo un campo tipo casilla de verificación con numeros para dar opciones, pero al pulsar cualquiera el relleno es muy debil, es un naranja clarito (color corporativo) y no es sólido, es como unas letras que lo hacen aún mas debil, y quisiera que el relleno en sí fuera negro (si es posible) o sólido total, es decir, que quede bien marcado y visible. No sé que código css podría poner, pues llevo investigando bastante, y no lo consigo. Te agradecería que me aportaras el código si lo conoces. El formulario es de momento de prueba para posteriormente integrarlo en la pagina definitiva. GRACIAS

    Responder
  50. COMO PUEDO HACER PARA REDUCIR LOS ESPACIOS ENTRE CASILLAS? OSEA LOS PADDINGS. GRACIAS

    Responder
    • Tienes que analizar la clase inspeccionando el elemento y aplicar css

      Responder
  51. Hola José.
    Extenso e interesante todo lo que describes de este plugin.
    Me surge una duda:
    Este plugin también me sirve para hacer el formulario de comentarios de WP.
    Un formulario como este donde te estoy dejando mi duda.
    O sino es asi, entonces cual me sirve para que los lectores dejen sus comentarios?
    Gracias

    Responder
    • Hola Rolando, no, para eso no sirve. Para comentarios o bien usas el de WordPress por defecto o instalas Disqus que es externo o cualquier otro plugin que además te va a dar muchísimas opciones

      Responder
  52. ¡Madre mía! Me va a explotar la cabeza con tanta información. jaja. Yo solo quería que el formulario tuviera marcos en cada campo, porque me aparece solo el texto y todo blanco, no se ve ni siquiera que es un formulario. Pensé que sería fácil y me encuentro con este artículo tan extenso… creo que iré a lo fácil, porque yo de css ni idea, creo que ni con tus instrucciones lo terminaría de hacer en una semana, jeje. Voy a usar la app "Customizer" para Contact form 7. ¡Gracias por la información!

    Responder
    • Jaja, la verdad es que me pongo a escribir y no sé cuando parar!!!

      Bueno, quédate en lo básico y luego amplias si te hace falta. De todas formas Customizer funciona muy bien!!!
      Gracias a tí por comentar!

      Responder
  53. Hola José, enhorabuena por el post, está muy detallado y bien explicado.

    Necesito poner títulos de bloques y textos explicativos en ciertas partes del formulario, pero no sé cómo debo hacerlo.

    ¡Gracias por compartir tus conocimientos!

    Responder
  54. Porqué no solo pones el código y no con imagenes

    Responder
    • Tengo que actualizar el post. Lo tendré en cuenta Felipe

      Responder
  55. Me ha costado encontrarte porque se me quedo tu nombre y no la web. Pero es increible lo que ofreceis y no se como agradecer lo aportado.

    Responder
    • Muchas gracias Marivi. Con el comentario ya me pones contento!!!

      Un saludo!!

      Responder
  56. Hola! He intentado poner los márgenes del formulario como indicaste:

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

    pero no se efectúan los cambios. Sigue el texto pegado a la parte de arriba del formulario.

    sabes como puedo solucionarlo?
    Gracias!

    Responder
    • Hola Ivana. Creo que te falta un punto delante de wpcf7 pero habría que verlo en cada caso

      Responder
  57. Hola!! mil gracias por el post esta todo muy claro y bien explicado!!
    Tengo una duda, necesito colocar un simbolo de pregunta al lado de una casilla y que en el over el usuario vea una breve explicacion de lo que debe hacer… como se llama ese tipo de boton??

    No soy programadora, solo diseñadora grafica y aprendí a utilizar los cms por mi cuenta. Mucho te agradezco si me puedes orientar!

    Responder
    • Hola Mariela, hace tiempo que no he probado funcionalidades nuevas o extensiones. Desconozco si existe algo para eso o por el contrario necesitas emplear programación. Sorry

      Responder
  58. Buenas, excelente aporte.
    Estoy haciendo una sencilla página para uso interno que consiste en hacer una lista de tareas para chequear cada día que se hace. Hago un formulario con preguntas Si/No pero no quiero que se envíe el email cuando pulso sobre aceptar. Con que guarde los valores en una tabla me es suficiente. ¿es posible anular el envío?
    Gracias

    Responder
  59. Buenas tardes,
    buen aporte.
    ¿Es posible anular el envío del email cuando pulsas sobre aceptar el formulario?. Estoy haciendo un formulario para uso personal que se basa en hacer un checklist de tareas diarias pero no necesito que me envie ningún email. Con que guarde los datos y después los pueda ver con flamingo o contact form 7 DB me es suficiente.
    Gracias

    Responder
    • Hola Xavi. Hace mucho tiempo que no uso Contact Form 7 a fondo pero seguro que se puede hacer algo con las condicionales pero para eso lo mejor es que preguntes en el soporte del plugin

      Responder
  60. Hola!!! Muchísimas gracias por tu explicación, es el tutorial más claro que he visto!
    Quisiera saber si puedes ayudarme con esto: Ya he traducido todo el plugin usando Loco Translate, pero de ninguna manera logro cambiar el texto de los botones para subir archivos en el formulario, me siguen saliendo en inglés "Choose file" y "no file chosen". Sabes si hay alguna otra forma de ponerlo en español? Te agradezco mucho tu colaboración!

    Responder
  61. Hola José,

    ante todo un excelente tutorial. Tengo una consulta: he utilizado el formulario en una página cuyo fondo es un poco oscuro, entonces al aparecer el mensaje de confirmación se ve solo un recuadro verde y no se nota el texto. Hay alguna forma de cambiar el color del texto o de ponerle fondo al campo del mensaje de confirmación? Gracias de antemano.

    Responder
    • Hola Baatriz, tendrías que ver cuando sale el mensaje e inspeccionar elementos para ver el código css del fondo para cambiar el color

      Responder
  62. Hola quisiera añadir campos que tengan formato de hora pero no logro como hacerlo, agradecería que alguien me indique si lo puedo añadir y cómo sería,

    Gracias.

    Responder
  63. Buenas noches, saludos…

    Quisiera colocar los nombres de etiquetas dentro del campo, y al campo tomar el enfoque que se borre

    Responder
  64. Buenas noches

    Quisiera colocar las etiquetas de los nombres de campo dentro del campo haciendo uso del CSS, como puedo hacerlo?

    Saludos

    Responder
  65. Hola José, Buenísimo!!
    Solamwnte una duda.
    Al momento de crear los checkbox, me aparece la casilla de verificación arriba y en nombre (label abajo). Cómo puedo hacer para que me aparezcan en la misma línea?

    Mil gracias

    Responder
  66. Buenas José,
    Soy principiante en Wordpress y llevo varios días buscando como insertar datos de una base de datos en un desplegable.
    Si me pudieras ayudar te lo agradecería mucho.
    Gracias de antemano.

    Responder

Deja un comentario