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 (como una superposición) usando nada más que Divi, algo de código jQuery y código CSS.
Esta es una excelente manera de mantener a los visitantes de su sitio enfocados en la acción a la que se comprometieron al hacer clic en un botón. No los lleva a una página diferente, sino que los bloquea en esa acción hasta que finaliza.
A continuación, puede echar un vistazo rápido a lo que crearemos y luego saltar al tutorial.
Resultado en el escritorio
Resultado en teléfono y tableta
Inspiración
La inspiración para esta publicación proviene de una solicitud de comentarios y se encuentra en B3multimedia . Aunque están utilizando otro método para hacer que esto funcione, también tienen una forma sorprendente de crear un formulario de contacto con un clic. Echa un vistazo al resultado:
Por lo general, mostramos cómo hacer casi todo en el generador visual de interfaz de Divi. En la publicación de hoy, sin embargo, usaré el generador de backend. Debido al código que estamos usando, es un poco más fácil. Dicho esto, si te encanta el editor de frontend tanto como a nosotros, puedes completar este tutorial con la misma facilidad usando la vista de «esqueleto» de frontend.
Bien, ¡entremos en este tutorial!
Suscríbete a nuestro canal de Youtube
Lo primero que debemos hacer es agregar una nueva sección donde colocamos el botón que permitirá que aparezca el formulario de contacto. Simplemente agregue una sección estándar y seleccione una fila de una columna. Una vez que haya hecho eso, agréguele un módulo de botones.
Puede diseñar 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 usar solo el carácter ‘#’. Al agregar ‘#’ y algo de 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 esta publicación en el código jQuery para asegurarnos de que el formulario de contacto aparezca después de hacer clic. La clase que necesitaremos asignar al botón es simplemente ‘botón’.
Crear formulario de contacto de escritorio al hacer clic
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 hemos creado en la parte anterior de esta publicación. Más adelante en esta publicación, también le mostraremos cómo crear la versión móvil.
Básicamente, puede crear cualquier diseño que desee dentro de una fila y hacer que aparezca como una ventana emergente si usa este método. Solo le daremos una idea de lo que puede lograr mostrándole cómo crear el siguiente ejemplo:
Agregar nueva sección estándar
Comience agregando una nueva sección estándar a la página en la que está trabajando. Vaya a la pestaña Avanzado de la sección que acaba de agregar 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:
|
01
02
03
04
05
06
07
08
|
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 que desee. En este caso, estamos usando el color negro con algo de transparencia. Dentro de esa misma pestaña, agregue también la siguiente línea de código CSS al elemento principal:
|
01
|
display: none; |
Lo último que tendremos que hacer en la pestaña Avanzado es deshabilitar la sección de teléfono y tableta en la subcategoría Visibilidad.
Agregar fila de dos columnas
Continúe agregando una fila de dos columnas y vaya a la pestaña Diseño. Comience modificando el ancho de la fila en la subcategoría Tamaño. En este ejemplo, hemos usado un ancho personalizado de 1291 px.
Desplácese hacia abajo en la pestaña Diseño y use ’30px’ para el relleno superior, izquierdo y derecho de ambas columnas dentro de la subcategoría Espaciado.
Termine yendo a la pestaña Avanzado. Dentro del elemento principal, agregue las siguientes líneas de código CSS:
|
01
02
03
04
05
06
07
|
transform: translatey(-50%) translatex(-50%);position: fixed;top: 50%;left: 50%;z-index: 1000;border: 2px solid #0c71c3;border-radius: 8px; |
Agregar 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 diferentes módulos que desea mostrar. Lo primero que agregaremos es el título que aparece. Comience agregando un nuevo módulo de texto a la primera columna de la fila, escriba el texto dentro de la pestaña Contenido y avance a la pestaña Diseño. Dentro de la pestaña Diseño, hemos utilizado la siguiente configuración para la subcategoría Texto:
- Orientación del texto: Centro
- Fuente del texto: Langosta
- Estilo de fuente: Negrita
- Tamaño de fuente de texto: 37
- Color del texto: #002282
- Altura de línea de texto: 1,7 em
Agregar 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. Pase a la pestaña Diseño y haga que las siguientes configuraciones se apliquen a la Subcategoría de Texto:
- Orientación del texto: Centro
- Fuente del texto: Arial
- Tamaño de fuente de texto: 13
- Color del texto: #002282
- Altura de línea de texto: 1,7 em
Continuando, también agregaremos el Módulo de seguimiento de redes sociales a la primera columna. En este caso, hemos elegido tres íconos sociales; Facebook, Twitter e Instagram. Una vez que haya agregado estos íconos sociales en la pestaña Contenido, cambie la Forma del enlace a ‘Círculo’ en la subcategoría Ícono.
Lo último que tendremos que hacer es agregar un relleno izquierdo a este módulo en la pestaña Avanzado. Agregue la siguiente línea de código CSS al elemento principal:
|
01
|
padding-left: 40%; |
Agregar módulo de formulario de contacto
Luego, podemos pasar a la segunda columna de la fila. En esa columna, lo primero que vamos a colocar es el Módulo de formulario de contacto. Para este ejemplo, solo hemos elegido dos campos; el nombre y el correo electrónico. Una vez que haya agregado el Módulo de formulario de contacto, vaya a la pestaña Diseño del Módulo de formulario de contacto y realice los siguientes cambios en la subcategoría Texto del campo de formulario:
- Tamaño de fuente del campo de formulario: 15
- Color del texto del campo de formulario: #002282
- Altura de la línea del campo de formulario: 1,7 em
Dentro de esa misma pestaña, aplique los siguientes cambios a la subcategoría Botón:
- Usar estilo personalizado para el botón: Sí
- Tamaño del texto del botón: 20
- Color del texto del botón: #FFFFFF
- Color de fondo del botón: #0086c4
- Ancho del borde del botón: 2
- Radio del botón: 3
Pase a la pestaña Avanzado y agregue un relleno superior del 5%.
Añadir módulo Blurb
Otra cosa que necesitaremos agregar a la segunda columna es un módulo de Blurb. Lo único para lo que necesitamos este módulo es el ícono de salida en la parte superior derecha de la ventana emergente. Elija el siguiente ícono en la lista de íconos y deje todo lo demás en blanco.
Continuando, vaya a la pestaña Avanzado y escriba ‘cerrar’ como la clase CSS. Dentro de esa misma pestaña, agregue las siguientes líneas de código al elemento principal de la subcategoría CSS personalizado:
|
01
02
03
04
|
position: absolute;top: -45px;right: -30px;cursor: pointer; |
Aplicar fondo degradado a la fila
Por último, pero no menos importante, vamos a agregar un bonito fondo degradado a la fila. 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 formulario de contacto para tableta y teléfono al hacer clic
Ahora que hemos creado la versión de escritorio, la versión para tabletas y teléfonos irá mucho más rápido. La mayoría de los módulos que hemos usado para la versión de escritorio son los mismos para la versión móvil. El resultado final en el móvil se ve así:
Agregar nueva sección estándar
Comience agregando otra sección estándar. Esta sección deberá tener la misma configuración que la sección que hemos creado antes. Agregue ‘emergente’ a la clase CSS y agregue las siguientes líneas de código CSS al campo Antes:
|
01
02
03
04
05
06
07
08
|
top: 0px;left: 0px;width: 100%;height: 100%;z-index: 999;content: "";background: rgba(0,0,0, 0.8);position: fixed; |
Agregue también la siguiente línea de código CSS al elemento principal:
|
01
|
display: none; |
En lugar de deshabilitarlo para el teléfono y la tableta, como hicimos con la versión de escritorio, lo deshabilitaremos en el escritorio en la subcategoría Visibilidad:
Agregar fila de una columna
Para la ventana emergente del teléfono y la tableta, solo vamos a necesitar una columna. Para esta fila, no vamos a usar un ancho personalizado. Sin embargo, vamos a aplicar el relleno personalizado como lo hicimos para la versión de escritorio; 30px para el relleno superior, izquierdo y derecho de la columna.
También tendremos que asegurarnos de que las siguientes líneas de código CSS se agreguen al elemento principal en la subcategoría CSS personalizado:
|
01
02
03
04
05
06
07
|
transform: translatey(-50%) translatex(-50%);position: fixed;top: 50%;left: 50%;z-index: 1000;border: 2px solid #0c71c3;border-radius: 8px; |
Lo siguiente que tendremos que hacer es clonar el primer módulo de texto que hemos usado para la versión de escritorio junto con el módulo de seguimiento de redes sociales y formulario de contacto. Después de clonarlos, colóquelos en la fila de una columna de la nueva sección que acaba de crear.
Clonar el módulo Blurb y cambiar el código CSS en la pestaña Avanzado
También puede clonar el módulo de Blurb que se usó para la versión de escritorio, pero debe haber un pequeño cambio en el código CSS. En lugar de usar el código para el escritorio, use lo siguiente:
|
01
02
03
04
|
position: absolute;top: -15px;right: -25px;cursor: pointer; |
Asegúrese de que la clase CSS ‘cerrar’ también se use para el módulo de Blurb.
Aplicar fondo degradado a la fila
Para la versión móvil, usamos diferentes configuraciones para el fondo degradado de la fila:
- 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%
Agregar código jQuery a las opciones del tema
Lo último que debemos hacer para este tutorial es agregar el código jQuery. Puede agregar el código a través de las Opciones de tema o a través de un Módulo de código que coloca dentro de la página en la que está trabajando. Para este ejemplo, simplemente lo pondremos en Opciones de tema.
Para hacer eso, vaya a su Tablero de WordPress> Divi> Opciones de tema> Integración> Y pegue las siguientes líneas de código jQuery dentro del encabezado de su sitio web:
|
01
02
03
04
05
06
07
08
09
|
<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 la publicación, paso a paso, debería poder lograr el siguiente resultado en el escritorio:
Y el siguiente resultado en tabletas y teléfonos:
Pensamientos finales
En esta publicación, le mostramos cómo crear un formulario de contacto con un clic. Usar este método para ponerse en contacto con sus visitantes es sutil pero efectivo. Si tiene alguna pregunta o sugerencia; asegúrese de dejar un comentario en la sección de comentarios a continuación.
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada por La1n / shutterstock.com