In the Formidable forms visual designer, each form input field has an section titled “click here to add a description or additional instructions.” It’s handy for putting hints where a user might need a bit of extra help. The hints text can be styled with CSS. A very useful feature for any form using terminology which might confuse a user.
By default, the hints show up below the input field.
What if we want those hints presented differently? What if we wanted modal, pop-up hints?
For a recent project, I had exactly this challenge: Show the help text as a pop-up modal dialogues, triggered by a small icon next to each field label for which hints are available. This can be accomplished in the “Customize HTML” section of the form’s settings. But I still wanted to use the Formidable form design tool for managing the content of those hints, so my client could eventually take over maintenance of the hint text, without me writing additional software for managing that content, or involve any HTML knowledge for the client.
Automatically changing the hints presentation was a relatively straightforward exercise using some CSS and JavaScript.
First, I based the modal CSS behavior on an outstanding HTML5/CSS3 modal example by Keenan Payne. Highly recommend reading if you want to understand the basics of HTML and CSS control of modal dialogues on a web page.
Next up, we need a bit of JavaScript to have the form reconfigure itself after page load, so that the hints show up as modal popups, rather than as fixed text below the fields. The JavaScript is encased in a jQuery (document).ready function. This ensures that all form elements have been rendered to the browser before the code runs. Here’s a basic description of the code:
- We define our help icon, for use with the source field of <img> tag we will add to each field label that has a hint associated with it.
- We use the jQuery find() function with the ID of our form; we’re asking jQuery to return an array of every form field on the form.
- We then loop through that list and do perform two basic steps:
- Use jQuery’s find() method to return the any text stored in a “div.frm_form_description” object. That’s where Formidable keeps the hint text you added to a form field.
- If we got some hint text back from that object, we then build our modal functionality around it:
- We use jQuery’s .html() function to both return the current content of the field’s label, and append that content with an anchor tag, to act as the user’s clickable help link, the help icon itself, and a <div> acting as modal box, with an interior <div> containing the hint text.
Experienced JavaScript users will have no trouble interpreting the code below, but it’s heavily commented for less experienced coders:
<script type="text/javascript">
jQuery(document).ready(function() {
// this is our help icon:
var helpicon = "<?php echo get_stylesheet_directory_uri(); ?>/images/help.png";
// create an area of form fields:
var field_list=jQuery("#frm_form_9_container").find("div.frm_form_field");
// helpcontent variable is where we'll store the description/help text for each field as we check each field on the form
var helpcontent;
// loop through all instances of form fields:
for(var i=0;i<field_list.length;i++) {
// get the content of the Formidable "description/instructions" field
helpcontent = jQuery(field_list[i]).find("div.frm_description").html();
// if the form description content (form description/additional text field in Formidable) has content, add our help icon next to the field's label, followed by a hidden div with the description/additional field text content, which we will use as the modal pop-up content:
if (typeof helpcontent != "undefined") {
jQuery(field_list[i]).find("label").html(jQuery(field_list[i]).find("label").html()+"<a href='#frm-help-modal-"+i+"'><img id='#frm-help-modal-"+i+"' class='frm-help-icon' alt='form help icon' src='"+helpicon+"'></a><div class='frm-help-modal' id='frm-help-modal-"+i+"\'><div>"+helpcontent+"<a href='#close' title='Close' class='close'>X</a></div></div>");
}
}
});
</script>
Here’s the CSS we need to give modal behavior to the code we’re injecting into our form. Note that this can be added to your theme’s style sheet or, like the JavaScript, into the “Customize HTML” section of the Formidable form’s settings.
/* hide Formidable's regular field hint/description */
.frm_description {
display: none;
}
/* modal div container styling */
.frm-help-modal {
opacity: 0;
position: fixed;
width: auto;
height: auto;
margin: auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.6);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
/* changes to the modal div when link clicked */
.frm-help-modal:target {
opacity: 1;
pointer-events: auto;
}
/* the inner div of our modal, with the actual hint/help context */
.frm-help-modal > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
background: #fff;
font-weight: normal;
}
/* modal close link styling */
.close {
background: #176a9b;
color: #fff !important;
line-height: 25px;
position: absolute;
right: -12px;
top: -10px;
width: 24px;
text-align: center;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
border-radius: 12px;
}
.close:hover {
color: #aaa !important;
text-decoration: none;
}
And finally, here is an example form. Note the help icon next to the second field label. Click it to see the modal hint behavior.
The beauty of this approach is the purely-drop in nature of the code. Once in place in the form’s settings, it will automatically add the help icon and modal popup behavior to any field on the Formidable form where you’ve added descriptive text.