¿Te gustaría crear un formulario de contacto en Divi que aparece después de hacer clic en un botón?
En este tutorial de Divi, le mostraremos cómo crear un formulario de contacto que aparece después de hacer clic en un botón usando nada más que Divi, código jQuery y código CSS.
Lea también nuestra guía sobre: Divi: Cómo crear un pie de página fijo con efecto "Revelar"
Es una gran manera de mantener el visitantes de su sitio web centrado en la acción a la que se comprometieron con el clic de un botón. No los lleva a una página diferente.
vista
A continuación, puede echar un vistazo rápido a lo que crearemos, ¡luego salte al tutorial!
Vista previa en PC
Vista previa en teléfono y tableta
Crear una nueva página con un diseño predefinido
Comencemos usando un diseño predefinido de la biblioteca Divi. Para este ejemplo, utilizaremos la página de contacto del Paquete de diseño de productos de belleza .
Agrega una nueva página a tu Sitio web y dale un título, luego selecciona la opción 'Usar Divi Builder'.
Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione 'Elija el diseño'.
Busque y seleccione la página de inicio del diseño 'Empresa de Diseño de Interiores'.
Seleccione "Elija el diseño' para agregar el diseño a su página.
Ahora estamos listos para continuar nuestro tutorial.
Crear una sección con el módulo Button
Lo primero que tendremos que hacer será agregar una nueva sección donde colocamos el botón que permitirá formulario de contacto para mostrar.
Ver también: Divi: Cómo crear un pie de página personalizado
Simplemente agregue una sección estándar
A continuación, seleccione una fila de una columna.
Una vez que haya hecho eso, agréguele un módulo Button.
Puede personalizar el botón como desee, pero debe asegurarse de que la URL del botón comience con '#' seguido de algo más. No puede dejarlo en blanco o simplemente usar el carácter '#'. Al agregar '#' y texto, la página no se moverá una vez que haga clic en el botón. Si lo deja en blanco, la página se actualizará al hacer clic. Y si solo usa '#', será enviado a la parte superior de la página.
Lo siguiente importante que debemos hacer es asignar una clase CSS al botón. Usaremos esta clase CSS más adelante en este artículo en el código jQuery para garantizar que el formulario de contacto aparezca después de hacer clic. La clase que necesitaremos asignar al botón es simplemente "botón".
- Clase CSS: botón
Crear un formulario de contacto de versión para PC
Lo siguiente que debemos hacer es crear el formulario de contacto de escritorio que aparecerá una vez que alguien haga clic en el botón que creamos en la parte anterior de este artículo. Más adelante en este artículo, también le mostraremos cómo crear la versión móvil.
Agregar una nueva sección estándar
Comience agregando una nueva sección estándar a la página en la que está trabajando. En la configuración de la sección, vaya a la pestaña Avanzado y agregue "ventana emergente" al campo Clase CSS.
Desplácese hacia abajo en esa misma pestaña y coloque las siguientes líneas de código CSS en el campo Antes de la subcategoría CSS personalizado:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Al agregar esto, nos aseguramos de que la sección ocupe toda la pestaña. Puede ajustar el color de fondo en el código CSS para crear la superposición de fondo deseada. En este caso usamos el color negro con algo de transparencia. En esta misma pestaña, añade también la siguiente línea de código CSS al elemento principal:
display: none;
Lo último que tendremos que hacer en la pestaña Avanzado es desactivar el apartado en el teléfono y tablet en la subcategoría Visibilidad.
Agregar una fila a dos columnas
Continúe agregando una fila de dos columnas y navegue a la pestaña Estilo.
- Usar ancho de canalón personalizado: SÍ
- Ancho máximo: 1291px
Introduzca los parámetros de cada una de las columnas.
Modifique los márgenes internos (Superior, Izquierdo y Derecho) de la siguiente manera:
- Margen interno (superior, izquierdo, derecho): 30 px
Termine yendo a la pestaña Avanzado. En el elemento principal, agregue las siguientes líneas de código CSS:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Agregue el primer módulo de texto
Una vez que haya realizado todos los cambios en la sección y la fila, es hora de agregar los distintos módulos que desea mostrar.
Lo primero que añadiremos es el título que aparece. Comience agregando un nuevo módulo de texto a la primera columna de la fila, escriba el texto en la pestaña Contenido y cambiar a la pestaña Estilo.
En la pestaña Estilo, usamos la siguiente configuración para la subcategoría Texto:
- Fuente del encabezado: Langosta
- Encabezado de luz suave: texto en negrita
- Alineación de texto: Negrita
- Color del texto del encabezado: #002282
- Tamaño del texto del encabezado: 37px
- Altura de la línea de cabecera: 1,7 em
Agregar un segundo módulo de texto
Continúe agregando un nuevo módulo de Texto y escriba el texto que desea que aparezca en la pestaña Contenido. Cambie a la pestaña Estilo y aplique la siguiente configuración a la subcategoría Texto:
- Alineación de texto: Centro
- Fuente del texto: Arial
- Texto Tamaño del texto: 13px
- Color del texto Texto: #002282
- Altura de la línea de texto: 1,7 em
Agrega un módulo 'Síguenos en las redes sociales'
A continuación, también agregaremos el módulo 'Síguenos en las redes sociales' a la primera columna. En este caso, hemos elegido tres iconos de redes sociales; Facebook, Twitter e Instagram.
Lo último que tendremos que hacer es agregar relleno (izquierda) a este módulo en la pestaña Avanzado. Agregue la siguiente línea de código CSS al elemento principal:
padding-left: 40%;
Agregar un módulo de formulario de contacto
Luego podemos pasar a la segunda columna de la fila. En esta columna, lo primero que vamos a colocar es el módulo Formulario de contacto.
Para este ejemplo, solo hemos elegido dos campos; nombre y correo electrónico.
Una vez que haya agregado el módulo Formulario de contacto, vaya a la pestaña Estilo del módulo Formulario de contacto y realice los siguientes cambios en la subcategoría Campos:
- Campos de color de texto: #002282
- Campos de tamaño de texto: #002282
- Altura de la línea de campo: 1,7 cm
En esa misma pestaña, realice los siguientes cambios en la subcategoría Botón:
- Usar estilos personalizados para Botón: Sí
- Botón de tamaño de texto: 20
- Color del texto del botón: #FFFFFF
- Botón de fondo: #0086c4
Ver tambien Cómo crear un menú deslizante y push en DIVI
- Ancho del borde del botón: 2
- Botón de radio de borde: 3
Cambie a la pestaña Avanzado y agregue un margen del 5%.
Agregar un módulo de resumen
Otra cosa que necesitaremos agregar a la segunda columna es un módulo Resumen. Lo único para lo que necesitamos este módulo es el icono de salida en la parte superior derecha de la ventana emergente. Elija el siguiente ícono de la lista de íconos y deje todo lo demás en blanco.
Luego vaya a la pestaña Avanzado y escriba "cerrar" como la clase CSS.
En esta misma pestaña, agrega las siguientes líneas de código al elemento principal de la subcategoría CSS personalizada:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Aplicar un relleno degradado a la línea
Finalmente, agregaremos un bonito fondo degradado a la línea. Abra la configuración y aplique los siguientes cambios a la opción de fondo degradado:
- Primer color degradado: #FFFFFF
- Segundo color degradado: #0c71c3
- Tipo de gradiente: lineal
- Dirección del gradiente: 124 grados
- Posición inicial: 50%
- Posición final: 50%
Crear un formulario de contacto para tableta y teléfono
Ahora que hemos creado la versión para PC, la versión para tableta y teléfono irá mucho más rápido. La mayoría de los módulos que usamos para la versión para PC son los mismos que para la versión móvil.
Duplicar la sección anterior
En lugar de deshabilitarlo para teléfono y tableta, como hicimos con la versión para PC, deshabilitaremos la versión para PC en la subcategoría Visibilidad en la configuración del módulo:
Modificar el código CSS del módulo Resumen
En lugar de usar el código de escritorio, use lo siguiente:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Aplicar un relleno degradado a la línea
Para la versión móvil, usamos diferentes configuraciones para el fondo degradado de la línea:
- Primer color degradado: #FFFFFF
- Segundo color degradado: #0c71c3
- Tipo de gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición inicial: 40%
- Posición final: 40%
Añadir código jQuery
Lo último que necesitaremos para este tutorial es agregar el código jQuery. Agregue un módulo de Código e inserte el siguiente código JQuery:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Resultado
Si sigue el mensaje paso a paso, debería poder obtener el siguiente resultado en la computadora:
Y el siguiente resultado en tabletas y teléfonos:
¡¡¡Descarga DIVI ahora!!!
Conclusión
En este artículo, le mostramos cómo crear un formulario de contacto con un solo clic. Utilice este método para ponerse en contacto con su visitantes es sutil pero efectivo.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
