How to add widget details in the form

 A user can click this symbol to link through to another page which explains the question in more detail. Is there a way to insert this in a form, and how is ???

t done? Thanks.how is it done? Thanks.

Hi Stefanny,

Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

In the meantime, let us know if you have any other questions.

Hi Stefanny,

You can add a modal window in your form which can be clicked so that information can be shown for a particular field. Let me show you how:

1. In Form Builder, click on Add Form Element.
2. Add the Paragraph field into your form.
3. Click on the Pencil icon to open the text box.
   
4. Paste the following HTML code into the Source code editor. Edit the text in white however you like:

<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>

Let's proceed with adding the CSS. Let's start:

1. Click on the Paint Roller icon for Form Designer.
2. Go to the Styles tab and scroll down to Inject Custom CSS.
   
3. In the Inject Custom CSS box, enter the code below:

/* 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;

}

Your form now displays a modal window. The modal window will appear immediately when the form loads if you append #openModal to the form URL, like the sample below: https://www.jotform.com/22XXXXXXXXXXXXX#openModal

Give it a try and let us know if you have any other questions.