Create stunning looking forms with Gravity Wiz’s Page Transition perk and JetSloth’s Image Choices
Our Friends at Gravity Wiz have recently released their amazing Page Transitions Perk in public beta. Together with JetSloth’s popular Image Choices add-on, the two go hand in hand to create beautiful & interactive forms and add a Gravity Forms Page Transition effect. Learn how by downloading our demo form and embedded CSS to create a dynamic sliding form on your website.
Bring your Gravity Forms to life with animated transitions between form pages and Image Choices.
The Wizards over at Gravity Wiz have recently released their beta version of a new Gravity Forms perk called Page transitions. We saw an early version and demo of this perk on their website some time ago and just had to develop a CSS style for this perk, along with the use of our popular Gravity Forms add-on Image Choices.
The two go hand in hand so we couldn’t resist designing a beautiful skin for a demo form to showcase just how well the two add-ons will work together.
Live Demo
Try it out
We’ve designed and built a special demo to help demonstrate how great the 2 add-ons work together! Once you have both add-ons installed and up and running, grab the below CSS from this tutorial, and apply it to your form.
Image Choices & Page Transitions
You’ll need the below Gravity Forms add-ons
To get started with this tutorial, you’ll need the 2 below Gravity Forms add-ons. Our very own Gravity Forms Image Choices, and Gravity Wiz’s Page Transitions Perk.
Gravity Forms Image Choices
Easily add images as choices for Radio Buttons or Checkboxes fields within Gravity Forms. Includes support for Survey, Quiz, Product and Options.
Add the CSS to your Image Choices form
Copy and paste the below custom CSS styles to your form settings (via the image choices plugin custom CSS box) or via any method you are used to, applying custom CSS changes to your theme or form. If you’re not comfortable doing this just download the form export below, which has the CSS included in the export. Note, you will need both add-ons mentioned above installed, however for the form export to work.
The below CSS will only work with Gravity Forms version 2.6+
/* Style form wrapper max width 900px */
.gppt-has-page-transitions_wrapper {
background: #FFFFFF;
border: 1px solid #EBEBEB;
box-shadow: 2px 3px 4px 0 rgba(33,39,47,0.05);
border-radius: 8px;
max-width:900px;
min-height: 560px;
margin:0 auto;
}
/*Remove space below gfields*/
.gform_fields>.gfield {
margin-bottom: 0!important;
}
/*Make the lables left aligned*/
.gform_wrapper.gravity-theme .gfield_label {
display: block;
margin-bottom: 0;
text-align: left;
}
/* Heading Form heading */
.gppt-has-page-transitions_wrapper .gform_title {
display:none;
}
.gppt-has-page-transitions_wrapper .gform_heading {
padding: 0;
}
.gppt-has-page-transitions_wrapper .logo {
float: left;
margin-left: 50px;
margin-top: 6px;
}
/* Form logo and description */
.gppt-has-page-transitions_wrapper .gform_description {
display: block;
padding-top: 40px;
padding-right: 50px;
width: 100%;
text-align: right;
font-weight:normal;
color: #8297a7;
font-size:15px;
}
.gppt-has-page-transitions_wrapper .image-choices-use-images label {
display:none;
}
/* Remove progress bar margins */
.gf_progressbar_wrapper {
margin:0px;
padding:0px;
}
/* Hide page steps title */
.gppt-has-page-transitions_wrapper .gf_progressbar_title {
display:none;
}
/* Remove progress bar margins */
.gppt-has-page-transitions_wrapper .gf_progressbar_wrapper {
margin: 0;
padding: 30px 50px 0 50px;
}
/* Hide page steps title */
.gppt-has-page-transitions_wrapper .gf_progressbar_title {
display:none;
}
/* Style pgress bar */
.gppt-has-page-transitions_wrapper .gf_progressbar {
background: #F3F3F3;
height: 5px;
overflow: hidden;
border: none;
border-radius: 3px;
padding: 0px;
margin: 0px;
}
.gppt-has-page-transitions_wrapper .gf_progressbar_percentage {
background: #0076FF;
height: 5px;
margin: 0;
border-radius: 3px;
}
.gform_wrapper.gravity-theme .gf_progressbar_percentage {
height: 5px;
}
/* Style Footer */
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer {
min-height: unset;
border-top: 1px solid #EBEBEB;
padding: 20px 50px;
margin:0;
display:flex;
justify-content: flex-end;
align-items: stretch;
}
/* Remove padding from fields group */
.gppt-has-page-transitions_wrapper .gform_page_fields {
padding: 15px 50px 0 50px;
margin: 0;
}
/* Hide field lables */
.gppt-has-page-transitions_wrapper .image-choices-choice label.gfield_label {
display:none;
}
/* Style content in HTML field */
.gppt-has-page-transitions_wrapper .gfield_html h2 {
font-size: 20px;
color: #1D1D1F;
letter-spacing: -0.44px;
line-height: 28px;
margin: 0;
font-weight:bold;
text-align: left;
}
.gppt-has-page-transitions_wrapper .gfield_html p {
font-size: 15px;
color: #4C6A85;
line-height: 29px;
text-align: left;
font-weight:normal;
margin: 0;
padding: 0;
}
/*Next Button style*/
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_next_button,
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_previous_button,
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer .gform_button,
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer input[type="submit"]{
border: none;
color:white;
margin:0;
border-radius:5px;
font-size: 16px;
font-weight:700;
color: #FFFFFF;
letter-spacing: -0.36px;
text-align: center;
padding: 20px 35px;
}
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_next_button,
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer .gform_button,
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer input[type="submit"]{
background:#0076FF;
}
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_previous_button {
background:#B1C0CF;
}
/* Mobile Styles */
@media (max-width: 640px) {
/*Mobile Form Styles*/
.gppt-has-page-transitions_wrapper {
min-height:unset;
}
.gppt-has-page-transitions_wrapper .gform_body.gform-body {
overflow: visible!important;
}
.gppt-has-page-transitions_wrapper span.gform_description {
text-align: left;
padding-right: unset;
padding-left: 10px;
width: 100%;
padding-top: unset;
}
.gppt-has-page-transitions_wrapper .gform_description img.logo {
margin: 0 0 20px 0;
margin-top: 0;
display: block;
float: unset;
}
.gppt-has-page-transitions_wrapper {
border:none;
background:none;
box-shadow:none;
}
.gppt-has-page-transitions_wrapper .gform_page_fields {
padding: 10px;
}
.gppt-has-page-transitions_wrapper .gf_progressbar_wrapper {
padding: 10px 10px 0 10px;
}
/*Image Choices mobile styles*/
.gppt-has-page-transitions_wrapper .image-choices-field .image-choices-choice:after {
bottom: -20px;
}
.gppt-has-page-transitions_wrapper .image-choices-field .image-choices-choice.image-choices-choice-selected .image-choices-choice-image-wrap:before {
width: 100%;
}
/*Footer styles*/
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer {
border-top: none;
position: relative;
display: block;
padding: 0 10px;
margin: -10px 0;
}
/*Button styles*/
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_next_button,
.gppt-has-page-transitions_wrapper .gform_page_footer .gform_previous_button,
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer input[type="submit"]{
width:100%;
display:block;
margin: 0!important;
}
.gform_wrapper.gravity-theme .gform_previous_button.button,
.gppt-has-page-transitions_wrapper .gform_page .gform_page_footer input[type="submit"]{
-webkit-appearance: none !important;
background-color: #ebe9eb;
margin-bottom: 10px!important;
}
/*Input mobile styles*/
.gform_wrapper.gravity-theme .gfield input.medium, .gform_wrapper.gravity-theme .gfield select.medium {
width: 100%;
}
}Gravity Forms Page Transition settings
The page transitions are fairly limited and easy to work with, so no problems here. In the demo above, we’ve gone with a user click activation to slide to the next page, with the slide transition effect. We’ve tested this demo with both new and legacy Gravity Forms markup, so you should not have any problems using this demo with older forms or Gravity Forms versions.
For best results, we recommend having all your Gravity Forms, Gravity Forms add-ons and WordPress core + theme up to date, however.
