How can I create a pop-up window about the use of cookies in the form?

  • jbeltranycart
    Fecha de consulta 20 de noviembre de 2023, 7:16

    Buenos días,

    Primero de todo indicaros que nos encanta vuestro programa. Hasta ahora estábamos usando Typeform y después de probar Jotform nos vamos a cambiar.

    Hay una función que no encuentro, necesitaría incluir una aviso sobre el uso de las cookies para que el usuario lo acepte. Esta opción está en Typeform pero no lo encuentro en Jotform.

    Me podríais indicar si existe y como incluirla?

    Muchas gracias! Atentamente,




  • Chris_L Jotform Support
    Fecha de respuesta 20 de noviembre de 2023, 9:44

    Hi jbeltranycart,

    Thanks for reaching out to Jotform Support. Unfortunately, our Spanish Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Spanish, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    Now, let me help you with your question. Yes, it is possible to have a pop-up window with a message when users first come to your form. I can walk you through setting that up:

    • In Form Builder, click on the Add Form Element menu on the left side of the page.
    • Under the Basic tab, scroll down to Paragraph element. Drag and drop the element to your form.
    • In the Paragraph’s editor, select Source Code (“>_”) at the top.
      How can I create a pop up window about the use of cookies in the form? Image 1 Screenshot 30
    • Paste the following HTML code into the Source code editor:
    <p><a class="button" href="#openModal" rel="nofollow">Click Here!</a></p>
    <div id="openModal" class="modalBox">
    <div>
    <p><a class="close" title="Close" href="#closeModal" rel="nofollow">X</a></p>
    <h2>Hey there!</h2>
    <p>Here's a modal window.</p>
    <p>You can customize this with your own message.</p>
    </div>
    </div>
    • Replace the text "You can customize this with your own message" texts to your liking.
    • Next, click on the Paint Roller Icon in the upper-right corner of the page.
    • Under the Styles tab, scroll down to the Inject Custom CSS section.
      How can I create a pop up window about the use of cookies in the form? Image 2 Screenshot 41
    • Paste the following CSS code:
    /* Main Box Content */
    .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;
    }
    /* Style for target elements */
    .modalBox:target {
    opacity: 1;
    pointer-events: auto;
    }
    /* Positioning of the child box */
    .modalBox>div {
    width:400px;
    position:relative;
    margin:10% auto;
    padding:5px 20px 13px 20px;
    border-radius:0px;
    background:white;
    }
    /* Positioning and style of the close button */
    .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;
    }
    /* Style when mouse hovers on the close button */
    .close:hover {
    background:black;
    color:white;
    }
    /* Default style of the open button */
    .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;
    }
    • You're done.

    Here's the link to the demo form.

    Give it a try and let us know if you need any help.