Como crear un formulario de contacto con WordPress

Una vez que nuestra página wordpress va tomando forma, es la hora de añadir un formulario de contacto. Un formulario de contacto permitirá que nuestros visitantes se comuniquen con nosotros de forma sencilla.

Como suele ser la norma para añadir nuevas funcionalidades a nuestra web, usaremos un plugin. En concreto, Contact Form 7, uno de los plugins más extendidos para añadir un formulario de contacto a una web. Instalamos este plugin mediante el método que ya vimos.

Creando un formulario de contacto

Una vez instalado el plugin Contact Form 7 veremos que en el menú lateral nos aparecerá una nueva sección: Contacto. Esta sección funciona de modo similar a los carruseles de imágenes. Es decir, un listado y una opción para añadir. La mayoría de los plugins de WordPress funcionan de forma parecida, como ya comenté.

Si nos vamos al listado, veremos que la instalación de Contact Form 7 ya viene con un formulario de contacto creado de antemano.

Contact Form 7, WordPress

Si recordáis las instrucciones para crear un carrusel de imágenes, recordaréis que una vez creado el carrusel teníamos que copiar el shortcode y añadirlo a la página donde quisiéramos incluir el carrusel. Pues en este caso haremos lo mismo. En la segunda columna del listado tendremos un código muy parecido a este:

[contact-form-7 id=”46″ title=”Formulario de contacto 1″]

Lo copiamos y lo pegamos en la página que creamos en su momento para contacto. Debemos quedarnos con algo similar a la siguiente captura de pantalla.

Crear formulario contacto wordpress

Podemos ver el formulario funcionando en la página correspondiente:
http://angelaparicioprogramador.com/crearwebconwordpress/mitiendadebicis/contacto/

Personalizando el formulario de contacto.

El formulario de contacto por defecto está muy bien, pero seguramente queramos modificarlo un poco o añadir nuevos campos. Para ello vamos al listado de formularios de contactos y hacemos click en el formulario de ejemplo, como si fuera una entrada.

Nos aparecerá algo similar a la siguiente imagen.

Editar formulario contacto en wordpress

 

Tenemos cuatro pestañas. Formulario, Correo electrónico, Mensajes y Ajustes adicionales. Vamos a ver aquí las dos primeras. La tercera pestaña es para cambiar los mensajes que recibe el usuario y la última son parámetros avanzados.

Como ejemplo, vamos a añadir un teléfono de contacto obligatorio. Podemos ver que el formulario consta de un nombre, un correo electrónico, un asunto, un mensaje y el botón de Enviar. Para añadir el teléfono, ponemos el cursor debajo del correo electrónico y pulsamos en el botón de “teléfono” (Arriba, el cuarto)

wordpress telefono contacto en formulario

 

Como queremos que el teléfono sea obligatorio, marcamos el control “Tipo de campo: Campo requerido”. De forma opcional, podemos cambiar la palabra “tel-992” por “telefono”, para que nos resulte más claro (Nota: En tu caso lo más seguro es que el número 992 sea distinto. Pero será algo del tipo tel-xxx)

Le damos a insertar y el código quedará en nuestro formulario. Si nos fijamos, el resto de entradas del formulario están rodeados de unos códigos que indican <label> </label> y tienen el nombre del campo. Hacemos lo mismo. En la siguiente captura podéis ver el resultado que buscamos:

Nuevo formulario contacto

Explicando un poco. Cada entrada del formulario va entre los dos códigos <label> y </label>. Esto es html básico y sirve para mejorar un poco el aspecto visual del formulario. Si no sabes html, simplemente recuerda ponerlos al principio y al final, como en el ejemplo.

Después tenemos el texto que verá el usuario para cada campo: Nombre (requerido), Tu correo electrónico (requerido), etc. Y entre corchetes, otros shortcodes. En este caso los que generan los campos de formularios. Aunque estos códigos los podemos crear con los botones de arriba, no está de más entender como funcionan.

La primera palabra es el tipo de campo (text, tel, textarea, etc) y la segunda el nombre que usaremos para poder enviar después el correo. Los que llevan un * detrás del tipo de campo indican que el campo es obligatorio. Por tanto, si queremos que el teléfono deje de ser obligatorio, solo tenemos que quitar el *. Y si queremos que el texto del mensaje sea obligatorio, pues ponemos un * detrás de textarea.

Y acabamos con el botón de enviar (submit). Podemos cambiar el texto entre comillas, “Enviar” por otro que prefiramos como “Contactar” o lo que creamos conveniente.

Personalizando el correo de contacto

La siguiente pestaña que vamos a ver es la de “Correo electrónico”. Aquí podemos redactar el correo que recibiremos. Su aspecto será similar al siguiente.

Formulario de contacto

El primer campo, Para, es la dirección donde queremos recibir el correo. El segundo, es desde que dirección se enviará el correo. Para evitar problemas con spam y correos no deseados es importante que este correo sea del mismo dominio al que pertenece la web.

El siguiente campo es el asunto. Vemos que tenemos unos código del tipo [your-subject]. Estos códigos se sustituirán por el texto introducido por el usuario. En este ejemplo, si el usuario pone en el campo sujeto que vimos antes el texto “Quiero reparar mi bici”, nos llegará un correo con el asunto: Mi tienda de bicis “Quiero reparar mi bici”

Más adelante tenemos las cabeceras adicionales. Esto es configuración algo más avanzada, pero nos quedaremos con el código por defecto. ¿Para que sirve? Sirve para que cuando recibamos un correo de contacto al darle el botón de “Responder” respondamos al mail que puso el usuario en el formulario de contacto.

Y finalmente está el texto del correo. Lo normal es incluir aquí todos los campos. Nosotros hemos añadido un campo, el teléfono. Con lo que deberemos modificar este texto de la siguiente manera:

Contact form 7 personalizar correo

Con esta pequeño cambio recibiremos el teléfono del usuario.

Y ya solo nos queda un último detalle. Al final tenemos una opción “Usar correo electrónico (2)”. Si la activamos no saldrá un segundo formulario para el envío de correo. Esta opción se suele usar para enviar un correo de confirmación a la persona que ha usado nuestro formulario de contacto. Si ponemos en el campo Para el código [your-mail], este segundo correo se enviara a la dirección indicada por el usuario. Con esto podemos enviar un acuse de recibo, que siempre da tranquilidad al que se pone en contacto a través de un formulario web.

Contact Form 7 y conclusiones finales

Contact Form 7 puede no ser uno de los plugins más sencillos del mundo, pero es lo suficiente sencillo y flexible como para ser uno de los plugins más usados de todos los disponibles. Con este plugin podemos además crear varios formularios de contacto. Uno para ventas y otro para contacto a secas, por ejemplo.

Hay algunas plantillas que tienen formularios de contactos incorporados. Suelen ser más bonitos, aunque no tan flexibles. Además hay que tener cuidado con estos formularios incluidos, pues pueden tener fallos de seguridad que nos pueden causar problemas por envío de spam. Como consejo general es importante elegir plugins ampliamente usados por la comunidad de WordPress. Esto nos evitará la mayoría de problemas de seguridad.

Deja un comentario