Este plugin permite crear formularios fácilmente para después añadirlos a nuestro proyecto de manera sencilla.

Instalación Plugin Contact Form 7

Si todavía no sabes como instalar plugins en WordPress te recomendamos visitar nuestra entrada «Instalar Plugin WordPress«.

Opciones de Contact Form 7

Una vez instalado y activado, aparecerá en nuestro menú izquierdo WordPress la opción «Contacto», donde haremos click para empezar la configuración de nuestro primer formulario. En este caso haremos un pequeño formulario de contacto para que nuestros usuarios puedan enviarnos consultas.

Por defecto este plugin ya viene con un formulario creado llamado «Formulario de contacto 1». Como podemos comprobar esta pantalla nos muestra un pequeño resumen de los formularios creados y su código abreviado, el cual bastará copiar y pegar en la página o entrada donde queramos que se muestre el formulario en cuestión. Desde esta pantalla también podremos eliminar y/o editar los formularios que vayamos creando.

Plugin Contact Form 7

A pesar de que podemos realizar modificaciones en este formulario para adaptarlo a nuestro gusto, vamos a crear uno desde cero para explicar el proceso completo. Por este motivo pulsaremos en el botón «Añadir nuevo».

Plugin Contact Form

El primer paso será darle un nombre a nuestro formulario en la parte superior, esto nos servirá para identificar el formulario. También podremos ver distintas pestañas que nos permiten ajustar las configuraciones de nuestro formulario. Antes de empezar a crear nuestro formulario explicaremos las opciones que tenemos.

  • Formulario

    • Aquí construiremos nuestro formulario a través de los campos predefinidos que nos aporta este plugin. También podemos usar código HTML para mejorar o añadir elementos. Como vemos al crear u nuevo formulario ya nos aparecen varios campos creados automáticamente y también aparece código HTML <label>, el cual muestra una etiqueta que se mostrará antes de el campo que el usuario deberá rellenar. Los campos entre corchetes «[ ]», son los campos predefinidos por el plugin Contact Form que ahora pasamos a ver individualmente:
      • Texto: Crear un campo que permite introducir texto. Lo usaremos para poner nombres de usuario, nombre de empresa, asunto, etc
        • Campo Contact Form Plugin
        • Tipo de campo: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Valor predeterminado: Permite que el campo tenga un contenido ya introducido.
        • Use este texto como marcador del campo: Esta casilla marcada hará que el texto introducido en «Valor predeterminado» se muestre en el campo pero su valor no será utilizado, normalmente se utiliza para dar alguna información de ayuda o ejemplo sobre los datos que el usuario deberá introducir.
        • Este campo requiere el nombre del autor: Para que esta opción funcione, debemos activar el plugin Akismet. Esta opción ayuda a evitar spam en el formulario obligando a los datos a ser verificados en el servidor de Akismet.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Correo Electronico: Este campo solo permitirá direcciones de correo válidas.
        • Campo Contact Form Plugin
        • Tipo de campo: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Valor predeterminado: Permite que el campo tenga un contenido ya introducido.
        • Use este texto como marcador del campo: Esta casilla marcada hará que el texto introducido en «Valor predeterminado» se muestre en el campo pero su valor no será utilizado, normalmente se utiliza para dar alguna información de ayuda o ejemplo sobre los datos que el usuario deberá introducir.
        • Este campo requiere el nombre del autor: Para que esta opción funcione, debemos activar el plugin Akismet. Esta opción ayuda a evitar spam en el formulario obligando a los datos a ser verificados en el servidor de Akismet.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • URL: Este campo solo permitirá direcciones de internet válidas.
        • Campo Contact Form Plugin
        • Tipo de campo: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Valor predeterminado: Permite que el campo tenga un contenido ya introducido.
        • Use este texto como marcador del campo: Esta casilla marcada hará que el texto introducido en «Valor predeterminado» se muestre en el campo pero su valor no será utilizado, normalmente se utiliza para dar alguna información de ayuda o ejemplo sobre los datos que el usuario deberá introducir.
        • Este campo requiere el nombre del autor: Para que esta opción funcione, debemos activar el plugin Akismet. Esta opción ayuda a evitar spam en el formulario obligando a los datos a ser verificados en el servidor de Akismet.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Teléfono: Este campo solo aceptará números.
        • Campo Contact Form Plugin
        • Tipo de campo: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Valor predeterminado: Permite que el campo tenga un contenido ya introducido.
        • Use este texto como marcador del campo: Esta casilla marcada hará que el texto introducido en «Valor predeterminado» se muestre en el campo pero su valor no será utilizado, normalmente se utiliza para dar alguna información de ayuda o ejemplo sobre los datos que el usuario deberá introducir.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Número: Este campo solo aceptará números.
        • Campo Contact Form Plugin
        • Tipo de campo:
          • Selector de valor: el campo permitirá introducir un valor.
          • Selector deslizante: aparecerá una barra deslizante para seleccionar el valor.
          • Campo requerido: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Valor predeterminado: Permite que el campo tenga un contenido ya introducido.
        • Use este texto como marcador del campo: Esta casilla marcada hará que el texto introducido en «Valor predeterminado» se muestre en el campo pero su valor no será utilizado, normalmente se utiliza para dar alguna información de ayuda o ejemplo sobre los datos que el usuario deberá introducir.
        • Rango: Podemos indicar un valor mínimo y un máximo para restringir los valores que el usuario pueda introducir.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Fecha: Este campo solo aceptará fechas.
        • Campo Contact Form Plugin
        • Tipo de campo: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Valor predeterminado: Permite que el campo tenga un contenido ya introducido.
        • Use este texto como marcador del campo: Esta casilla marcada hará que el texto introducido en «Valor predeterminado» se muestre en el campo pero su valor no será utilizado, normalmente se utiliza para dar alguna información de ayuda o ejemplo sobre los datos que el usuario deberá introducir.
        • Rango: Podemos indicar una fecha mínimo y una máximo para restringir los valores que el usuario pueda introducir.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Área de texto:Este campo creará un área de texto, normalmente utilizada para que el usuario pueda dejar mensajes.
        • Campo Contact Form Plugin
        • Tipo de campo: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Valor predeterminado: Permite que el campo tenga un contenido ya introducido.
        • Use este texto como marcador del campo: Esta casilla marcada hará que el texto introducido en «Valor predeterminado» se muestre en el campo pero su valor no será utilizado, normalmente se utiliza para dar alguna información de ayuda o ejemplo sobre los datos que el usuario deberá introducir.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Menú desplegable: Muestra una lista de opciones.
        • Campo Contact Form Plugin
        • Tipo de campo: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Opciones: Aquí indicaremos las opciones del desplegable. Una opción por linea.
          • Permitir selecciones múltiples: permite seleccionar más de una opción.
          • Insertar un elemento en blanco como primera opción: muestra una primera opción en blanco para dar la posibilidad de no elegir ninguna.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Casillas de verificación: Muestra una lista de opciones seleccionables con una casilla.
        • Campo Contact Form Plugin
        • Tipo de campo: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Opciones: Aquí indicaremos las casillas de verificación que se mostrarán. Una opción por linea.
          • Pon primero una etiqueta, la casilla de verificación al final: modifica el orden de aparición de la etiqueta y el campo.
          • Envolver cada elemento con la etiqueta <label>: Añade el código HTML <label>.
          • Hacer que las casillas de verificación sean exclusivas: permite que únicamente podamos elegir una de las opciones.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Botones de selección: Muestra una lista de opciones seleccionables con un botón.
        • Campo Contact Form Plugin
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Opciones: Aquí indicaremos las casillas de verificación que se mostrarán. Una opción por linea.
          • Pon primero una etiqueta, la casilla de verificación al final: modifica el orden de aparición de la etiqueta y el campo.
          • Envolver cada elemento con la etiqueta <label>: Añade el código HTML <label>.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Aceptación: Muestra una casilla de verificación. Esta es por defecto es obligatoria.
        • Campo Contact Form Plugin
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Condición: Aquí introduciremos el texto que queremos que aparezca como condición.
        • Opciones:
          • Hacer opcional esta casilla de selección: evita que sea obligatorio marcar esta casilla para continuar.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Cuestionario: Permite crear un cuestionario.
        • Campo Contact Form Plugin
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Preguntas y respuestas: Aquí indicaremos las preguntas y respuestas correctas que queremos mostrar.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • reCAPTCHA: Este campo sirve para evitar que se puedan utilizar programas que realicen continuos envíos bloqueando nuestro proyecto. Para poder utilizar esta opción primero debemos haber configurado las claves API de Google en la opción «Integracion» del plugin Contact Form 7.
        • Campo Contact Form Plugin
        • Tamaño: tamaño del captcha que aparecerá.
          • Normal
          • Compacto
        • Tema: tema del captcha que aparecerá.
          • Claro
          • Oscuro
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Multifile: Este campo creará un botón que nos permitirá subir varios ficheros simultáneamente para ser enviados junto a los datos del formulario. Este campo no viene por defecto con el plugin WordPress. Para disponer de este campo debemos instalar el plugin Multiple Upload Field for Contact Form 7. Puede consultar nuestra entrada «Instalar plugin WordPress» para instalar este plugin.
        • Campo Contact Form Plugin
        • Tipo de campo: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Límite de tamaño de archivo (bytes):El límite máximo del archivo que permitiremos subir. Hay que tener en cuenta que este valor será el permitido por el hosting donde tengamos nuestro proyecto alojado.
        • Accept input attribute: mostrara al usuario solo el tipo de ficheros que indiquemos.
        • Add accept wildcard /*:
        • Formatos de archivo aceptados: Este valor nos permite indicar que tipo de ficheros (jpg, png, txt, doc,…) serán permitidos.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Archivo: Este campo creará un botón que nos permitirá subir un fichero para ser enviado junto a los datos del formulario.
        • Campo Contact Form Plugin
        • Tipo de campo: Si marcamos esta casilla el usuario no podrá enviar los datos del formulario de contacto hasta que se haya escrito algo en este campo.
        • Nombre: Nombre que le asignaremos al campo para identificarlo.
        • Límite de tamaño de archivo (bytes):El límite máximo del archivo que permitiremos subir. Hay que tener en cuenta que este valor será el permitido por el hosting donde tengamos nuestro proyecto alojado.
        • Formatos de archivo aceptados: Este valor nos permite indicar que tipo de ficheros (jpg, png, txt, doc,…) serán permitidos.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
      • Enviar: Botón que enviará los datos del formulario.
        • Campo Contact Form Plugin
        • Etiqueta: Texto que aparecerá en el botón enviar.
        • Atributo de ID: Permite indicar un ID HTML para este campo, el cual servirá para modificaciones CSS.
        • Atributo de clase: Permite indicar un clase HTML para este campo, el cual servirá para modificaciones CSS.
  • Correo Electrónico

    • Esta pestaña nos permite configurar a quien y como se enviarán los emails.
      • Campo Contact Form Plugin
      • Aquí también aparecerán los campos que hayamos incluido en nuestro formulario utilizando sus nombres.
        • Campo Contact Form Plugin
      • Para: dirección a quien enviaremos el elmail
      • De: indicaremos quien envía el correo.
      • Asunto: el asunto del correo.
      • Cabeceras adicionales: en caso de que queramos realizar un envío a más de un email.
      • Cuerpo del mensaje: Aquí pondremos el texto del mensaje.
        • Excluir las lineas con etiquetas de correo electrónico vacías en la salida.
        • Usar contenido de tipo HTML: enviaremos el email como código HTML en lugar de texto plano. A menos que necesites una configuración especial recomendamos marcar esta casilla.
      • Archivos adjuntos: Aquí pondremos los ficheros adjuntos que queramos enviar junto al email. Si en el formulario has utilizado los campos para incluir ficheros adjuntos, este es el lugar adecuado para incluirlos.
      • Correo electrónico (2)
        • Usar correo electrónico (2): nos permite crear otro envío de email.
  • Mensajes

    • Aquí configuraremos los mensajes que aparecen cuando el usuario no introduce los datos correctamente en un campo o cuando el email se envía correctamente, entre otros.
    • Campo Contact Form PluginCampo Contact Form Plugin
  • Ajustes adicionales

    • Esta pestaña nos permite introducir código adicional para nuestro formulario. Podrás encontrar mas información sobre estos códigos en la página de soporte de Contact Form.

Crear Formulario de contacto

Bien, estamos listos para empezar a crear un formulario de contacto, por lo que iremos a nuestro menú de WordPress y pincharemos en «Contacto»->»Añadir nuevo».

Primero indicaremos un nombre para nuestro formulario, como ejemplo lo llamaremos «Formulario de contacto web».

El segundo paso será añadir los campos que queramos que aparezcan, en nuestro caso solo queremos que el usuario nos indique

  • nombre: para dirigirnos a él
  • correo electrónico: para poder contactar con él
  • Lista desplegable: para seleccionar un tema más específico.
  • Área de texto: para que el usuario pueda hacer su consulta
  • Adjuntar ficheros: para que pueda enviarnos alguna imagen de ejemplo
  • Aceptación: clausulas legales que el usuario deberá aceptar para cumplir ley RGPD (protección de datos).
  • reCAPTCHA: para evitar spam
  • Enviar: botón para enviar el formulario

Nuestro formulario quedará de este modo:

Campo Contact Form PluginUna vez añadidos los campos presionaremos el botón «Guardar».

Ahora configuraremos el email, por lo que iremos a la pestaña «Correo electrónico» e introduciremos los nombres de los campos para que tengamos toda la información en el email que se nos enviará quedando de este modo:

Campo Contact Form Plugin

También podemos enviar un email al usuario con la información, si este es el caso marcaremos la casilla «Usar correo electrónico (2)» y rellenaremos los campos igual que hicimos con el primero:

Campo Contact Form Plugin

En la pestaña «Mensajes» no modificaremos ninguno de los mensajes, pero si lo deseas bastará con editar los textos que en esta pestaña aparecen. Tampoco añadiremos ningún ajuste adicional.

Finalmente guardaremos el formulario presionando el botón «Guardar». Ahora ya podremos utilizar el código abreviado para incluir nuestro formulario en la página que queramos.

Compartir este contenido