Wordpress Logo

Configurar Contact Form 7 para WordPress

Sepa como configurar Contact Form 7 para WordPress con las características del reCaptcha de Google y validación del formulario.

Muchos usuarios utilizan este famoso plugin para crear un página de «Contactos» en su blog de WordPress, pero la última actualización puede haberlos sorprendido con el siguiente mensaje de error:

This contact form has a configuration error.

Probablemente sea por que hay alguna etiqueta HTML que este mal ubicada, sea innecesaria o necesite ser actualizada. En mi caso, tuve que crear todo el formulario de nuevo usando el generador de etiquetas que esta en la pestaña «Formulario» para desaparecer dicho error.

Configurar Contact Form 7 para WordPress

Para crear el formulario de contactos correctamente, sigue estos pasos:

1. Ve a «Formulario» – «Formulario de contacto» y haz clic en el formulario creado. Si no tienes uno, deberás crear uno.

Contact Form 7 - Crear contacto

2. Deberás escribir un texto descriptivo que se relacione con con el campo que deseas agregar. Por ejemplo: Agregué la etiqueta «Nombre» y luego presionamos el botón «Texto».

Contact Form 7 - Agregar campo

3. Luego se te pedirá agregar un ID al campo para que se diferencie del resto. En este caso, al campo de «Nombre» le puse un ID de «your-name» y para terminar presionas «Insertar».

Contact Form 7 - Propiedades del campo

4. Repite los pasos hasta agregar todos los campos que necesites. Para mi formulario agregué los campos: Nombre, Correo, Asunto, Tema y el botón enviar. Me quedo como la siguiente imagen

Contact Form 7 - Plantilla

Y con dar clic en «Guardar» tendrás tu formulario de contactos listo.

Configurar reCaptcha en Contact Form 7

Contact Form 7 viene con opción para integrar el reCaptcha y protegernos del spam. Su configuración y activación se realiza de la siguiente manera:

1. Ve a «Contacto» – «Integración»

Contact Form 7 - Integración con reCaptcha

2. Se le pedirá llenar 2 claves, una clave del sitio y una clave secreta. Estas claves lo obtenemos del sitio https://www.google.com/recaptcha

3. En la página de reCaptcha, ingresa a la opción de «Admin Console».

reCaptcha - Admin Console

4. Crear nuevo sitio presionando el símbolo de «+».

reCaptcha - Agregar sitio

5. Se tiene que llenar los datos que le solicita hasta que reCaptcha le muestre las 2 claves.

6. Dichas claves tendrán que ser pegados en la configuración de Contact Form 7.

Contact Form 7 - reCaptcha keys

Me aparece un mensaje de error diciendo «This email address does not belong to the same domain as the site»

Esto se debe a que ya no tienes que colocar el correo del usuario en el campo «De» de la pestaña «Correo electrónico», sino que tienes que colocar un correo electrónico que sea del mismo dominio de tu sitio web. Ahora el correo del usuario se debe de colocar en el campo «Cabeceras adicionales», como la siguiente imagen:

Configurar Contact Form 7 para WordPress

OJO: En «Cabeceras adicionales» debes ingresar:

Reply-To: [Correo]

De lo contrario seguirá mostrando error. Además pueden ver en la imagen de arriba que todas las etiquetas que he creado en la pestaña «Formulario» se visualizan ahora en «Correo electrónico» y se han asignado a los campos que corresponde. Una vez que lo guardas, ya no debe de aparecer errores.

¿Cómo responder si alguien me ha enviado un mensaje desde el formulario contacto?

Si alguien te escribe usando el formulario de contacto, en tu correo aparecerá la dirección de tu sitio web, pero cuando le das click en «Responder», aparecerá el correo del usuario quién te envió el mensaje.

Espero te haya servido. Puedes dejarme un comentario si tienes alguna duda.

Volver arriba