-
bayboropharmacyAsked on March 26, 2021 at 1: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
-
Elton Support Team LeadReplied on March 26, 2021 at 9: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>
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: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 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.
-
bayboropharmacyReplied on March 27, 2021 at 8:44 AMThank you so much for your help
Jonathan Altman
...