Cómo agregar una ventana modal a tu formulario

Una ventana modal es un elemento de diseño que puede deshabilitar temporalmente la interacción con el resto de tu formulario hasta que el usuario aborde el contenido dentro del modal. Puedes usarla para mostrar mensajes importantes, confirmaciones o información a quienes rellenan tu formulario.

Watch on youtube

Para crear una ventana modal

1. En el Creador de Formularios, añade un elemento de Párrafo a tu formulario.
2. En el editor de Párrafo, selecciona Código Fuente (“>_”) en la parte superior.

3. Pega el siguiente código HTML en el editor de Código fuente. Edita los textos resaltados a tu gusto:

<p><a class="button" href="#openModal" rel="nofollow">¡Haz clic aquí!</a></p>
<div id="openModal" class="modalBox">
<div>
<p><a class="close" title="Cerrar" href="#closeModal" rel="nofollow">X</a></p>
<h2>¡Hola!</h2>
<p>Aquí tienes una ventana modal.</p>
<p>Puedes personalizar esto con tu propio mensaje.</p>
</div>
</div>

4. Para el CSS, abre el Diseñador de Formularios a la derecha.

5. Ve a Estilosen la parte superior, luego ingresa el siguiente código bajo Inyectar CSS Personalizado:

/* Contenido Principal de la Caja */
.modalBox {
position:fixed;
font-family: Arial, Helvetica, sans-serif;
top:0;
right:0;
bottom:0;
left:0;
background: rgba(0,0,0,0.8);
color:black;
z-index:99999;
opacity:0;
-webkit-transition:opacity 400ms ease-in;
-moz-transition:opacity 400ms ease-in;
transition:opacity 400ms ease-in;
pointer-events:none;
}
/* Estilo para elementos objetivo */
.modalBox:target {
opacity: 1;
pointer-events: auto;
}
/* Posicionamiento de la caja hija */
.modalBox>div {
width:400px;
position:relative;
margin:10% auto;
padding:5px 20px 13px 20px;
border-radius:0px;
background:white;
}
/* Posicionamiento y estilo del botón de cerrar */
.close {
background:white;
color:black;
line-height:25px;
position:absolute;
right:1px;
text-align:center;
top:1px;
width:35px;
text-decoration:none;
font-weight:bold;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:none;
border:none;
}
/* Estilo al pasar el ratón sobre el botón de cerrar */
.close:hover {
background:black;
color:white;
}
/* Estilo predeterminado del botón de abrir */
.button {
background-color:black;
border:none;
color:white;
padding:2px 10px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px 2px;
cursor:pointer;
}

Consulta Cómo Inyectar Códigos CSS Personalizados para más información.

Ahora tienes una ventana modal en tu formulario. Incorporar #openModal a la URL de tu formulario abrirá la ventana modal automáticamente cuando se cargue el formulario:https://www.jotform.com/221332168199458#openModal

Para formularios incrustados, añade #openModal al atributo SRC del iframe para abrir automáticamente la ventana modal cuando la página se cargue.