Contact Form 7

Tutorial de configuración y uso

Contact Form 7 es uno de los plugins más conocidos de WordPress. Su objetivo es la creación de formularios de una forma rápida y eficiente. Es gratuito y se actualiza continuamente.

Es tan popular que muchos desarrolladores de plantillas lo recomiendan. Incluso algunos, lo integran en su propio theme con una personalización específica acorde a la imagen y estilo de la plantilla.

Este plugin permite crear formularios de contacto muy avanzados pero no es tan potente como Gravity Forms, Formidable, etc, ni tampoco es su intención….

Es una solución gratuita, que facilita la posibilidad de que una web bajo Worpress, disponga de un método de comunicación a través de un formulario sencillo y eficiente.

Contact Form 7 no guarda los campos en la base de datos por lo que el sistema recoge los datos del usuario, los incluye en un mail, los envía y desaparecen sin más.

Si por casualidad el mensaje se pierde por el camino, bien por culpa del servidor o del servicio de email, la información sencillamente desaparece. Si quieres evitarlo y guardar los formularios en la base de datos puedes complementar Contact Form 7 con Flamingo.

Estilos en Contact Form 7

Unos de los puntos negativos que le achacan a Contact Form 7 es el aspecto y la personalización.

Si necesitas un diseño específico tienes que usar CSS o seguir las características de integración del theme que utilizas. Aun así es bastante sencillo personalizar un formulario con un poco de código.

Incluso hay plugins como por ejemplo CF7 Customizer, que te permite tunear los formularios sin necesidad de CSS.

¿Por casualidad trabajas con Avada? Entonces tienes amplia integración desde el panel control y al igual que Avada tienes otras muchas plantillas que también lo gestionan.

En este tutorial profundizaré en este plugin y te enseñaré a crear columnas y dar estilo. Los usuarios de Avada también tienen su apartadito para aprovechar las funcionalidades del theme.

Contact Form 7 - Tutorial completo. Aprende a usarlo y exprimirlo

Indice de contenido

Principales características Contact Form 7

Las más importantes que puedo señalar son las siguientes:

  • Formularios ilimitados
  • Traducido al español
  • Creación de diversos tipos de campos: Texto, email, url, télefono, numero, fecha, área de texto, menú desplegable, casillas de verificación, botones de selección, aceptación, pregunta, recaptcha, archivo y enviar.
  • Personalización de los campos
  • Configuración de correo electrónico que recibes
  • Configuración de correo para el usuario que envía el formulario
  • Es posible incluir envíos en copia o en copia oculta.
  • Configuración de los mensajes
  • Uso de códigos cortos para la implementación de los formularios en cualquier parte.
  • Permite enviar archivos a través del formulario
  • Acepta el uso de códigos cortos externos para la personalización del aspecto visual (hay que hacer un apañito primero)
  • Acepta el uso de clases CSS
  • Buena documentación (en inglés)
  • Es gratuito y se actualiza con mucha frecuencia
  • Se puede filtrar spam con Akismet

Familiarízate con el formulario de contacto

Voy a obviar la instalación del plugin, porque a estas alturas me imagino que sabes de sobra como se hace. Es de lo más sencillo…

En resumen: Plugins > añadir plugins > contact form 7 > instalar > activar > ¡listo!

Te aparecerá un nuevo item en el menú principal de WordPress, generalmente debajo de “Comentarios” que se llamará Contacto.

Pantalla principal de Contact form 7

En la parte superior tienes una serie de enlaces que te ofrecen ayuda en linea desde la web de Contact Form 7. Está en inglés pero te resuelve prácticamente cualquier duda que tengas.

Si haces click encima del título accedes al formulario. El código corto sirve para insertar el formulario de contacto en cualquier parte de tu web.

Creación del formulario de contacto

El plugin ya incorpora un formulario básico predefinido y útil para cualquier web en el que se solicitan campos como Nombre, email, asunto, mensaje y el botón de enviar. La verdad es que estas son las necesidades del usuario medio. Un modo simple de mantener contacto desde la web.

Al acceder a la pantalla de creación de formularios nos encontramos con esto.

Pantalla formulario de Contact form 7

Como ves aparecen 4 pestañas que te permiten navegar a través de las opciones de configuración.

Actualmente estás en la pestaña “Formulario”, que es donde lo creamos mediante los campos que solicitaremos a nuestros usuarios. Cambia a la pestaña “Correo electrónico” y  podrás configurar las opciones de envío.

Mensajes

La pestaña “Mensajes” personaliza los mensajes predefinidos y por último la pestaña de “ajustes adicionales” permite ajustes avanzados (para casos muy concretos).

En la parte superior aparece el nombre o título del formulario.

Debajo de las pestañas tienes los campos disponibles para incluir dentro del formulario.

En la caja de texto es incluyes los códigos de los campos con el html necesario para dar forma al formulario. A su vez puedes combinar con CSS si deseas darle tu propio estilo.

En la columna de la derecha puedes guardar e incluso duplicar el formulario completo. ¡No veas cuanto trabajo ahorra ese botoncito…! y también enlaces a información destacada (en inglés) si te surge cualquier duda.

Correo electrónico

Desde esta pestaña accedes a toda la configuración del correo electrónico que recibes y también (si lo activas) configuras la copia o acuse de recibo que recibe tu visitante.

Pantalla de configuración de correo electrónico de Contact form 7

¿Qué es cada campo?

El primer bloque es lo que llega al destinatario, osea, tú.

Para: Tu correo electrónico

De: El correo electrónico de tu web.

Antes se podría poner un nombre, pero ahora con las últimas actualizaciones lo da como error y sale un mensaje constantemente que dice que revises la configuración del plugin.

También puedes incluir la etiqueta [your-name] o en su caso la que hayas utilizado para el nombre del remitente del formulario. En teoría debería devolverte el nombre del usuario, aunque no siempre funciona porque depende la configuración que tengas con el correo.

Si no usas un correo smtp y los correos son procesados por el servidor te encontrarás con que el nombre del remitente es WordPress, ya que es la función que tiene prevista para los correos electrónicos generados por el CMS (wordpress@tudominio.com)

Esto se puede cambiar añadiendo una función en el functions.php del theme en el que indicamos el nombre del remitente que queramos.

Si utilizas una cuenta SMTP aparte de evitar muchos problemas de spam, saldrá el nombre que tienes asignado a esa cuenta de correo electrónico.

Asunto: Pues eso, el título de email

Cabeceras adicionales

Desde este apartado generas una copia del correo que irá a otro destinatario u otra cuenta de correo. Puedes ponerla en copia normal o en copia oculta. Por ejemplo:

Si queremos enviar una copia normal a otro correo añadimos: Cc: Email

Si queremos enviar una copia oculta a otro correo añadimos: Bcc: Email

Puedes crear tantas como quieras y debes poner una por cada linea.

Cuerpo del mensaje

Aquí es donde configuras el formato y aspecto del contenido que te llegará y para eso puedes usar texto y también html.

Si te fijas, en la parte superior de la pantalla, debajo de las pestañas, te aparece un aviso que te indica lo siguiente:

“En los siguientes campos puedes usar estas etiquetas de correo electrónico:
[your-name] – [your-email] – [your-subject] – [your-message]”

Bien, estos son los campos que has utilizado para recoger la información en el formulario de contacto y ahora puedes usarlos aquí para que el plugin te indique la info de cada campo.

Creo que se ve claramente en la imagen superior, como puedes configurarlo con el texto y los campos. Además puede servirte como ejemplo.

¿Que ocurre al marcar estas opciones?

Excluir las lineas con etiquetas de correo electrónico vacías en la salida

Los campos que hayan quedado vacíos en el formulario (por ejemplo, porque no son obligatorios) no se muestran.

Usar contenido de tipo HTML

Reconocerá el código HTML si lo has incluido en el cuerpo del mensaje. No te lo recomiendo porque es posible que tu servidor de correo lo interprete como spam y no te llegue.

Archivos adjuntos

Debemos incluir la etiqueta del campo que utilizamos para subir el archivo.

El apartado de correo electrónico 2 es para generar un acuse de recibo.

Dicho de otra manera, nos permite enviar automáticamente un segundo email al remitente del formulario (o a donde queramos). Así el usuario confirma que hemos recibido el mensaje y le genera tranquilidad.

El funcionamiento es exactamente el mismo, pero en el contexto que antes explicaba. Solo hay un pequeño matiz en el campo “Para:”. En este caso pondremos el campo [your-email] o el que corresponda con el email del remitente.

Para grabar los cambios utiliza el botón GUARDAR que aparece en la parte inferior.

Mensajes

Aquí aparecen los mensajes que el plugin genera con las diferentes acciones que realiza el formulario.

Por ejemplo, cuando el formulario se ha enviado con éxito o si no se ha podido enviar. Si hay un error de validación o debe aceptar los términos…..

Como puedes observar es un largo etc. Como mensajes estándar pueden valer, pero si quieres personalizarlos escribe en los campos tu propio mensaje y será sustituido por el que aparece por defecto.

Configuración de mensajes de acciones en Contact Form 7

Personaliza los formularios de contacto

Cuando te digo que Contact Form 7 es un plugin ideal para crear formularios simples, es una verdad a medias porque en realidad es mucho más potente de lo que parece.

El único problema es que tiene sus bondades un poco escondidas y no tiene una interfaz que te permita seleccionar un montón de cosas. ¡Digamos que toca hacerlo a mano!

A veces necesitamos establecer algunos parámetros que faciliten la entrada de datos o que aporten más seguridad o también facilidad para el usuario. Mira un ejemplo de lo que te comento revisando las posibilidades de Contact Form 7.

Añade diferentes campos y establece condicionantes

Por ejemplo, usa los siguientes campos:

Texto: Nombre. Apellidos.
Correo electrónico: Email.
Telefónico: Teléfono.
Numérico: Unidades.
Menú desplegable: Un menú con varias opciones.
Aceptación: Para que acepten las condiciones de uso y privacidad de la web con un enlace a los mismos y cumplir con la LOPD.
Archivo: Para que puedan enviar un archivo definido.
Envio: Para enviar el formulario.

Antes de nada, quiero explicarte la sintaxis del código corto típico

[text* nombre size:50 id:boton class:boton “Incluye tu nombre”]

Donde:

text: Nos indica el tipo de campo

*: Indica que es un campo obligatorio

size:50 class:boton…: Son opciones disponibles para el campo (tamaño, clases css…)

“Incluye tu nombre”: Indicamos un valor que se utilizará por defecto

Parámetros de los campos

Campo texto

Pantalla de configuración de campo texto en Contact Form 7
Si haces click sobre el campo texto saldrá una ventana como esta y en ella podrás rellenar los parámetros de configuración. Es válido para cualquier campo de texto. En este caso es igual para los campos Nombre y Apellidos.

Tipo de campo: Al marcarlo indicas que será obligatorio para el usuario. Si el campo no se rellena, el formulario no se envía.

Nombre: Contact Form 7 siempre utiliza un nombre con un número y en inglés. Si quieres simplificarlo puedes cambiarlo por un nombre que haga referencia al tipo de campo. Yo por ejemplo, he usado la etiqueta nombre.

Valor predeterminado: Si añades un valor implica que en el campo del formulario aparecerá ese valor por defecto si marcas la casilla inferior. En este caso, no tiene sentido, salvo si quieres hacer algún tipo de aclaración que sirva como ejemplo al usuario.

Akismet (Este campo requiere el nombre del autor): Colaborando con Akismet (si lo tienes instalado), al marcar la casilla aparece un parámetro de autor para validar el formulario. Así, lanza a Akismet los datos para que “decida” si es spam. Si no lo es, el formulario se envía y si lo es, se cancela.

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

Campo Email

Pantalla de configuración de campo correo en Contact Form 7

El campo de correo electrónico es en realidad un campo de texto. Funciona exactamente igual, pero se convierte en un campo específico y obligatorio por defecto. Los demás parámetros ya están explicados en el apartado anterior.

Campo teléfono

Pantalla de configuración de campo telefono en Contact Form 7

También es un campo predefinido y mantiene los mismos atributos que los de texto. No insisto sobre ello.

Campo numérico

Pantalla de configuración de campo numerico en Contact Form 7

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

Te permite elegir como será el formato del campo numérico. Lo típico para introducir un número o en formato deslizante entre un rango de números.

Rango establece un valor mínimo y otro máximo.  El usuario solo podrá moverse entre ese rango numérico.

Campo Menú desplegable

Pantalla de configuración de campo menú desplegable en Contact Form 7

Permite incorporar un desplegable y el usuario elige una o múltiples opciones. En opciones indica las disponibles (una por cada linea).

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.

Campo aceptación

Pantalla de configuración de campo aceptación en Contact Form 7

Este campo establece una condición ineludible. Para poder enviar el formulario debe estar marcada. Te ayuda a cumplir con las normas de la LOPD.

Añade un texto con un enlace para que tu visitante tenga la oportunidad de leer la política de privacidad y condiciones de uso de tu web.

Permite dos opciones: Que la casilla aparezca marcada por defecto o bien que funciona a la inversa. Los demás campos ya están explicados.

Campo archivo

Pantalla de configuración de campo archivo en Contact Form 7

A través de este campo facilitas al usuario el envío de archivos. Puedes personalizarlo para establecer algunas condiciones.

Limite de tamaño: Establecemos un límite para el peso del archivo. El valor hay que ponerlo en bytes y tienes que hacer la conversión. Por ejemplo para un 1 archivo de un Megabyte, el valor en bytes sería 1048576.

Formatos de archivo aceptados: Estableces la extensión de los archivos que permitirás subir, por ejemplo, mp3, pdf, docx, etc.

Ten en cuenta que esta puede ser una vía estupenda para que algún “gracioso” (por no usar otra expresión), pueda enviarte un virus o tocarte las narices de alguna manera, o sea, es un agujero de seguridad estupendo. Úsalo con sentido y establece las limitaciones necesarias.

Campo enviar

Pantalla de configuración de campo enviar en Contact Form 7

Permites la acción del envío del formulario mediante un botón. Inserta en el campo etiqueta el texto que aparecerá en el botón.

Bien, pues vamos a ver el resultado de todo esto.

Construcción del formulario

Ejemplo de construcción de un formulario en Contact Form 7

¡Y este es el resultado!

Ejemplo de resultado de un formulario en Contact Form 7

Añadiendo parámetros de configuración a los formularios

Una vez que tenemos el formulario creado y vemos el resultado quizá te hagas la siguientes preguntas:

¿Puedo limitar de alguna manera los datos que el usuario va a incluir?

Si. Contact Form 7 ofrece opciones adicionales para que puedas poner limitaciones. Por ejemplo, cuantas letras puede tener un campo.

¿Los campos no son demasiado grandes?

Si. Puedes establecer el ancho del campo.

¿Podría ponerlos en columnas para que no se haga tan largo el formulario?

Si mediante CSS o con códigos cortos del propio theme.

Vamos paso a paso…

Parámetros válidos

Limitamos el ancho de los campos: size:50

Ponemos una longitud mínima de caracteres: minlength:5

Ponemos una longitud máxima de caracteres: maxlength:90

Ejemplo con el campo nombre: [text* size:50 nombre minlength:5 maxlength:50]

Estos parámetros son válidos para todos los campos.

Si utilizamos un campo de área de texto podremos también establecer las columnas (ancho) y filas (altura):

Se usa la siguiente sintaxis: 40×10 (Ancho y alto) – 40x (Solo ancho) – x10 (solo altura). Piensa que no estamos hablando de pixeles, sino de columnas y filas.

Ejemplos: [textarea areatexto 40×10 ] [textarea areatexto 40x ] [textarea areatexto x50 ]

Nota importante: En el caso de que tu theme ofrezca integración y estilos para Contact Form, tal vez no funcionen los campos size, columnas y altura, porque el theme asume el control mediante CSS personalizado para Contact Form 7.

Aplicando estos parámetros el resultado del formulario sería el siguiente:

Construcción del formulario

Ejemplo 2 de construcción de un formulario en Contact Form 7

¡Y este es el resultado!

Ejemplo 2 de resultado de un formulario en Contact Form 7
Como observarás a mi no me está respetando el parámetro size y me estira todo el campo hasta el final. Esto ocurre porque Avada está encargándose de las CSS y su estilo las estira.

Probablemente ocurra con otros muchos themes, pero si no es tu caso, deberías ver los campos mucho más cortos, con el tamaño lógico.

Lo que si funciona perfectamente es la longitud de caracteres que especifiqué y que no me permite escribir más allá de los indicados. Esta es u na práctica que te recomiendo encarecidamente, fundamentalmente por seguridad.

Aplicando estilo al formulario

La manera de aplicar estilo es mediante CSS. Si tu plantilla dispone de maquetador, podrás usar los códigos cortos para poder establecer columnas con los campos y si dispone de un apartado de CSS personalizado o desde el propio child podrá personalizar cualquier cosa.

Abordar todas las posibilidades sería interminable, por eso explicaré 2 de ellas, que pueden servirte a ti y casi a todos los usuarios..

Usuarios de Avada. Establece columnas con Fusion Builder

Con Shortcodes

Lo primero que has de hacer es añadir una función al archivo functions del theme. Así Contact Form 7 acepta y “entiende” los shortcodes de Avada.

Recuerda que si actualizas el theme, el código extra que insertes desaparecerá y tendrás que volver a incluirlo. Tal vez sea mejor implementarlo como plugin, pero para hacer tus pruebas irá perfectamente.

En este caso utilizo Avada así que los shortcodes son los de Fusion Builder, pero es aplicable a cualquier theme que utilice códigos cortos. Por ejemplo, si utilizas Visual Composer, puedes usar los suyos.

Los shortcodes de Fusion Builder para las columnas tienen muchísimos parámetros. Tienes que usar los cortos de verdad…..o sea, los códigos cortos de los códigos cortos, jajajaja.

Me explico:

El código corto para una columna es el siguiente:

Como ves es muy largo y sería incómodo. Debes utilizar este:

Si quieres crear dos columnas es así:

El formulario completo vendría a ser algo así:

Y este sería el resultado

Ejemplo 3 de resultado de un formulario en Contact Form 7

En Avada con CSS

Si no quieres utilizar shortcodes puedes hacerlo mediante CSS y concretamente en Avada puedes aprovechar precisamente su integración para evitar tener que crear todo el CSS de cero, salvo que quieras algo muy especial.
Para establecer las columnas con las clases de Avada sería de esta manera:

Y este sería el resultado…

Ejemplo 4 de resultado de un formulario en Contact Form 7

Recuerda que en Avada tienes un apartado en las opciones del tema > Extras > estilo de formularios, que te permite cambiar el aspecto de los campos en Contact Form 7, como por ejemplo la altura,  color de fondo del formulario, color del texto y color de los bordes.

Opciones de configuración en Avada para Contact Form 7

Crear las columnas con CSS en cualquier theme

Si no quieres usar códigos cortos y tu theme no tiene soporte de integración con Contact Form 7, puedes crear código HTML y CSS para crear las columnas. Sería algo así

En el formulario de Contact Form:

Y en el Child Theme o en el apartado de CSS personalizado de tu theme incluimos lo siguiente:

Aplicando colores u otros estilos en Contact Form 7

Al inicio del post te comenté que existe un plugin que te ayudará en esta tarea. Si no quieres instalarlo y prefieres hacerlo por tu cuenta, verás que es mucho más sencillo de lo que parece.

La forma más rápida y cómoda para evitar perder el código que vamos a escribir en caso de actualización es hacerlo en el child theme o en el apartado de CSS personalizado.

¿Cómo aplicar estilos y colores en Contact Form 7?

Supongamos que deseas poner un color de fondo marrón a todo el formulario. Los campos deben tener un fondo azul y el texto que se escribe en ellos es de color verde. Además le pondremos un borde grueso también de color verde. ¡Si ya se, que es hortera! pero es para que lo veas.

Aplicamos color de fondo a todo el formulario. El selector css para contact form 7 es wpcf7

Ahora puedes añadir a cada campo un id o clase css para personalizarlo individual o colectivamente.

Por ejemplo, coge tres campos concretos que tengan ese estilo hortera y que destaquen.

Para ello crea un ID que se llame campo especial y lo aplicas. Por ejemplo, al campo nombre, correo electrónico y teléfono.

El código CSS sería este:

Y en el formulario aparecería esto:

Más posibilidades…

Otra posibilidad es que apliques estilos en función del tipo de campo. Por ejemplo, a los campos numéricos aplica un borde blanco grueso y el color de texto interior irá en blanco.

Si tienes varios campos de este tipo, les afectará todos. Para eso tenemos que utilizar una clase css y el selector será de la siguiente manera:

wpcf7 input [type=”number”]

Si quieres aplicarlo a un tipo de campo de texto usas “text” y así con todos los tipos.

¡Y este sería el resultado de toda esta amalgama de estilos!

Aplicando colores y estilo en Contact Form 7

Más cosas interesantes en Contact Form 7

Como puedes ir observando Contact Form 7 es un formulario de contacto mucho más potente de lo que parece. Ahora te voy a dejar algunos tips que te ayudarán a sacarle un poco más de partido.

Guardar los formularios en la Base de datos

Utiliza Flamingo o bien Contact Form DB

Redirigir a los usuarios a una página después de enviar el formulario

Cuando se ejecuta el envío del formulario aparece un mensaje de agradecimiento y el usuario sigue donde está. Pero si quieres redirigirlo por algún motivo a otra página específica puedes hacerlo de la siguiente manera:

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

Combina Contact Form 7 y Akismet

Añadir una capa extra de seguridad a tu formulario y luchar contra el spam es posible gracias a la posibilidad de combinar akismet y contact form 7.

¡Ten cuidado! porque si akismet se equivoca e interpreta que el formulario lo envía un spammer y no es así, perderás la información.

Para tratar de evitar esta situación en la medida de lo posible debes añadir a los campos Nombre, Email y Url los siguientes parámetros:

  • akismet:author: Para confirmar un nombre en tu formulario.
  • akismet:author_email: Para confirmar un email.
  • akismet:author_url: Para confirmar una URL

Quedaría algo así:

Lo ideal es que utilices los tres campos, para ayudar a Akismet a validad los datos. Piensa que Akismet está concebido para validar comentarios, pero no formularios. Cuantos más datos le ofrezcas mejor podrá hacer su trabajo. Aun así no hay fiabilidad 100% de que no se equivoque. Haz pruebas para ver como funciona.

Seguimiento del envío de formularios con Google Analytics

Si utilizas Google Analytics para analizar tu tráfico web, tal vez quieras realizar un seguimiento de envíos de formularios de contacto.

Hazlo así:

Primero ten en cuenta que utilizas la última versión del código de analytics.

Necesitas crear un evento y notificárlo a Google cuando se envía el formulario. Puedes harerlo con la siguiente función en JavaScript

Lo incluyes en Ajustes Adicionales de este modo:

Asegúrate de que el código está en una sola linea.

Para ver que funcionan correctamente, puedes comprobarlo en Analytics: Comportamiento> Eventos> Vista general página

En teoría deberías recibir información pasadas 24/48 horas después del envío.

Cambiar la posición de la respuesta del formulario

Cuando se envía el formulario y no está redirigido, aparece un mensaje en la parte inferior indicando que se ha enviado con éxito, que ha fallado o lo que sea.

Si prefieres que este mensaje aparezca encima o en cualquier otra parte, es tan sencillo como agregar un código corto en la posición del formulario donde quieras que aparezca.

[response]

Your Name (required)[text* your-name]

Subject[text your-subject]

Your Message[textarea your-message] [submit “Send”]

Seleccionar un remitente desde el propio formulario

Esta opción es muy interesante si por ejemplo tienes varios correos o para una empresa con varios departamentos. La usamos si queremos que el propio usuario determine a quien va dirigido el correo.

Vamos a usar por ejemplo un menú desplegable.

Sería una cosa así:

Al crear este campo debes añadir un nombre de destinatario seguido de “|” y luego el correo. Así evitas que los bots o spammers puedan ver los correos.

Para completar el proceso recuerda que en la pestaña “Correo electrónico” debemos añadir este campo “Destinatario” en el apartado “Para”.

Aplicar etiquetas para varios destinatarios en Contact Form 7

Etiquetas especiales para incluir en los emails

A veces es conveniente saber quien nos está enviando un formulario, sobre todo por motivos de seguridad.

Por ejemplo si se te cuela un robot que no para de enviarte formularios de spam y quieres bloquearlo, lo primero que necesitas es conocer su IP.

Contact Form 7 incluye una serie de metaetiquetas muy útiles para incluir en los correos electrónicos como cualquier otro tipo de campo.

Son las siguientes:

Las buenas prácticas en el envío de correo electrónico con los formularios

El abuso y envío masivo y constante de emails que producen spam es tan grande que han tenido que tomar medidas en este sentido.

Eso genera nuevos retos y problemas, como por ejemplo la suplantación del correo, donde alguien puede enviar emails en tu nombre. La mayor parte de los robots e intentos de hackeo buscan precisamente esto. Total, que el mundo del email es muy complejo.

Todos los mensajes que se generan en una página web tienen todas las papeletas para ser considerados spam si no se siguen unas ciertas reglas. Y aun así no hay garantía 100% de que lleguen a los destinatarios. Si quieres evitar que esto te pase a ti presta mucha atención.

Utiliza una cuenta SMTP

La mejor opción es crear un correo específico para la web y que se envíen siempre a través de ahí. Yo siempre uso un plugin que redirecciona el correo a través de SMTP anulando el php mail. Hay muchos y todos funcionan bien. Particularmente uso Easy WP SMTP

Así a través de un email específico envío todos los correos que se generan desde la web tanto para mi como para mis usuarios. La verdad es que nunca he tenido problemas que yo recuerde.

Configurar SMTP para contact form 7 con Easy WP SMTP

Esta es la configuración y así logras que tu correo sea enviado por una cuenta de email verificado y real. Con este paso además no es necesario cambiar la función de WordPress que envía el correo con la dirección wordpress@tudominio.com

Si usas php-mail

Si prefieres enviar los correos a través de tu servidor con php mail, entonces sigue estas recomendaciones.

No utilices una cuenta de correo con un dominio diferente al que estás utilizando en tu web. Es decir, si tienes un dominio que se llama pepeillo.com y envías los correos desde la web con una cuenta que se llama, por poner un ejemplo pepeillo@gmail.com (es decir, un dominio diferente) tienes muchas posibilidades de que los proveedores de correo electrónico lo consideren spam, precisamente porque eso es lo que hacen los spammers al utilizar correos que no tienen nada que ver con ellos.

Añade la función que expliqué en el tutorial para cambiar la cabecera y el email que envía el correo. Así no aparecerá wordpress@tudominio.com como remitente. Además del spam, es una cuestión de imagen.

Configura en tu servidor de correo la autentificación mediante SPF y si es posible DKIM. Esto lo soporta prácticamente la totalidad de los servidores de correo y se considera seguros.

Evita el HTML en el correo electrónico

Si no es necesario, evita el uso de HTML en el cuerpo de los correos que se envían.

No utilices los correos de los formularios para generar publicidad.

Procura que los mensajes de correo sean demasiado cortos. Esto puede confundir a los filtros y pueden considerarlo correo no deseado.

Cuidado con los campos vacíos del formulario. Si están vacíos procura que no aparezcan en el correo. Esto es configurable en Contact Form 7.

Espero que este tutorial te ayude a manejar y gestionar mejor este formulario de contacto. ¿A qué es más potente de lo que aparentemente parecía?

¿Cual es tu experiencia con Contact Form 7? ¿Nos la cuentas…? ¿Puedes añadir algo más que ayude a otros usuarios?

¡Nos vemos en la próxima!

2016-10-14T06:26:21+00:00 07-06-2016|Tutoriales, Wordpress|66 comentarios

66 Comentarios

  1. albert canals 06/03/2017 en 19:40- Responder

    Hola Fabián, gracias por el trabajo del tutorial. Es de mucha ayuda.
    Sabes si es posible “enviar” mediante el shortcode una preselección de un item de un listado (menu desplegable)? me explico? para que de un listado salga como marcada una opción determinada. La idea es aprovechar un único formulario para petición de información de diferentes productos, y que cada shortcode contenga qué producto debe mostrar del listado.

    Muchas gracias!!! un saludo!

    • Fabián Vázquez 07/03/2017 en 09:50- Responder

      Hola Albert.

      Entiendo que te refieres a que en un menu de opciones aparezca una seleccionada por defecto. ¿Es eso?. Siendo ese el caso, tienes un shortcode para ello.

      Por ejemplo, si estableces tres opciones, Por ejemplo, color A, Color B, Color C y quieres que aparezca Color A por defecto marcada, debes incluir el siguiente shortcode.

      [colores label_first default:1 “Color A” “Color B” “Color C”]

      Donde colores es el campo y la etiqueta label_first_default le indica el número de opción, siendo 1 “Color A”, 2 “Color B” y 3 “Color C”

      Espero haberme explicado bien y que te sirva.

      Saludos

  2. Toni Ubeda 01/03/2017 en 12:49- Responder

    Hola Fabian,
    Este completísimo post me está sirviendo de mucha ayuda. Muchas gracias!!
    Estoy teniendo un problema con los envío/eventos/objetivos. Te comento: He probado todos estos códigos para trackear en analytics, añadiendo un objetivo:
    on_sent_ok: “ga(‘send’, ‘event’, ‘Formulario’, ‘enviado’, ‘contacto’);”
    on_sent_ok: “__gaTracker(‘send’, ‘event’, ‘Formulario’, ‘enviado’, ‘contacto’);”
    on_sent_ok: “_gaq.push(‘send’, ‘event’, ‘Formulario’, ‘enviado’, ‘contacto’);”
    En todos ellos cuando envío el formulario se queda pensando y no aparece la respuesta de “se ha enviado correctamente”. ¿Sabes qué puede estar pasando? P.D: El formulario envía el correo correctamente pero como te comento, se queda pensando y dar la respuesta de “enviado correctamente”
    Muchas gracias!!

    • Fabián Vázquez 01/03/2017 en 16:34- Responder

      Hola Toni, me alegro que te sea útil. Sin verlo es dificil saber que ocurre, porque pueden ser muchas cosas. A priori se me ocurren dos posibilidades:

      Por una parte, es posible que el código no esté bien y no sea capaz de enviar la información a Analytics, por eso se queda pensando y no puede completar el proceso. Quizá si está bien, pero por lo que sea no conecta.

      Por otra parte, quizá tengas un conflicto con Javascript o Jquery. Ese proceso utiliza java para ejecutarse.

      Tienes que descartar cosas. Para ver si hay un conflicto con otro plugin, desactiva todo menos el contact form y haz pruebas de envío. Si funciona, ve descartando de que plugin se trata el que produce el conflicto. Si no funciona, revisa bien el código que estas utilizando y revisa si los objetivos se completan en Analytics. si los datos no llegan, ahí es donde tienes el problema.

      Siento no poder ayudarte más.

      Saludos

      • Toni 09/03/2017 en 06:29- Responder

        Muchas gracias por tu respuesta, seguiré haciendo pruebas. Un saludo!

        • Fabián Vázquez 09/03/2017 en 18:54- Responder

          Ok Toni, ya me contarás.

          Saludos

  3. Sandro 01/03/2017 en 08:29- Responder

    Hola Fabian. Ante todo felicitarte por el tutorial, es impresionante y me ha ayudado muchisimo en la creacion de mis primeros formularios. Tengo una duda, ¿pueden crearse condicionales? Te explico, supongo que tenemos una situacion del tipo ¿Desea recibir ayuda? Si o No, en caso de contestar SI rellene los siguientes campos (nombre, apellidos y tipo de ayuda). Mi idea es tener los campos opcionales por defecto en gris difuminado sin acceso, y que solo se activen cuando pulsas SI.
    Muchas gracias
    Saludos

    • Fabián Vázquez 01/03/2017 en 09:46- Responder

      Hola Sandro. Gracias por tus amables palabras. Me alegro que te haya servido.

      Respondiendo a tu pregunta… Contact Form 7 no tiene esa posibilidad por si mismo, pero puedes hacerlo a través de un plugin de terceros. Sinceramente nunca lo he tenido que utilizar, porque cuando me tengo que meter en formularios complejos, me voy a otros.

      Explora este plugin y con él podrás hacer lo que necesitas.

      https://es.wordpress.org/plugins/cf7-conditional-fields/

      Saludos

  4. Mª Angeles Pérez 24/02/2017 en 18:09- Responder

    Hola Fabián, muchas gracias por el artículo. Mi empresa tiene una página web generada en WordPress con un proveedor externo, que tiene instalado el Contact Form 7, pero nos lo han personalizado, de manera que no puedo modificar ningún parámetro del formulario porque no encuentro donde hacerlo. ¿Habría alguna manera de visibilizarlo para poder editar el formulario??

    Muchísimas gracias.

    • Fabián Vázquez 24/02/2017 en 21:13- Responder

      Hola Mª Angeles. Es extraño lo que dices. Lo único que se me ocurre es que lo hayan ocultado a través del control de usuarios. Me imagino que puedes hablar con ellos para que te lo habiliten y puedas hacer los cambios que necesites o incluso que ellos mismos lo hagan. Contact Form 7 debería aparecer en el menu de administración de WordPress sin más….

      Saludos

  5. Enric 21/02/2017 en 10:19- Responder

    Hola Fabian, Muchas gracias por tu artículo, es muy interesante y una gran aportación.

    Estoy intentando añadir un parámetro a una redireccición con el on_sent y no veo la manera de hacerlo sin programación.

    Es decir, si en el formulario tengo un campo numérico de cantidad, añadirlo como parámetro a la siguiente función:

    on_sent_ok: “location = ‘http://tupagina.com/’;”

    Sabes como hacerlo.

    Un saludo y gracias.

    • Fabián Vázquez 22/02/2017 en 06:10- Responder

      Hola Enric. La verdad es que nunca he tenido que hacerlo. Tendría que verlo con calma. Me inclino por tener que hacer una función, coger esa variable para memorizarla y que contact form 7 sepa que hacer con ella. Habría que hacer pruebas, pero así a priori, sin asegurarlo categóricamente, no entra dentro de las funciones de Contact Form 7. Siento no poder ayudarte.

      Saludos

    • Antonio 24/02/2017 en 13:41- Responder

      No sé si has conseguido hacerlo con o sin programación, pero me vendría muy bien conocer si has encontrado una solución. Tengo el mismo problema, quiero que salte a otra página solo si se cumplen dos condiciones: si se ha enviado correctamente y si el número de un campo numérico en el formulario es inferior a 100.

      • Fabián Vázquez 24/02/2017 en 21:17- Responder

        Hola Antonio. Le estamos pidiendo a Contact Form cosas para las cuales no ha sido en principio diseñado. Yo no lo he tenido que hacer nunca y la verdad es que ahora no podría ponerme a ver eso. Si algún usuario lo ha hecho o lo tiene configurado de esa manera, será estupendo que nos lo explique aqui.

        Siento no poder ayudarte.

        Saludos

  6. Víctor 20/02/2017 en 17:11- Responder

    Como siempre muy buen tutorial Fabián.

    Y como siempre recurrimos a ti para resolver dudas… 🙂

    Por haber utilizado el formato “html” en el formulario, no me aparece el email del remitente en el cuerpo del mensaje…
    Sabes si hay alguna forma de recuperarlo?

    Muchas gracias.

    • Fabián Vázquez 21/02/2017 en 07:32- Responder

      Hola Victor. No, no es recuperable porque no se guarda en ninguna parte. Me imagino que habrás utilizado mal la etiqueta, porque el hecho de que vaya en HTML no tiene que influir (en ese sentido) Revisa bien el campo y haz pruebas.

      Un abrazote

  7. maria 13/12/2016 en 12:54- Responder

    Hola. Tengo problemas con el formulario de mi web.
    Estoy usando AVADA 5.0 y Contact form7
    Cuando relleno todos los campos siempre me sale el mismo mensaje ” HUBO UN ERROR INTENTANDO ENVIAR TU MENSAJE. POR FAVOR INTÉNTALO DE NUEVO MÁS TARDE.”
    He probado a rehacer el formulario , le he puesto un plugin que se llama WP-Mail-SMTP y nada, no consigo dar con el problema. ¿Tienes idea de porque puede pasar?

  8. Javier Fuentes Abril 08/12/2016 en 21:08- Responder

    Hola Fabián.
    Tengo una duda sobre contact form que, realmente, no sé si es posible hacer.
    Estoy realizando un formulario de contacto mediante el que los clientes me pueden contratar para la realización de un servicio y, tras enviar el formulario sea redirigido a Paypal para que pueda realizar el pago.
    Esta parte la controlo y me funciona bien, pero la duda es la siguiente:
    Quisiera establecer la posibilidad de pagar por Paypal o realizar una transferencia En este caso, ¿Existe la posibilidad de establecer un menú desplegable en el formulario y que, dependiendo de la opción que elija, transferencia o Paypal, se redirija a una página o a otra?
    En definitiva, ¿que si elije la opción 1 se redirija a una página y si elije la opción 2 se redirija a otra?

    • Fabián Vázquez 14/12/2016 en 06:22- Responder

      Hola Javier. Disculpa la demora en contestarte. Voy un poco agobiado de trabajo.

      Si te soy sincero nunca he probado esa posibilidad. Probablemente sea posible, modificando el comportamiento mediante javascript o bien un hook. Ahora bien, llegados a este punto, me imagino que te saldría más rentable utilizar woocommerce para estas cosas, lo cual te permitiría “profesionalizar” el proceso. Está bien exprimir Contact Form 7, pero la realidad es que no está pensado para estos menesteres y Woocommerce es gratuito.

      Saludos

      • Javier Fuentes Abril 14/12/2016 en 18:20- Responder

        Muchas gracias por responder. Ya estuve contemplando esa opción, pero mi web es un despacho de abogados online y, pese a que trato de buscar la posibilidad de contratación a través de la página, incluyendo el pago, no quería darle la apariencia de una tienda online, simplemente por las propias características de mi negocio, en el que quizá darle estructura de tienda haría más fría, en mi opinión, la contratación.

        • Fabián Vázquez 14/12/2016 en 19:27- Responder

          Hola Javier. No es necesario si no quieres que le des esa apariencia. Los servicios hay que crearlos, pero luego se pueden colocar botones para que vayan directamente al carrito desde donde tu quieras. Por ejemplo, puedes poner una imagen y un botón debajo que añada el producto o servicio al carrito. Puedes cambiar los textos para que no hablen de producto, sino de servicios. Woocommerce es muy flexible y puedes trabajar casi como tu quieras sin necesidad de dar esa imagen y yo diría que eso es mucho más profesional y te da mucho mas juego y genera confianza.

          Saludos

          • Javier Fuentes Abril 14/12/2016 en 19:42

            Pues según me dices tendré que mirar cómo hacerlo ya que tenía la idea de que todo iba a quedar tipo tienda, algo que, como te digo, no quería para nada en mi web. Supongo que en tu blog podré guiarme para ver como hacerlo, ya que uso Avada y tus explicaciones eran muy muy claras.
            Saludos.

  9. www.trucos-para.com 06/12/2016 en 20:38- Responder

    Muchas gracias por la información, muy currada.

    • Fabián Vázquez 08/12/2016 en 08:52- Responder

      Gracias a ti, saludos

  10. Sandra Alvarez 06/12/2016 en 17:23- Responder

    Buenos días, antes de comentar mi pregunta, quiero felicitarte por éste tuto que has hecho !”! estoy fascinada !”!

    Ahora si, requiero poner en Cabeceras Adicionales un Cc o Bcc para que se envíe copia a otro mail y solamente me marca “El valor del campo Cc no es válido”. En que estoy fallando ? o debo irme a otro lado para solucionarlo ???

    Muchas gracias.

    • Fabián Vázquez 08/12/2016 en 10:01- Responder

      Hola Sandra, disculpa mi demora en contestar.

      Poner en copia a otro correo es muy sencillo. Sencillamente has de poner (copia oculta) Bcc: correo@dominio.com. Si necesitas poner un segundo correo, lo pones debajo, siempre con Cc: o Bcc: y el correo correspondiente. También puedes probar a poner Reply-to: correo@dominio.com
      No intervienen más factores y si te llama solo se me ocurre que el correo o los tags estén mal escritos. Separa el correo con un espacio…

      Saludos

  11. David 21/11/2016 en 19:20- Responder

    Muchas gracias por el tutorial pero tengo problemas con el envio de archivos.
    Es bastante curioso, envia los archivos de poco tamaño ( a penas 50 kb), pero por encima de eso no llegan los correos, sin embargo si son muy pequeños o no llevan archivo llegan sin problema.

    ¿Tiene idea de que puede ser?

    Un saludo

    • Fabián Vázquez 22/11/2016 en 07:26- Responder

      Hola David. Contact Form 7 establece por seguridad una serie de restricciones en cuanto a los tipos de archivo y su tamaño. De esta manera se evita que cualquier usuario o bot te envíe un archivo no deseado o con un tamaño excesivo. Para cambiar los valores por defecto debes incluir un parámetro:

      Imagina que quieres aumentar el tamaño del archivo a un Mega. Debes añadir en el código corto lo siguiente “limit:1mb”
      El código corto sería: [file your-file limit:1mb].

      Imagina que queremos permitir que nos envíen solo ciertos tipos de archivo, como por ejemplo, png, jpg, word y pdf y con un tamaño máximo de 2 MB

      El código corto sería [file your-file filetypes:jpg|png|pdf|doc|docx limit:2mb]

      Saludos

      • David 22/11/2016 en 09:41- Responder

        Buenos dias Fabián y gracias por la rapida respuesta.
        Lamentablemente he probado lo que me comentas pero sigue sin funcionar.
        He puesto este codigo en el formulario:
        [file file-735 filetypes:jpg | png | pdf | gif limit:6mb]

        y esto en archivos adjuntos de la pestaña correo electronico: [file-735]

        Tambien he probado a poner el limite en bites, pero nada

        Un saludo y gracias adelantadas

        • Fabián Vázquez 22/11/2016 en 09:57- Responder

          Hola David:
          A veces las cosas se atragantan y por cualquier chorrada no funcionan. Como te imaginarás, sin verlo, solo puedo hacer suposiciones y el problema podría estar en mil cosas.
          Por descartar elimina los espacios entre las extensiones de archivo, es decir, que no haya espacios en blanco.
          Prueba primero sin limitar el tipo de archivo, solo el peso.
          Cuando añadimos archivos adjuntos o html, entran en acción un montón de mecanismos, que en función de la configuración del servidor, podrían hacer que cualquier envío de este tipo, sencillamente no funcione.

          Otra opción que puedes probar, es con el envío a través de SMTP. Hay que ir descartando cosas, porque podría ser cualquier tontería. Yo he probado en decenas de instalaciones esta función y nunca falla (me refiero a contact form 7), pero no todo depende de él.

          Si no te funciona, tal vez, para echarte una mano, tendría que ver como tienes todo.

          Saludos

          • David 23/11/2016 en 19:02

            Simplemente eliminado las limitaciones para el tipo de archivo funciona perfectamente. Asi que muchisimas gracias por la ayuda! ya lo tengo como queria

            Un saludo y gracias de nuevo

          • Fabián Vázquez 23/11/2016 en 19:26

            Ves, era alguna tontería, pero que hasta que no das con ella, te vuelve loco. Me alegro que lo hayas solucionado.

            Gracias a ti por compartirlo.

            Saludos

  12. Ana Vázquez 21/11/2016 en 15:14- Responder

    Hola Fabián! Muchísimas gracias por este trabajo tan fantástico. Me ha resultado muy muy útil y he conseguido solucionar todos los problemas que tenía con el formulario… que no eran pocos, ya que no entendía nada 😉

    No conocía tu blog, pero a partir de ahora te seguiré con mucho cariño y admiración.

    Un saludo

    • Fabián Vázquez 21/11/2016 en 18:51- Responder

      Hola Ana. Eres muy amable y personas como tú hacen que tenga ganas de seguir haciéndolo, porque de vez en cuando un mensaje de este tipo te recarga las pilas. Gracias por tus palabras y siempre eres bienvenida, porque todo lo que aquí se hace, también es con cariño.

      Saludos

  13. Javier 15/11/2016 en 04:50- Responder

    Felicitarte en primer lugar por el tutorial, es muy útil y preciso. Una cuestión. ¿ es posible variar como se presenta la información enviada a través del formulario?. Es que necesitamos imprimir la información ( con algo de estilo) y ésta aparece como texto plano sin ningún formato. Gracias. Un saludo

    • Fabián Vázquez 16/11/2016 en 07:13- Responder

      Hola Javier. Disculpa la demora en contestar.

      Si es posible añadir HTML y darle estilo. Para ello en el apartado de correo electrónico, debes marcar la casilla “Usar contenido de tipo HTML”.
      Ahora bien, debes tener en cuenta, que los correos con contenido HTML tienen muchas posibilidades de caer en la bandeja de spam y por ello tendrás que tener muy bien configurados los envíos. Es cuestión de que hagas pruebas. Si te llegan a Spam, tal vez sea necesario que los envies por SMTP o incluso quizá te haga falta una firma tipo DKIM.

      Si solo añades un poco de HTML, tal vez funcione sin problema, pero si empiezas a añadir enlaces e imágenes, es cuando vendrás los problemas.

      Saludos

  14. RAUL 01/11/2016 en 20:12- Responder

    Hola, y muchas gracias por una explicación tan completa de este plugin.
    Al ver el formulario en el móvil, los campos de las casillas donde el usuario ha de rellenar los datos aparecen totalmente descuadrados. Concretamente, el extremo derecho de cada casilla no se ve en la pantalla.

    ¿Cómo puedo hacer para que sea totalmente responsive en el móvil?

    Muchas gracias

    Saludos

    • Fabián Vázquez 02/11/2016 en 08:33- Responder

      Hola Raul. La verdad es que no deberías tener ese problema. Si lo estas insertando con el código corto la plantilla debería encargarse del responsive. Así sin verlo, no puedo decirte que ocurre, pero lo que es seguro es que no deberías tener que meter código css para el formulario específicamente. La plantilla debería resolver el problema. Tiene que haber algo que provoque algún tipo de conflicto o bien que la plantilla no sea responsive (pero a estas alturas, lo dudo).

      Saludos

  15. Muy buen post Fabián. Te he descubierto esta noche, leyendo otro post tuyo sobre le tema Avada y ya te he agregado a mis marcadores.
    Saludos y sigue así. No sabes el favor que nos haces.

    • Fabián Vázquez 23/10/2016 en 10:22- Responder

      Hola Mauricio. Muchas gracias por tus amables palabras. Me alegro que todo este trabajo sea de provecho para ti.
      Saludos!!!

  16. Gosia 22/10/2016 en 02:22- Responder

    Hola Fabián,
    En primeras palabras gracias por esa amplia explicación que nos viene de lujos para todos los que no estamos metidos en los código.
    Tengo una cuestión que la verdad no tengo ni pizca idea como solucionarlo que no encuentro la respuesta en ningún lugar en Internet.
    Acabo de instalar plugin Contact Form 7 y CF7 Customizer para poder personalizar el formulario. Pude cambiar el color de todos los campos menos el de botón y su texto correspondiente. Es decir, el color como tal está personalizado en CF7Customizer pero cuando ves el formulario tanto el color del botón texto no cambia.¿Cómo se puede solucionarlo?

    Gracias y un saludo

    • Fabián Vázquez 22/10/2016 en 09:47- Responder

      Hola Gosia.

      Con CF7 el botón debería de cambiar sin problema, como cualquier otro elemento. Solo se me ocurre que tu theme, tenga soporte para Contact Form y aplique los colores definidos por la plantilla. También podría ocurrir que el botón esté llamando a una clase css (generalmente definida por la plantilla) y esta prevalece sobre CF7.

      En cuanto al texto del botón es muy sencillo cambiarlo. Fíjate en la configuración del formulario, en la pestaña Formulario.

      El botón de envío suele ser el último y tiene este aspecto, [submit “ENVIAR”]. En este caso el texto que aparece es Enviar. Lo cambias por el que tu quieras. No quites las comillas. Guarda los cambios. ¡Eso es todo!

      Saludos

  17. Oscar 12/10/2016 en 12:29- Responder

    Hola Fabian, por error borre el plug-in contact-form y luego lo reinstalé, perdi el diseño del formulario y este era mu laborioso de realiza. Utilzo Contact for DB y tengo los datos guardados… ¿Hay alguna forma de recuperar el disño de formulario?, gracias

    • Fabián Vázquez 12/10/2016 en 13:06- Responder

      Hola Oscar. Si se desactiva, en principio la configuración debería mantenerse pero si has borrado el plugin tal vez se hayan borrado definitivamente. La verdad es que este punto no lo tengo muy claro. Hay plugins que dejan la configuración y otros la eliminan.

      Pero bueno, pero si lo has reinstalado y no te aparece casi con toda probabilidad se ha borrado la configuración guardada de Contact Form 7 en la base de datos. En ese caso, me temo que no vas a poder recuperarlos salvo que tengas una copia de seguridad anterior a la fecha de borrado y suponiendo que sea algo reciente, porque si la recuperas, perderías todo lo que hayas metido a posteriori.

      Siento no poder ayudarte mejor !!!

      Saludos

  18. Pilar Acebes 11/10/2016 en 23:37- Responder

    Hola Fabián. Una vez que he creado el formulario, ¿cómo puedo hacer que se convierta en PDF? Muchas gracias.

    • Fabián Vázquez 12/10/2016 en 08:24- Responder

      Hola Pilar. ¿Qué es lo que quieres convertir en PDF? El formulario que te envían los usuarios o que?

      • Pilar Acebes 12/10/2016 en 13:15- Responder

        Sí, somos un club deportivo, y una vez que nos llegan las solicitudes de inscripción, tenemos que imprimirlas y que nos la firmen. Si no, podemos tener problemas con la entidad bancaria.
        Nuestra web es http://www.trikantos.es, por si quieres verlo.
        Gracias Fabián

        • Fabián Vázquez 12/10/2016 en 13:25- Responder

          Hola Pilar. Te voy a contestar por email. Estate pendiente porque es muy importante para vuestra actividad.

          Saludos

  19. Vicente 11/10/2016 en 20:24- Responder

    Todo perfecto, Fabián
    Pero cuando envió el formulario de desde la web, no recibo todo el formulario a mi email.
    Me podrías ayudar?
    Un saludo de Vicente.

    • Fabián Vázquez 12/10/2016 en 08:21- Responder

      Hola Vicente. Perdona pero no te entiendo. Que quieres decir con que no recibes todo el formulario?

      • Vicente 12/10/2016 en 13:57- Responder

        Antes de todo gracias por tu presencia.

        Mi formularia es el siguiente:
        Nombre (requerido)
        [text* your-name]

        Cuidad (requerido)
        [text* your-name]

        Profesión (requerido)
        [text* your-name]

        [select* menu-830 “Muy satisfecho” “Satisfecho” “Aceptable” “Insatisfecho” “Muy insatisfecho”]

        Su opinión
        [textarea your-message]

        [recaptcha]

        [submit “Enviar”]

        Que debo hacer para recibir toda esta información completa en mi correo.

        • Fabián Vázquez 12/10/2016 en 14:04- Responder

          Hola Vicente. Esa información la tienes en la pestaña Formulario. En la pestaña de la derecha, Correo electrónico, debes configurarla y añadir los campos para que lo recibas en el correo.

          Lo tienes todo explicado en este mismo post. Fíjate bien!!!. Ve al apartado de Correo electrónico. Ahí está todo.

          Saludos

          • Vicente 14/10/2016 en 05:51

            Muchas gracias, Fabián.
            Ahora ya lo tengo claro.

  20. karina 05/10/2016 en 04:36- Responder

    Fabian te escribi hace poco porque no me llegaban los correos del contact form 7 de mi web. He cambiado donde dice From o De y he puesto el correo de wordpress (wordpress@karinaibelis.com) y asi me llegan a karinaibelis19@gmail.com (que es otro correo que tengo y que coloque en additional headers), pero quiero utilizar mi correo personal hola@karinaibelis.com. Como lo cambio? Donde dice Functions.php? En que lado esta eso?

    • Fabián Vázquez 05/10/2016 en 10:30- Responder

      Hola Karina. Si no te llegan los correos, es porque hay algún problema con la gestión de los correos en el servidor. Tendrás que hablar con los administradores del hosting. Lo de añadir ese código en functions.php, es para que cuando le llegue un correo al destinatario, no le aparezca como remitente WordPress, si no que aparezca tu correo o el que pongas. Debería ser un correo con el mismo dominio. Eso no solucionará el problema del envío…

      Debes averiguar si los correos se envían y no llegan o sencillamente no se envían.

      Si se envían, Contact Form 7 debería mostrar un mensaje que indica que el correo se ha enviado. En ese caso, probablemente están entrando en la carpeta de spam o sencillamente se están bloqueando en el servidor.

      Si no se envían y sale un mensaje que indica que no pudo ser enviado, entonces, es que hay un problema en la configuración de correo del servidor.

      Saludos

  21. karina 05/10/2016 en 03:21- Responder

    Hola! Buen tutorial y blog. Tengo un problema. Creo que configure como dices pero no me llegan los mensajes. Mi dominio es karinaibelis.com y solo he cambiado en la pestaña CORREO lo siguiente:
    Donde dice TO: puse mi correo hola@karinaibelis.com
    Donde dice FROM: puse mi correo hola@karinaibelis.com

    Solo eso hice y no me llegan los mensajes 🙁

    Agradecere mucho tu ayuda,

  22. AMPARO 30/09/2016 en 21:17- Responder

    Hola, gracias por el tutorial, es genial.
    Tengo un problemilla que no se como solucionar y se me ha ocurrido preguntarte ya que tu tutorial habla del CF7
    El problema es que probando el formulario me he dado cuenta de que no muestra mensajes o avisos de error, por ejemplo, hay varios campos requeridos, si no se rellenan, al darle a enviar, deberia mostrar un mensaje de error explicando que deben rellenar los campos requeridos, si no aceptan los terminos y condiciones tambien deberia aparece un mensaje explicando que deben aceptarlos, pero es que no muestra ni un solo mensaje de error, no envia el formulario pero tampoco aparece ningun mensaje, el unico mensaje que muestra es el de su mensaje a sido enviado (siempre que el cuestionario se haya rellenado completamente)
    ¿Sabes a que se debe que no muestre ninguno de los mensajes?

    • Fabián Vázquez 30/09/2016 en 21:52- Responder

      Hola Amparo. El mensaje debería salirte. Tiene que ser un problema de configuración o bien que tengas el apartado de mensajes vacío. Seguro que es una tontería, pero los campos requeridos dan un mensaje cuando no se cubren y se intenta enviar el formulario.

      Doy por hecho que los tienes marcados como requeridos. Otra cosa que se me ocurre, por pensar cosas, es que el color del texto y el fondo sea el mismo, pero no creo, salvo que lo hayas cambiado por css.

      La verdad es que sin verlo, no sabría decirte, pero la opción está ahi.

      Saludos

  23. Andres Moreno 26/09/2016 en 20:28- Responder

    Hola, muy buen tutorial, existe alguna manera de entregar un numero único cada vez que se ejecuta el formulario?

    Me refiero que toda vez que se presiona el botón enviar al formulario, este entregue un numero único incrementado puede ser un campo un tabla en la BD que almacene el ultimo valor y lo incremente cada vez , por ejemplo, y que se lo pueda enviar al cliente en el formulario, no se si existe algo en wordpress.

    • Fabián Vázquez 26/09/2016 en 22:13- Responder

      Hola Andrés. Contact Form 7 no guarda los datos en la Base de datos en origen. Lo que tu necesitas obligaría a crear una operativa al respecto. Conozco algunos plugins de formularios, que podrían hacer algo parecido, pero necesitarían de programación adicional. Generalmente el Nº ID en WordPress se aplica a cualquier tipo de entrada, al margen de su categoría. Si necesitas un campo específico de ID para el formulario habría que hacer una función que lo guarde en la base de datos y no se hasta que punto se podría integrar sin generar otros problemas.

      El sistema de formularios mas completo para WordPress actualmente es Gravity Forms. Pero también puedes ver Formidable forms, Ninja Forms y también es muy bueno Quform.

      Saludos

  24. Andres 26/09/2016 en 15:31- Responder

    Hola, muy buen tutorial, existe alguna manera de entregar un numero único cada vez que se ejecuta el formulario?

    • Fabián Vázquez 26/09/2016 en 19:12- Responder

      Hola Andres. Lo siento, pero no se a que te refieres. ¿Puedes explicarte mejor?

  25. Freddy 09/09/2016 en 00:31- Responder

    Hola buen día, quisiera saber si se existe una opcion de que al hacer clic en un boton “Agregar formulario”, este se cree dinamicamente y asi se puedan crear varios formularios.

    • Fabián Vázquez 09/09/2016 en 17:48- Responder

      Hola Freddy. Esa opción como tal no existe, pero puedes duplicar los formularios, de tal manera que, puedes usar el que crea por defecto o bien crear uno completo y luego duplicarlo. Puedes hacer tantos como quieras.

      Saludos

  26. Milagros 30/06/2016 en 14:38- Responder

    Muy bueno tu tutorial, pero tengo un problema a ver si me puedes ayudar. En un formulario tengo mis propia funciones en un archivo php y las llamo del siguiente modo [titulo] esta función me devuelve el titulo de la página, el problema es que tengo una función con las ciudades de España que es un select y antes llamaba directamente a la función [CiudadesEspana] y funcionaba pero he actualizado la versión y ahora no funciona. pongo
    [select ciudad [CiudadesEspana]] y nada he probado muchas maneras pero nada, sabes como podría solucionar el problema, te agradecería mucho tu ayuda.

    • Fabián Vázquez 30/06/2016 en 18:27- Responder

      Hola Milagros. La verdad es que así desde fuera es difícil saber que ocurre. Si antes funcionaba y ahora no funciona, es porque algo ha cambiado. Dices que has actualizado, pero que has actualizado, el plugin?. He visto tu web y no me parece que sea WordPress.

      Lo primero que hay que hacer, es descartar cosas. Si te es posible volver a la versión anterior y vuelve a funcionar, está claro que el problema reside en la actualización. Quizá hayan cambiado la manera de comunicarse (aunque es extraño). Yo empezaría por probar eso, para descartar que sea de cualquier otra cosa.

      Saludos

      PD. Revisa el apartado de “¿Qué opinan…?” en el home. Tienes un pequeño error en la palabra opinan.

Deje su comentario

Uso de cookies

Utilizo cookies para ofrecer una buena experiencia al usuario. Si continúas navegando aceptas su uso y la política de privacidad ACEPTAR