I need assistance creating a "Pop-up" when my form opens

  • Profile Image
    bayboropharmacy
    Asked on March 26, 2021 at 01:20 PM

    I have no experience writing computer code. I need assistance in creating a "pop-up" that automatically opens when my form is opened. I need the text to say:

    Please schedule your second dose on your due date (on the back of your COVID-19 Vaccine Record Card) if possible, but no more than 4 days before or after. If you schedule your appointment more than 4 days prior to your due date, we will have to cancel your appointment, requiring you to reschedule within your specified time frame.

    Thank you - Bayboro Pharmacy

  • Profile Image
    EltonCris
    Answered on March 26, 2021 at 09:40 PM

    That's possible. Here's how:

    1. First, Add a Paragraph element in your form then paste this code into it.

    <div id="open" class="modalBox"><div><a class="close" title="Close" href="#close">X</a><p>Please schedule your second dose on your due date (on the back of your COVID-19 Vaccine Record Card) if possible, but no more than 4 days before or after. If you schedule your appointment more than 4 days prior to your due date, we will have to cancel your appointment, requiring you to reschedule within your specified time frame.</p><p>Thank you - Bayboro Pharmacy</p></div> </div> 

    03272021_bIWh3EQ3Yd.png

    2. Inject these CSS codes into your form.

    /*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;}/*When the href are clicked*/.modalBox:target {opacity:1pointer-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 pop-up 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;}

    Guide: How to Inject Custom CSS Codes

    3. To trigger the box, simply append this parameter #open in your form URL.

    Demo: https://form.jotform.com/210848066427055#open

    Note that the popup will only appear once everytime they load the form URL with the open parameter. They can only close the popup when they click the X button.

  • Profile Image
    bayboropharmacy
    Answered on March 27, 2021 at 08:44 AM
    Thank you so much for your help
    Jonathan Altman
    ...