The WordPress Gravity Forms plugin for constructing complex forms easily on WordPress based sites has been my forms plugin of choice for a few years now ever since I graduated from the clunky and under-powered Contact Forms 7. The value of Gravity forms was highlighted to me on a recent job when I had to rebuild an existing old site with WordPress. The only catch on an otherwise straightforward project was that the client needed to keep his elaborate Quote form.
This quote form basically asked the website visitor for the number of windows in their premises and the dimensions of each one before supplying a quote live on the form page and for 3 different styles of shutter! It also gave quotes for optional extras for each style… Finally the visitor had the choice of emailing the whole quote to themselves. A lot of dynamic field creation based on user choices and some live calculating to be done too. Lots to do!!
I knew the power of Gravity Forms and was kinda confident but it turned out to be a big job that needed all of the plugins power and some revisiting of maths formulas from my school days! I also needed to contact Gravity Forms support for advice and as usual they were quick and helpful. Kudos to Rob there.
Here’s what I needed to do:
Inches to Millimeters Conversion
My client needed dimensions in (mm) so the form needed to provide a way for visitors to easily convert their inch measurements if that’s all they had. I added a converter which was simply a ‘number’ field which allowed inputting of inches then another corresponding number field that automatically calculated the (mm) as below. I also added a Radio field above this that asked whether people needed help converting or not and if they did, only then would the converter show. This was made possible by Gravity Forms’ excellent ‘Conditional Logic’ function:
Number of Windows
The visitor can pick their amount of windows from a drop down list. That’s the easy bit. But this form had to then dynamically create both Width & Height fields for whatever number they chose. I achieved this using a pile of number fields and some more Conditional Logic. Basically, show 3 width & height number fields if the number of windows chosen is greater than 2, etc.. Here’s an example:
The Main Quote
After gathering all the window dimensions, it’s time to provide the total of the quote, live on the page. For this I used a Gravity Form Product Pricing field with Field Type = ‘Calculation’ which basically takes all the window dimensions and multiplies them together then ads each window area then divides by 10, multiplies by a pricing unit and divides the whole lot by 100 to get the quote in euros! Same process for the other style windows. See below and take special note of the length of that Formula box:
Extras Calculation
There were some extras offered on the main quote above. I done that by adding another Pricing field and doing something similar to the above. It takes the total from above and multiplies it by a percentage pricing unit to give the additional extra amount.
Email Quote
This was the final and easiest bit. Back to simple form functions and asking for basic visitor details, ie – name, email etc so that the quote details could be sent to the visitor’s email address.
Notifications
Normally I don’t bother formatting the Gravity Form notification emails. The default ‘All Fields’ option is usually adequate but this lengthy form required a bit of attention to detail. Both the visitor and client needed to get the quote results in a tidy email they could easily refer to and understand and the default notification options just didn’t cut it. See below for the visitor’s notification format I came up with using headings and merge fields:
The final live Quote Form is available to view here for anyone interested in seeing it in action:
www.Shutters.ie
Leon
Reverb Studios Design 