TUTORIAL

¡Formulario de Contacto con WordPress y Elementor sin plugin!🤝📢

Aprenderás a crear formulario de contacto con Elementor y WordPress. Con video paso a paso.

 

WORDPRESS

FORMULARIO

Jul 18, 2024

Montoya A.

20min de lectura

Hola amigos de Marieú Technology Corporation, ¡Formulario de contacto en WordPress y Elementor sin plugin! Sí, en esta guía, paso a paso, aprenderás a elaborar formulario de contacto en página web, campos obligatorios del formulario Elementor, confirmación de política de privacidad en formulario WordPress, mensaje de validación de formulario web, gestionar correo de formulario WordPress y cómo exportar datos del formulario WordPress a Microsoft Excel.🤝📢

Elementor es un maquetador de páginas  web o «page builde». Permite crear y diseñar páginas web mediante plantillas, widgets o bloques predefinidos. La instalación del plugin de Elementor se realiza por medio de WordPress. Donde, encontrarás una versión gratuita y otra de pago, para este último, con mayor cantidad de widgets y plantillas.

¿Cómo crear formulario de Contacto en WordPress y Elementor sin plugin?

Entonces, aquí tenemos un pequeño diagrama de cómo nosotros vamos a aplicar este formulario. Por el audio Wordpress, recomendamos que esté actualizado este plugin de Elementor. Y, en el caso de Elementor, nosotros vamos a crear primero una página y vamos a insertar el formulario. Número dos, vamos a configurar el formulario. Recuerden que tenemos campos, fields, vamos a agregar un checklist, vamos a cambiar el diseño, todo dentro de esta configuración. Finalmente, vamos a realizar algunas pruebas de envío, si es que está llegando nuestro correo y está funcionando adecuadamente, este formulario.

Formulario de Contacto en WordPress y Elementor sin pluginDiagrama: ¡Formulario de Contacto en WordPress y Elementor sin plugin!
Fuente: Elaboración Propia.

Entonces, ahora estamos en WordPress, vamos a irnos a páginas. Dentro de contactos, nosotros vamos a agregar este formulario, ponemos editar con Elementor. Estamos dentro de nuestra página de contacto y, nosotros, pretendemos agregar un formulario, más o menos en esta sección. Para eso, tenemos que dividir este mapa. Para dividirlo en dos, tenemos que agregar aquí añadir nueva sección. En este caso sería, dividida en dos, 50% para cada uno y lo subimos, encima de la sección de Google Maps.

Entonces, abrimos y aquí tenemos las dos columnas. Le vamos a agregar Google Maps en la primera columna; ya para la segunda, vamos a agregar el formulario. Colocamos suprimir o clic derecho y ponemos borrar.

El widget que nosotros vamos a utilizar lo tenemos aquí, ponemos form. Por efecto, te agrega tres campos: el nombre, correo y mensaje. Ahora, en la parte de contenido tenemos el detalle de estos campos o fields, si nosotros abrimos aquí, podemos ir cambiando los nombres.

Recuerden que vamos a agregar un total de siete campos, entonces, tenemos cuatro, cinco, seis y agregamos uno más, siete.

Primero, para poder diferenciar un poco el contorno o el borde, nos vamos a ir a estilo y, en estilo, nosotros vamos a modificar el field o el campo. Aquí, tenemos el color del borde, vamos a colocarle un color, que ya hemos asignado dentro de estos colores globales. Es un color aprobado, dentro del Page Speed Insights, en la categoría accesibilidad, seleccionamos y ¡ahí está!. De hecho, si ustedes quieren conocer un poco más, cómo pueden manejar todo lo que es accesibilidad en cuanto a su página web, recomendamos que lleven el curso de optimización web. El cual, les vamos a estar dejando dentro de la descripción.

Ahora, vamos a colocar un radio de 30 y ahí estamos notando los cambios. Entonces, ahora sí podemos diferenciar, donde están cada uno de los campos o fields.

Lo que vamos a hacer ahora, vamos a organizar un poco estos campos. Todo lo que es mensaje, siempre va en la parte final. Entonces, seleccionamos aquí y lo ponemos a la parte final. Vamos a iniciar con el nombre. Ahora, todo lo que son etiquetas o label, lo vamos a dejar vacío y lo que es placeholder o el texto, que aparece internamente en el campo o field, lo vamos a ir completando.

Recuerden que también es llamado marcador de posición, seleccionamos y vamos a colocar: nombres y apellidos, ahí notamos el cambio. Recuerden aquí, también va a ser requerido, es decir, no podemos enviar nosotros este formulario si es que no lo completa. Para eso, nosotros vamos a marcar aquí required. Vamos con el segundo campo, este va a ser de la compañía, es en modo opcional, pero, respecto al correo, lo vamos a ver después, lo vamos a desplazar más abajo. Ahora, qué vamos a colocar aquí, vamos a colocar compañía, entre paréntesis opcional, ¡ahí está!

Vamos a ahora con unos dos campos, al 50% por cada uno, es decir, la columna está a un 50%, en el caso del elemento 3, y, en el siguiente, también vamos a colocarle un 50%. Ahora, si nosotros notamos aquí, se estaría dividiendo en dos secciones. Vamos a colocar en placeholder: país y, para el siguiente, ciudad. Entonces, el elemento número cinco sería el teléfono y el elemento número seis, el correo. Lo dividimos nuevamente, 50% por cada uno y ahí estamos notando el cambio. Vamos a colocar aquí teléfono, cerramos y vamos con el correo.

Recuerden que, en este caso, la etiqueta o label la estamos eliminando y listo. Entonces, ya tenemos un total de seis campos, vamos con el séptimo que es mensajes o message: abrimos aquí, eliminamos el label y ponemos mensaje.

De todos estos campos, el único que es opcional, en este caso, es compañía, que es el elemento dos. En el caso de los otros, van a ser obligatorios, activamos required y también el último, required.

Entonces, ahora nosotros vamos a crear dos checklist, también lo hacemos en esta sección. Añadimos elementos y, en el tipo, nosotros vamos a seleccionar un checkbox. Vamos a agregar un total de dos. Para el siguiente duplicamos, aquí tenemos la opción de duplicar y también estaría como checkbox. Ahora, dentro de option, nosotros vamos a colocar el contenido: confirmo recibir ofertas, con el uso de mis datos.

Si nosotros queremos modificar el estilo de esta fuente, tenemos que irnos a estilo y, en estilo, vamos a irnos a fields. En fields, primero lo que hacemos es tipografía, lo cambiamos a text, es una fuente global recuerden. Nos vamos a el lápiz, dentro del lápiz, nosotros cambiamos la transformación, es decir, queremos nosotros que en todo no esté en mayúscula, colocamos transformación y ponemos normal. Para los campos, para reducir un poco la altura de cada una de estas filas, vamos a colocarlo en tamaño, en size ponemos extra small y ahí notamos que se reduce un poco.

Formulario de Contacto en WordPress y Elementor

Contenido del Formulario de Contacto en Elementor y WordPress.
Fuente: Elaboración Propia.

Vamos a irnos con el botón, queremos cambiar el nombre del botón, para eso vamos a button y en send ponemos enviar. Vamos a agregarle un icono en la parte final, para ello, buscamos dentro de la biblioteca de iconos y ponemos caret, caret right, seleccionamos, insertamos y ahí lo tenemos. Ahora, para que esté ubicado en la derecha, ponemos la posición en after. Además, vamos a colocar que esté al centro, ahí está, y vamos a alinear un poco nuestro botón a nuestra página. Nosotros usamos mucho el color lila oscuro, con un radio de 26 a 30.

Entonces, vamos a estilo, ponemos button, y en button, vamos a poner aquí borde del radio 26, ahí estamos notando el cambio. Ahora, vamos a cambiar el color, para eso, colocamos en background color y ya tenemos nuestro colores globales. Que, de hecho, también está probado dentro de la categoría accesibilidad, en Pagespeed Insights. Y, con más detalle nosotros lo mencionamos en el curso de Optimización Web. Seleccionamos y ahí tenemos nuestro botón.

Ahora, vamos a colocarle un texto en la parte parte de arriba, para que nuestro cliente pueda hacer sus consultas. Para ello, vamos a irnos a los widgets y colocamos texto. En este caso, agregamos en encabezado y le vamos a colocar consultas y un emoji de apretón de manos. Listo, entonces recuerden que así se ve en versión desktop, si queremos cambiar la versión escritorio, ponemos modo adaptable y ponemos versión móvil, así se estaría viendo en versión móvil.

Si nosotros queremos que este checklist sea en modo obligatorio, es decir, que tenga que completar todo el formulario y marcar el checklist en modo obligatorio, tendríamos que hacer el cambio aquí, de checkbox a acceptance o también aceptación, lo cambiamos y aquí sí tenemos la opción de requerido, colocamos el texto.

Ahora, si queremos nosotros agregar un enlace en Política de Privacidad, tendríamos que agregar el siguiente código en html, es decir, confirmo que he leído la… y agrego el span, el style del color del texto, en este caso, solamente de Política de Privacidad. En href colocamos la URL, cerramos con span y aquí tendríamos ya nuestra casilla de verificación, con un texto y un hiperenlace interno. Por ejemplo, vamos aquí, probamos, hacemos clic aquí y nos dirigimos a la página de Política de Privacidad.

Formulario de Contacto en Elementor y WordPress

Estilo del Formulario de Contacto en Elementor y WordPress.
Fuente: Elaboración Propia.

Resultados Finales

Entonces si nosotros enviamos, nos aparece su envío exitoso. Cuando lo configuramos desde cero, tenemos que hacer el cambio. ¿Dónde realizamos ese cambio?, aquí, en opciones adicionales. Entramos a custom message y aquí podemos ir cambiando cada uno de los textos: cuando el envío fue exitoso, cuando hubiera algún error y cuando el formulario inválido.

Todo ello podemos ir cambiándolo, según el idioma de nuestro público objetivo. Por ejemplo, aquí ya lo hemos cambiado, su envío fue exitoso, su envío falló debido a un error del servidor y, finalmente, su envío falló porque el formulario no es válido. Aquí tenemos nuestro formulario, colocamos nuestros nombres, el nombre del compañía, colocamos test, seleccionamos los dos checklist, de confirmación de recibir ofertas y política de privacidad, y colocamos enviar.

Aquí, en nuestro correo, por ejemplo, ya nos ha llegado test. Recuerden que no nos llegó un mensaje así, te falta de protocolo de transferencia simple. Como ya hemos instalado el plugin de WP SMTP, no nos está saliendo una alerta de falta que protocolo. Entonces, aquí estamos recibiendo el correo.

Si nosotros queremos gestionarlo desde WordPress, tendríamos que hacerlo de aquí collect submissions, seleccionamos y aquí tenemos todos los correos, que nos están llegando: los correos, el formulario y la página donde se ha enviado. Si queremos más detalle del mensaje, colocamos aquí y ahí tenemos todo el detalle, el contenido del mensaje.

También podemos, nosotros, exportarlo en formato CSV, para poder ya revisarlo en nuestro Microsoft Excel. ¡Listo, gracias amigos de Marieú Technology Corporation!ela

Montoya Godenzi Daniel Alejandro escala 20

EL AUTOR

Daniel Alejandro Montoya Godenzi

Alejandro, con el grado de magíster en Administración y Dirección de Proyectos e Ingeniero Mecatrónico, dispone de experiencia en proyectos de entorno tecnológico digital. Forma parte del equipo de Marieú Technology Corporation. En su tiempo libre, le gusta crear nuevos proyectos, leer un libro o ver una serie.

SIGUE LEYENDO

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Marieú Technology Corporation ofrece servicios de creación de páginas web, marketing digital, producción audiovisual y catering, que facilita los negocios en las empresas.

Boletín informativo

Al ingresar acepta nuestros T&C y las Políticas de privacidad.

Marieú Technology Corporation
©Todos los derechos reservados