How to create an amazing multi-page Gravity Forms support form. We love creating and showcasing what our Gravity Forms add-ons can do. With a bit of creativity and CSS know-how, you can push the boundaries to get your forms looking unique and super interactive.
See how we designed and built our updated product support form before it goes live. Try the demo and tell us what you think! How to create an amazing multi-page Gravity Forms support form
The brief
The brief was fairly basic. Dramatically improve on our currently stale support form to give the user a more visual and interesting experience.
The Result
Make sure you test run a live and interactive version of the built form. Our support form uses our Image Choices & Collapsible Sections add-ons so make sure you check those out too.
How we did it
The first point of call was to put together a design of what we wanted it to look like. This design would then indicate what assets we needed to prep for the image choices.
We knew we wanted an immersive fullscreen experience so the user was focused on simply just submitting their product support enquiry.
The add-ons you’ll need
You’ll need a copy of our Image Choices and Collapsible Sections addons. If you don’t already have these, we’ve got a Gravity Forms Sloth Bundle where you can purchase all 4 of our Gravity Forms add-ons for the cost of 3. Super saver right there. Grab the add-ons and install them onto your site. of course, make sure you have Gravity Forms installed too.
Custom CSS
Using the custom CSS box found in the Image Choices plugin settings page, we styled and added all of our custom CSS. Within here we also added custom CSS styles to make our Collapsible Sections look great too.
Pro Tip
We added the Gravity Forms ID to each of the class names so that are styles would only be applied to the form we want, and the CSS would not affect any other form. Note the extra CSS ID “#gform_wrapper_48” in all of the CSS.
Going Full Screen
Nothing too fancy here, but we thought we’d get tricky and have the support form initial hidden on the page. Then use jQuery to fade the hidden form into view when the user clicks the “Support Demo” button. We hide the form from the page by adding “display:none” to the forms wrapper class, in this case, #gform_wrapper_48.
We then added a HTML field to the form itself, within that we added the required jQuery to show the form on button click.
In Summary
The resulting form looks great and much more engaging than our current support form. Even asking for support should be a nice experience don’t you think?
We’ve still got some enhancements to make before we roll this form into our live support form, however, but it’s a great start.
Please note that this is an example and inspiration of what you can do with custom CSS, and our add-ons. You will likely need to engage with a freelance web developer if you are not confident with basic CSS and a little jQuery. Read our support article for more info
We’ll keep showing you great examples of how powerful Gravity Forms and JetSloth add-ons can be to making your forms looking great!
Please be sure to drop us a line or share on facebook or twitter, instagram.
