Skip to content

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 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.

How to create an amazing multi-page Gravity Forms support form

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!

Buy Image Choices for Gravity Forms

9,387+ happy customers

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.