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.
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.
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).
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.
Una vez que tenemos el campo duplicado modificamos las etiquetas.
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.
Se abrirá una nueva venta como lo indica la siguiente imagen y le hacemos clic en INSERTAR.
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.
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.
Y la pegamos en el cuerpo del mensaje que figura más casi al final de la página.
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!
