Home | Forms | How to Display a ClickDimensions Form in a Modal Dialog

How to Display a ClickDimensions Form in a Modal Dialog

We recently had a customer ask if it is possible to display a ClickDimensions form in a modal dialog on their website. The answer is, “Absolutely!” Although very little of the work needed to do so is done in ClickDimensions or CRM.

Using a modal dialog to display a form or other web content record, such as a survey or subscription page, can help emphasize the importance of the content and allow more freedom in the aesthetic design of the form and the parent web page since the two are connected to one another, but technically different items. This example shows how to have a modal dialog display when clicking a button rather than having it show up automatically when someone accesses your site. It is possible to modify the example to have the dialog display automatically, but overusing automatic pop-ups can frustrate customers, so it may be best to stick with something closer to this example where the visitor is in control.

Creating a modal dialog will require the use of HTML, CSS and JavaScript on your website. The only instance in which ClickDimensions really comes into play is that you will need to add the form’s iFrame or widget embed code into the HTML in order to have the record display in the modal dialog.

The code below is an example of how to set up your modal dialog. The structure is important to follow, but for some content, especially the CSS, the examples are just a basic starting point and the styling can be adjusted as needed to fit your company’s requirements.

Note: ClickDimensions cannot provide support on custom code.


The HTML component of the modal dialog is where you set the actual content that the dialog will contain. The only things we will be defining here are a button that opens the modal dialog and a div which contains the modal dialog’s content. This HTML should be added to the web page from which you want the modal dialog to be accessed.

<!– Trigger/Open The window –>
<button id=”myBtn”>Open Modal</button>

<!– The modal dialog window –>
<div id=”myModal” class=”modal”>
<!– content –>
<div class=”modal-content”>
<span class=”close”>&times;</span>
<iframe>the iframe code for the ClickDimensions form goes here


CSS is used to manage the visual style of the modal dialog. Depending upon how your website handles styling, this may need to be added to your page header as an internal style sheet, or added to a separate external style sheet for the entire site. The specific styling provided here is just an example and can be changed or expanded to suit your specific needs.

/* The background behind the modal dialog */
.modal {
display: none; /* modal dialog is hidden by default */
position: fixed; /* Stay in place on the main page */
z-index: 1; /* Display on top of the main page */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black with opacity */
/* Modal dialog Content*/
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */

box-shadow: 5px 10px 5px #666; /*Add drop shadow */
/* The Close Button’s default properties */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;

/* The Close Button’s properties when you mouse over it or interact with it */
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;


The JavaScript is what manages the functionality of the modal dialog; enabling it to be opened and closed. This code should be left as is during implementation.

// Get the modal
var modal = document.getElementById(‘myModal’);
// Get the button that opens the modal
var btn = document.getElementById(“myBtn”);
// Get the <span> element that closes the modal
var span = document.getElementsByClassName(“close”)[0];
// When the user clicks on the button, open the modal 
btn.onclick = function() {
modal.style.display = “block”;
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = “none”;
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = “none”;

There you have it! If you add all of this to your website, you will be able to display a ClickDimensions form (or any other ClickDimensions web content records) in a modal dialog. Enjoy experimenting with this functionality, but remember: with great power comes great responsibility.

Happy Marketing!

2017-12-12T15:32:51+00:00 By |Forms|0 Comments

About the Author:

Rhys Saraceni is a Training Developer at ClickDimensions.

Leave A Comment