Forms a-poppin’!
Modal pop-up form.
Namaste!
Today I’m going to show you a quick, bare-bones way to add a modal pop-over form to your Divi-powered site. This will allow you to grab user information without navigating away from the current page. In this case, the pop-over triggers when the user clicks a custom button. This tutorial will leave a lot of the CSS styling up to you, but if you run into any trouble, feel free to reach out for help!
My approach for this is to use several Code modules – one containing the form, one containing the javascript to show and hide the form, and a final Code module for the trigger button. I’ll explain later why I can’t use the Divi Button module.
So, the first step is to scroll to the very bottom of your page in the Divi Builder and add a new section. Go to the settings for the section and within the Custom CSS tab, add an ID of “hiddenCode” (don’t add the quotes). This will allow us to make sure these sections don’t show up on our page. Within that section add two full-width Code modules.
In the first, we will put our form. In this case, I’m going to use a form from the Huge-It plugin. You can feel free to construct your own with HTML, or use any other form plugin (like Caldera or Gravity forms) that generates a shortcode. In my case I’m just going to paste the shortcode into the code module, wrapped in several divs to give us control of the visibility.
<div id="formWrapper">
<div id="theForm">
[huge_it_forms id="1"]
<img id="close" src="http://localhost:8888/Spring-Hill-Design/wp-
content/uploads/2017/02/close.png" onclick ="div_hide()">
</div>
</div>
There are two outer wrappers with IDs “formWrapper” and “theForm”. We can also use these for styling. Next we have the form shortcode, followed by an img tag. This image is what the user will click to close the window and you’ll have to add a link to your own here. As you can see, I added an “onclick” event. This references a javascript function that will be run when a user clicks the image.
In the second, we will put our Javascript, including the one referenced in our “onclick” above:
<script>
function div_show() {
document.getElementById('formWrapper').style.display = "block";
}
function div_hide(){
document.getElementById('formWrapper').style.display="none";
}
</script>
There are two javascript functions that elements on our page can now access. The first will target our outer form wrapper to display when our button is clicked, while the second will rehide it when our close image is clicked. If you are already loading custom javascript onto your page, you could also include this code there instead.
Next, the button. Navigate to the section where you want the button to appear and put in a code module. The add you HTML markup for the button, making sure to add an “onclick” event.
<div> <a class="main-button uppercase" onclick="div_show()">Get Started</a> </div>
I think mine looks pretty good! Last part is to add in our CSS.
#hiddenCode {
height: 0px;
padding: 0;
}
#formWrapper {
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto;
z-index: 100;
}
#theForm {
position:absolute;
left:50%;
top:25%;
margin-left: -20%;
font-family:'Raleway',sans-serif;
background-color: #fff;
}
#close {
position:absolute;
right:-14px;
top:-12px;
cursor:pointer;
height: 25px;
width: 25px
}
#hugeit_contact_wrapper_1 {
padding: 5px 10px;
}
.main-button {
border: 1px solid #00F;
background-color: #ffe63b;
}
Starting at the top. First we target our section containing our two new code module. We don’t want this showing up on our page, so we set the height to 0px. We can’t hide it because we want our form to show up later.
Next, we set the outer formWrapper to completely cover the existing page with a dark grey background, you can experiment with how much opacity you want. Here we also set it to initially be hidden using “display:none;”. We also use z-index to overlay it on top of all our other page elements – if you have used this elsewhere you might need to readjust this number.
The next item to style is the form itself. Depending on the size of the form and what headers or other elements you have on the page you will have to alter these numbers. You might also want to add some padding. I added padding to mine by targeting one of the form elements (“#hugeit_contact_wrapper_1”). You will have to determine what is best in your situation.
The “#close” targets the image we are using to close the pop-over, in my case a red X in a circle that I positioned at the upper-right of the form. Again, you can fool around with size and position to get it how you would like. Finally, we add rockin’ style to the button. Nothing says looking good like lemon yellow!
Hope this helps somebody out. If you have any questions, leave a comment or shoot me an e-mail!
