How to create a price configurator form

If you are looking to automate the offer request process, this article will help you create a price configurator form.

Let’s take an actual example so that it would be easier to follow and understand.

John is a contractor and is offering woodworking services for homeowners and businesses. His goal is to create a price configurator form so that he wouldn’t spend so much time on the phone or exchanging emails anymore.

First thing he has to do is to create a new form from blank and change the name of the form by typing Price offer for woodworking services in the label box for Title field.

Change form title

For the Subtitle or short description, let’s add the company’s name, East Woodworking Inc. Also, in the Embed image field that comes by default, he could add a company logo, so that everything looks on brand. The image can also be resized by dragging and dropping the field handles.

Subtitle & logo

John is offering three different types of wooden flooring: oak, maple or cherry. In order for respondents to choose their option, he adds a Single choice question and makes it required so that the form could not be submitted without having an answer to this question.

In the Label section on the left side panel, he has to input the question’s text: “Please select the type of wooden flooring that you want to enquire about”. In the Instructions section, he could add additional information for his respondents: “The installation costs are included in the price quotation”.

First question on the form

Because John is offering only three different types of wooden flooring, he has to edit the default choices of the Single choice question, which can be found under Edit choices.

Edit choices

A nice addition would be to add image choices for each possible choice. This can be done by clicking on the image icon for any choice.

In the pop-up, he can upload an image for each possible option and then click Save.

Image choices for Single choice

Once all images have been uploaded, this is how the form would look like:

Image choices on the form

The next step would be for John to add price information for each option. In order to that, he has to navigate to Payments and Calculation in the left side panel for the Single choice and select Price.

Payments and calculations

In the pop-up window that opens, each option can have a price configured. Let’s say that John has 9 USD for 1sqf of Oak, 11 USD for 1sqf of Mapple, 8 USD for 1sqf of Cherry.

Note: The prices applied to choices are not visible for respondents, but they can be manually added to the label in case you want to offer this level of detail for your respondents.

Assign prices for each choice

You can also choose to show prices on form by enabling this option. Each choice will have the price assigned displayed under the text.

Show prices on form

Next step would be to click on Order options in order to make sure the currency John wants to use is selected.

Order options

John also wants to collect information about the surface of the flooring from his customers. In this case, a Number field has to be added on the form. As this information is essential, the field has to be marked as required.

Number field

Since John wants to display a calculated price based on the selected wood type and the surface, he has to use a Formula field. Under the Label option, John has to input the question text: “East Woodworking Inc. will gladly take on your project for the following price:”

Formula field

What is missing now is the actual formula to be created. John has to click on Add field button and select the field with the flooring options, which will then be multiplied by the value of the field containing the surface information.

Once created, the formula will look like below:

Formula field

If John wants to have the currency displayed next to the resulting value, then Add prefix inside the field has to be checked.

Add prefix inside the field

Important note: Formula field behaves differently than any other field. It is a read-only field in which only the total amount will be displayed.

This form can totally be improved, so let’s take it step by step. Let’s assume that respondents find the offer highly competitive and want to get in touch with John.

Firstly, we can add a divider field as we are going to ask respondents contact info and we want to split the form into different sections. The divider field can be customised according to your needs.

A Text field can be added to the form where respondents are informed why John is asking for contact information, with the text: ”┬áIf you consider booking our services, please input your details so we can get in touch with you”. The label size can be changed so that it looks like the rest of the form.

Text content field

Next step would be to add appropriate fields for collecting contact information, such as First/Last name, Email address and Phone number and also make them all required.

Contact information fields

If John wants to offer his respondents the option to print the form, this can be done by clicking on the Submit button and adding an additional Print button.

Print button

The pricing information can be presented as part of the Thank you message. In this case, the Formula field has to be hidden on the form. This can be done by clicking on the Formula field and checking Hide field. Once this is enabled, the Formula field will be greyed out on the form.

Hide field

Going further, to modify the Thank you page, John has to navigate to Set up section and Thank you page.

Thank you page

John has to select the option Show HTML block and then using the dropdown menu, select the field from the form and add it to the Thank you message by clicking on Add button.

Customize ty page

If John wants to see how everything turned out, he can always use Preview and make a test submission.

Form calculations

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form for more information. in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?