Tutorial de Contact Forms 7 | Funtor

Tutorial de Contact Forms 7

Hoy les traigo un nuevo tutorial para crear formulario de contacto con Contact Forms 7. Por si no te suena de nada este plugin es uno de las más utilizados de las extensa librería de WordPress. Contact Forms 7 cuenta con más de 20 millones de descargas.

Para empezar tenemos que instalar contact form 7 en nuestro WordPress,  ya sabes que como siempre para aquellos que no son amantes de la lectura aquí tienes un Vídeo Tutorial del funcionamiento de Contact Form 7.

 

Una vez que tenemos instalado y activado el plugin nos dirigimos al nuevo botón de contacto que aparece en el menú principal de nuestro WordPress como lo indica la siguiente imagen.

Tutorial Contact Form 7

Botón de Contacto – Contact Form 7

Al instalar Contact Form 7, se crea un formulario básico por defecto, podemos aplicar este formulario a una de nuestras paginas de WordPress copiando el siguiente código y pegándolo en el cuerpo de una de nuestras páginas.

Código contact form 7

Código generado por Contact Form 7

shortcode contact form 7

Pegar el Shortcode dentro de la página donde queremos que aparezca el formulario.

Como añadir un nuevo campo en el formulario

Como hemos visto el formulario que implementamos hasta el momento es básico. Si quisiéramos añadir nuevos campos lo podemos hacer editandolo. Para eso debes dirigirte nuevamente al botón de contacto y hacer clic sobre el nombre del formulario (formulario de contacto 1).

La primera pestaña (FORMULARIO) es la que muestra el codigo HTML del formulario de contacto (no es necesario que sepas HTML).

html contact form 7

Código HTML del formulario de Contacto

Supongamos que queremos añadir un nuevo campo dentro del formulario solicitándole el número de teléfono al usuario. Para eso copiaremos algunas de las lineas que ya existen dentro del HTML y la duplicaremos, de esa manera evitamos escribir código HTML.

Duplicar Campo

Duplicamos un campo y lo modificamos.

Una vez que tenemos el campo duplicado modificamos las etiquetas.

modificar etiqueta

Y ahora modificamos el SHORTCODE que esta entre corchetes [ ]. Para eso borramos el ShortCode actual en este caso borrariamos lo que dice [text your-subject] y con el cursor ubicado en ese mismo sitio haríamos clic sobre el botón que dice TELÉFONO en la barra superior del editor.

Añadir Teléfono

Se abrirá una nueva venta como lo indica la siguiente imagen y le hacemos clic en INSERTAR.

añadir campo telefono

Añadiendo un nuevo campo de teléfono al formulario.

El código quedaría así:
<p>Teléfono:<br />
[tel tel-605]</p>

Solo restaría indicarle a Contact Form 7 que ese dato tiene que ser enviado por email. Recuerda ir guardando cada modificación que realizas dentro del formulario siempre.

La segunda pestaña (CORREO ELECTRÓNICO) es la encargada de recoger toda la información que proporcione el usuario al completar el formulario y enviarla por correo electrónico.

Envió de Formulario

Configuración del envió del email en Contact Form 7

Una vez dentro de las segunda pestaña para que contact form 7 recoja el teléfono que el usuario carga en el formulario debemos copiar la nueva etiqueta generada como lo indica la siguiente imagen.

etiqueta telefono

Y la pegamos en el cuerpo del mensaje que figura más casi al final de la página.

Pegar Teléfono

Ahora ya tienes el nuevo campo añadido y cuando un usuario complete el formulario recibirás toda la información en tu cuenta de correo electrónico.

Si este tutorial te ha sido útil anímate y dale a Compatir! Y si tienes alguna duda o sugerencia deja un comentario!

Tutorial de Contact Forms 7
¡Valorame!

Seguir

Acerca del Autor

Apasionado del Marketing Online, Blogger y Formador. Mi intención es compartir mis conocimientos al mismo tiempo que sigo aprendiendo sobre un mundo que evoluciona de forma constante, formo parte del 3%.

(11) comentarios

Añade tu Respuesta

Centro de preferencias de privacidad

    Cookies Impresindibles

    Se usan para almacenar tu nombre, correo, IP y demás datos que dejas en los formularios de comentarios, contacto, acceso y tus preferencias de privacidad.

    Siempre activo AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, comment_author, comment_author_email, comment_author_url, rated, gdpr, gawdp

    Cookies de terceros

    Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación, si ya estás suscrito al boletín y los elementos compartidos en redes sociales

    _ga, _gid, fbq('track', 'PageView'),
    _ga, _gid
    fbq('track', 'PageView'),