Showcase: Multi-page form w 3rd party integrations

General Discussion
, , ,
1

Wanted to share a showcase of something we’ve spent months building entirely in Gravity Forms.
https://quote.prosper.insurance/

You punch in your information and it gives you Insurance rates for a number of companies in VA, TN, NC, SC, MD, GA.
User information is piped into Salesforce via API with all the submitted data and API responses for followup by sales agents.

It’s an AJAX multi-page form using nested forms from Gravity Perks as well as a few 3rd party APIs:

  • ‘Estated’ to pull property data
  • Google Places for address prefill
  • Turborater Rate Engine API for multi-carrier insurance rates (very pricey)
  • Zywave Vehicle year/make/model database
  • Salesforce API for lead processing
  • Neptune and NGIC Flood rating APIs

Some of the main plugins used are:

  • Gravity Perks Nested Forms
  • Image Choices by Jetsloth
  • Auto Advance by Frog Eat Fly

Basically once the user submits their info we show a loader on the confirmation page and fire off a bunch of ajax requests to API services. When these are finished loading we save the API responses to a CPT in the db, fake finish the loader progress and redirect the user to the results page.

Happy to answer any questions if anyone is considering similar projects. Some of what took the longest was figuring out how to incorporate the long processing time (up to a minute to get API results) and obviously the API requests/responses.
We might outgrow it one day, but so far GF has handled everything we have thrown at it!

If you’re on the East coast or even in Virginia Beach (where Gravity Forms is based) feel free to get an insurance rate for home and Auto. :wink:

7 Likes
2

Simon, great job. I have the Image choices running on our sandbox but haven’t gone live with it, just experimenting. I have some questions if you don’t mind.

Is it a chore to parse out the address to 4 fields in Salesforce when the user enters from google places?

What are you paying for Zywave?

Can you describe how/where/why you’re using Gravity Perks and Auto Advance?

I have a very similar application for autos, not for insurance, but this is inspiring.

3

2 more Simon. Do you find the image choices implementation is a burden on page loading speed? This looks fabulous on a desktop, was it a lot of work to get everything oriented and scaled for mobile users?

4

Hi EastWest,

Parsing out the address is simply part of the job. Considering we parse out over 60 other fields and map into over 300 fields for insurance rating, it’s not a significant task.

The Zywave vehicle API comes as a part of the Turborater package, so there is no standalone price. I’m sure there are other APIs that will do the same standalone. What’s nice about this one is it will provide a VIN stub for every model that we can use to rate with. (we put it in a hidden field).

We are big fans of Gravity Wiz and their perks and use it a lot on some other sites. On this one we actually only use the Nested Forms plugin to allow users to add multiple vehicles. It’s recently out of beta and I highly recommend them and the plugin.

The Auto Advance plugin lets the user select an option and move to the next page without clicking NExt. It also hides the Next button. Very useful for pages where you only want the user selecting one option.

The image choices doesn’t add a lot to the pagespeed, no. Just make sure you’re optimizing your images and using something like autoptimize to concatenate all the extra js/css. As with any project there has been a lot of responsive tweaking since our site visitors are about 50/50 desktop/mobile and we need it to work well with both. Image choices didn’t make this more difficult than it usually is.

1 Like
5

This is great information, Simon. Thank you for sharing.

1 Like
6

Very cool project and good write-up Simon!

Does the setup allow the user to come back to retrieve their quote/info or be able to deliver via a notification email? If not, an answer I wrote on a separate community post related to file retrieval by unique ID might be of interest.

For truly asynchronous request handling, the Gravity Flow Incoming Webhook step type could make some of that handling for future projects simpler. You could keep the same confirmation spinner / result scenario, but only need to be polling the current step while the rest of the API handling is firing in the background.

7

Hi Jamie, thanks for the feedback.

We have been lucky enough to have resources for custom plugin development surrounding all the API integrations, but that’s really cool and I’m sure others will be excited to know that a lot of this is possible with Gravity Flow.

It is possible to re-view a result since it’s simply an ID lookup using a CPT page template (like so; Get a Quote - Prosper Insurance ), but it’s not really in our interest for this scenario. The moment a user goes through the flow they are handed off to our CRM (Salesforce) and to sales processes that live there.

8

Simon, did you source the illustrations/images that you use in the different image choices? I’d like to find a source for all of my automotive images that are also lightweight without significant size for optimization.

Did you find a practical max limit on the number of pages to any of your gravity forms before cutting them up and connecting them with nested forms?

9

Yes we had a designer provide custom icons.

We didn’t hit a performance issue with a specific number of pages. We employed nested forms because GF doesn’t have an easy ‘repeater’ field and we needed our users to enter X amount of vehicles. Nested forms is perfect for that.

10

I have multiple vehicles sometimes also, but we handle it differently. I’d like to see how nested forms handles it.

I have a radio button at the bottom of the vehicle page, “do you have another vehicle?” and if yes, display a “conditional page 2” and then at the most a conditional page 3.

11

Interesting. We have a max of 6 vehicles so that would technically work but maybe be a bit heavier.

You can view the nested form by selecting ‘Auto’ on page one and following the form to vehicles. When you click ‘Add vehicle’ you’re looking at a nested form.

12

Your way is less upkeep because you’re not duplicating all the fields for a vehicle, page after page. If you want to revise the page, you only have to do it once your way.

13

Simon, thanks for all the info. Is it possible to contact you directly to get some ideas and help from you with a project? thanks

Eugene

14

Simon, this is excellent.

here’s mine. https://www.dibni.co.uk/

We cover all general commercial insurance products.

There are 73 forms, due to the uniqueness of each insurance product. We use a Post Code Finder API, which needs to be changed every 30 days on each form, which is extremely annoying and have to use an RPA to achieve this, currently using UIPATH, as we cant bulk edit a single field. I can do it is I export all forms. find and replace API code, and then import all forms again. But then I have to re-configure, confirmations, notifications, Gravity PDF, and ZOHO CRM for each from. very annoying.

These are the plugins:
BCT for Gravity Forms
Beauty Form Styler for Gravity Forms
Bulk Actions for Gravity Forms
CSS Ready Classes for Gravity Forms
Edit Entries for Gravity Forms
Gravity Forms - Uploads as Attachments
Gravity Forms All Fields Template
Gravity Forms Chained Selects Add-On
Gravity Forms Custom Javascript
Gravity Forms Range Slider
Gravity Forms Related Fields Add-On
Gravity Forms Signature Add-On
Gravity Forms Webhooks Add-On
Gravity Forms Zapier Add-On
Gravity PDF
GravityExport Lite
GravityStripe Subscription Management
GravityWP - CSS Selector
GravityWP - Merge Tags
Live Summary for Gravity Forms
Multiple Columns for Gravity Forms
Save and Continue Link Recovery for Gravity Forms
WP Gravity Forms Zoho Add-on

We would love to have one form, where the user can make selections to get to the right place, but its just not possible.

The form questions are formed using Excel, then mail merged to the form script using Word , then we have to use VISUAL STUDIO CODE, to import the form to Gravity.

So it took a few years to put together, but now a new form, with say, 200 questions, takes about 20 minutes to create from start to finish.

Your form looks absolutely fantastic. We had to make do with Beauty form styler, to make the forms look a little less “crap”. But it still doesn’t look anyway near as professional as other similar sites.

As the forms are the main part of our site, we are always trying to improve, so finding your post, is a real big help.

Thank you form posting

GAz

1 Like
15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.