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.
Diagrama: ¡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.
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.
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
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.
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.
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Estas cookies son:
Sesión de usuario
Aceptación de cookies
Comentarios
Seguridad
Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies de terceros
Esta web utiliza Google Analytics, Pixel de Facebook y HubSpot para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!