Full page confirmation message Gravity Forms

GravityWPGravityForms0 Comments

Do you want to have a full page overlay confirmation message in your Gravity Form? Here you will find some inspiration on how to achieve that.

Overlay with close button

With thanks to W3schools, we’ve tried to make a full page overlay from our confirmation message. Read here the whole article on W3Schools.
You can test the overlay confirmation for Gravity Forms here. Just fill in your name and hit ‘Submit’.

How to change the Gravity Forms confirmation message?

First add the following divs to the Confirmation of your Gravity Form:


Download confirmation html (PDF)

Add CSS

Than add this css to your website or page:

.overlay2 {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 102px;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay2 a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay2 a:hover, .overlay2 a:focus {
color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay2 .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay2 a {font-size: 20px}
.overlay2 .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}

Add javascript

Than add this javascript to your website or page (for the close button):

function closeNav2() {
document.getElementById("myNav2").style.width = "0%";
}

Share this Post