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() { var helpicon = "<?php echo get_stylesheet_directory_uri(); ?>/images/help.png"; var field_list=jQuery("#frm_form_9_container").find("div.frm_form_field"); var helpcontent; for(var i=0;i<field_list.length;i++) { helpcontent = jQuery(field_list[i]).find("div.frm_description").html(); 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.
.frm_description { display: none; } .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; } .frm-help-modal:target { opacity: 1; pointer-events: auto; } .frm-help-modal > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; background: #fff; font-weight: normal; } .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.