How to create an amazing multi-page Gravity Forms support form
How to create an amazing multi-page Gravity Forms support form using JetSloths premium Gravity Forms addon Image Choices for WordPress.
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.
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.
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.
We’ll keep showing you great examples of how powerful Gravity Forms and JetSloth add-ons can be to making your forms looking great!
Buy Image Choices for Gravity Forms
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.
