¿Quieres aprender a poner formularios de contacto de forma gratuita, rápida, fácil y que además te queden muy pro?✨
¡En Llobregat Digital te enseñamos como hacerlo! ⏬Clica en el video o sigue leyendo el post⏬

1. Instalando los plugins

Lo primero de todo que vamos a hacer va a ser instalar el plugin Contact Form 7.

⇒Contact Form 7

Este es el plugin con el que crearemos y editaremos los formularios a nuestro antojo. Funciona mediante shortcode (luego te explicamos que es un shortcode😉) y su uso es muy sencillo, tan solo sigue los pasos y en un abrir y cerrar de ojos tendrás tu propio formulario de contacto a tu gusto.

Para obtener el plugin Contact Form 7, tan solo ve al panel izquierdo de tu escritorio de WordPress, ve a Plugins▶Añadir nuevo plugin▶ Luego escribe Contact Form 7, Instala y Actívalo (no te olvides que si solo Instalas pero no Activas tan solo tendrás el plugin ahí pero no te estará funcionando🤓).

2. Creando el formulario

Ya con todo esto tenemos todo lo necesario para poder crear plugins, así que desde el panel izquierdo del escritorio de WordPress nos vamos a Contacto. Podemos Editar✏ el de ejemplo o sencillamente Añadir un nuevo➕.

Lo primero que debemos saber es que❌ NO crearemos ni editaremos los formularios en el editor de Bloques❌, si no fuera, en su correspondiente pantalla, y posteriormente en el Editor de Bloques lo que haremos será «llamar» al formulario mediante un shortcode (que sí, que llegado el momento se explicará que es un shortcode😜).

En este tuotrial crearemos uno nuevo, así que le damos a Añadir nuevo.

En realidad ya nos viene un formulario bastante básico, todo sea dicho, con los siguientes elementos:

La cuestión es que con Contact Form 7 podemos hacer de forma sencilla lo siguiente:

Aquí lo más destacable es remarcar que a EXCEPCIÓN del botón de Enviar, todos los elementos deben estar cada uno dentro de un label.

♦<label > </label>

Para los que no estén metidos en el mundo del diseño web, haremos una breve explicación de lo que significa estar dentro de una etiqueta:

Con todo esto, entonces debe quedar clarito que cada elemento pues estará dentro de <label> </label>.

⇒Editar campos existentes

Bien, el primer campo que tenemos es el del nombre, el cual normalmente vemos denominado como Nombre, los formularios suelen ser serios, aclaradores y aburridamente invariables con lo que por lo general en todos los formularios los campos suelen llamarse igual😑(que rollo...). Bueno, pero como estamos aprendiendo, nos podemos permitir un poco variarlo ligeramente y luego si eso, ya lo volveremos a cambiar. ¿Cómo cambiar la palabra «Nombre» por «¿Cómo te llamas?» Muy fácil. El texto que viene justo después de <label> ese texto es lo que veremos en el formulario como nombre visible del elemento, tan solo cambiamos «Nombre» por lo que queramos que aparezca.

¿Y qué hay del campo Apellidos? No sale…😲 ¡Qué desastre de formulario! No pasa nada. Es taaan fácil como hacer un copia/pega y unas minimodificaciones.

Copia todo el elemento incluidas las etiquetas label así:

<label> Tu nombre
    [text* your-name autocomplete:name] </label>

Y pégalo abajo, indicando esta vez que se escriba el apellido/apellidos:

<label> Tu nombre
    [text* your-name autocomplete:name] </label>

<label> Tus apellidos
    [text* your-surname autocomplete:surname] </label>

Es importante que ahora la etiqueta se llame your-surname como se ve en el ejemplo en vez de your-name para que la base de datos no lo recoja también como nombre, si no como un apellido/apellidos. ‼

<label> Asunto
    [text* your-subject] </label>

<label> Tu mensaje (opcional)
    [textarea your-message] </label>

<label> Asunto
    [text* your-subject] </label>

<label> Tu mensaje (opcional)
    [textarea your-message] </label>

<label> Asunto
    [text* your-subject] </label>

<label> Tu mensaje (opcional)
    [textarea your-message] </label>

<label> Asunto*
    [text* your-subject] </label>

<label> Tu mensaje 
    [textarea your-message] </label>

A partir de aquí y siguiendo este simple método puedes añadir los campos que quieras y modificarlos a tu antojo. Fácil, eh?😊

⇒Añadir campos

Bueno, ahora que ya hemos aprendido a editar campos del formulario como unos pros de los formularios?😎, es hora de añadir uno nuevo. Tan simple como clicar en uno de los botoncitos de arriba según lo que queramos. Vamos aponer otro imprescindible: El número de Teléfono. Pero OJO👁, que no le damos al botón ❌Teléfono, le damos a Número.

Una vez cliquemos sobre el botón nos aparece una ventana con las configuraciones del nuevo campo. le podemos indicar la obligatoriedad, el mínimo y máximo de cifras permitidas e incluso el texto por defecto que aparecerá dentro del campo, un +34 por ejemplo. Ahora ojito, una vez le demos a Insertar vamos a encerrar este campo dentro de <label></label> y detrás de <label> le pondremos el nombre que queremos mostrar, por ejemplo, «Número de Teléfono«.

<label> Telefonito
[number* tlf min:9 max:9 id:tlfnumber placeholder "+34"]</label>

De hecho, este campo también puede ser editado de la misma manera que hemos editado los anteriores. Por ejemplo, ahora mismo es un campo obligatorio, podemos convertirlo en opcional quitando *. Podemos cambiar el texto que por defecto aparece dentro del campo cambiando el +34 por algo como «Aqui va tu tlf.» O eliminarlo borrando placeholder «+34».

<label> Tu nombre, por favor:
    [text* your-name autocomplete:name placeholder:"Rozzita"] </label>

<label> Apellidos, si eres tan amable:
    [text* your-name autocomplete:name placeholder:"Mascarponne"] </label>

Con todo esto, ahora también sabes añadir nuevos campos a tu fabuloso formulario de contacto, y además has aprendido a editarlo un poco más. Ya queda poco para que tengas tu formulario de contacto superprofesional😎🌟.

3. Correo

Vale, ya tienes tu formulario, y sí, seguramente te mueres de ganas de ver como está quedando. No te preocupes que te está está quedando muy chulo, ya llegará el momento de verlo. Ahora por si acaso y antes de seguir con el siguiente paso, si no lo has hecho ya, por favor dale a Guardar💾, tienes un botoncito abajo y otro al lado derecho, así que elige cual te parece más bonito (son los 2 iguales😏) y dale a Guardar ¿Porqué? Por que la ley de Murphy dice que la probabilidad de que ocurra algún problema que te haga perder tu progreso es inversamente proporcional al número de veces que hayas guardado tu trabajo. No lo digo yo, lo dice ese tal Murphy, pídele explicaciones a él 🤓.

Y ahora que ya te has asegurado de que tu esfuerzo y sudor trabajando arduamente en este hermoso formulario no se vaya al garete, es hora de ponernos con los (🥁 redoble de tambores ) El Correo📧. Vale, tienes tu formulario. ¡SÍ! Es precioso ¡Por supuesto! Pero… Ahora mismo aunque los usuarios lo rellenen y le den a Enviar….. ¿Enviar a dónde? Ahora mismo a NINGÚN SITIO❌ . Debes poner un correo donde puedan llegar los correos.

Tan sencillo como ir a la pestaña Correo, y en la casilla de «Para:» poner el correo de empresa donde debe llegar el correo de los clientes. Luego, por tal de que cuando nos lleguen mails de los clientes enseguida podamos ver que proceden del formulario, en Asunto sustituimos your-subject por formulario de contacto o algo parecido. Y en realidad no hace falta más que eso. Así que es hora de guardar y por fin por fin pooor fiiin, poder ver como nos ha quedado nuestro fabuloso formulario realizado con Contact Form 7🌟.

4. Publicar el formulario

Como se ha dicho anteriormente y como hemos podido ver, el formulario no se edita desde el constructor de bloques de WP, lo hemos construído y editado desde fuera con el plugin Contact Form 7 y ahora desde el constructor de bloques lo que haremos será llamarlo mediante un shortcode.

⇒Shortcode

🌟Por fin el momento que llevamos rato prometiendo ha llegado🌟, se ha mencionado con anterioridad en varias ocasiones el shortcode. ¿Qué es el shortcode? Es sencillamente una especie de ID que se le da a algunos elementos de WordPress creados fuera del constructor de bloques. Estos quedan almacenados en WordPress, y ese shortcode es como una ID, un nombre, una matrícula, un DNI. Desde el constructor de bloques simplemente hay que llamarlos y se nos mostrarán en la Vista previa. es sencillamente una gran idea, ya que nos permite guardar varios elementos si es necesario del mismo tipo e invocarlos tan solo cuanto nos hagan falta las veces que sea necesario. Similar a las funciones en programación…😉

Bueno, pero como un ejemplo vale más que mil palabras, vamos a ver como funciona esto del shortcode con nuestro formulario:
En la parte superior de la pantalla hay un mensaje que nos dice «Copia este shortcode y pégalo en el contenido de una entrada, página o widget de texto.». Así que copiamos la línea que hay justo debajo y nos vamos a la entrada o página donde queramos nuestro fabuloso formulario.

Una vez en el constructor de bloques, añadimos un nuevo bloque llamado shortcode, y para que enrollarse en infinitas explicaciones si es tan simple como una vez tengamos el bloque de shortcode pegarle el código que acabamos de copiar. Ya está, simplisisisímo😽. Y sí, tranquis si no se os ve el formulario desde el constructor del bloques, es normaaaal, no se ve desde esta pantalla. Seguramente ya deliráis por ver de una vez por todas el formulario, claro que sí, así que actulizáis o guardáis borrador según tengáis publicada o no la página o entrada y o vais a Ver Página.

⇒Probando el formulario

Ahora que por fin ya tenemos nuestro formulario es hora de probarlo, el nombre, el teléfono, todo lo que sea que hayamos puesto y que lo hayamos editado a nuestro gusto. Si que hacer cualquier ajuste, es tan sencillo como de nuevo volver al apartado de Contact Form 7 en el escritorio de WP, editar los cambios necesarios en formulario, Guardar y los cambios se aplicarán automaticamente. Fin de la historia. ¿Verdad que ha sido sencillo?🤗

5. Otros ajustes

⇒Etiquetas

Un apartado extra para quienes quieran rizar el rizo un poco. Podemos por ejemplo hacer unos ajustes al como nos va a llegar el correo. Si queremos personalizar un poco más los datos del remitente que nos van a llegar tan solo hay que hacer uso de las etiquetas. Las etiquetas son unos «pedacitos de texto» que recogen la información que hemos escrito en ese campo y luego la plasman cuando son llamadas. Es decir, cuando vayamos a la Configuración de Correo, veremos que la parte superior pone algo como: «De:[your-name] [your-email]. Eso, cuando nos llegue un correo lo veremos tipo así: «De:Paquito paquitochcolaterio@gmail.com. Ahí se recogen y se plasman el nombre y correo que el usuario ha introducido en esos campos. Así que obviamente, podemos hacer ediciones en ese tema.

Que lo que sí o sí necesitamos ver primero cada vez que nos llegue un correo es el nombre y correo de quien nos lo envía, eso es casi indiscutible, y quien no lo quiera así pues tan solo tiene que borrar la etiqueta [your-name] o [your-email]❌(Nada recomendado)❌. Pero quizás también queramos ver los apellidos no? O número de teléfono☎. Pues bien, de nuevo nos vamos a la configuración del formulario y en cada campo al lado de text o text area hay algo tipo your-name, your-email, etc. Si hemos puesto una campo de apellidos tal cual el ejemplo de arriba, la etiqueta de apellido debería ser your-surname. Así que de nuevo vamos a la configuración del Correo, y al lado de [your-name] podemos añadir [your-surname], y con esto ya nos aparecerán los apellidos.😊

<label> Tu nombre
    [text* your-name autocomplete:name] </label>

<label> Tus apellidos
    [text* your-surname autocomplete:surname] </label>

Y así con cualquier otra información recogida de nuestro formulario que queramos ver en los correos recibidos. De la misma forma, borrar una etiqueta en el apartado Correo sencillamente hará que no nos aparezca esa información, pero borrar una etiqueta en el Formulario hará que la información de ese campo en realidad no sea recogida, aunque el usaurio rellene ese campo, quien recoge la información escrita es la etiqueta. Sabiendo todo esto podemos elegir visualizar o desvisulizar toda clase de información recogida en el formulario de contacto (nombre, apellidos, email, asunto, empresa, telefono, hasta 🩸grupo sanguíneo 🩸 si lo ponermos, aunque no es muy legal pedir según que tipo de datos, y como no sea por un asuntamente muy puramente médico no es recomedable pedir grupo sanguíneo…

Bueno, además de añadir o restar etiquetas podemos añadir texto simple que veremos al recibir los correo, por ejemplo, y siguiendo el ejemplo del vídeo tutorial, podemos poner Su empresa es [empresa]. Así la información de los formularios nos llegará visualmente más legible y agradable a la vista.

⇒Mensajes

También podemos editar los mensajes que les aparece a los usuarios en pantalla al rellenar el formulario: Podemos editar a nuestro gusto el mensaje para cada, cada situación, es tan facil como ir al apartado Mensajes del plugin Contact Form 7. Aunque mucho ojo con la personalización de mensajes, debe ser correcta y nada grosera o la gente podría ofenderse y buscarnos problemas.

Bueno, con todo esto llegamos al final de este tutorial. Crear una formulario super personalizable y profesional es muy muy sencillo😄, y además es GRATIS🤑. ¡Esperamos que os haya gustado!