Propose a quote online with Caldera Forms and WordPress [Quick Guide]

12:49 pm March 6, 201711967

a quote online with Caldera Forms? It’s possible! Indeed, Caldera Forms is a plugin that allows you to build any type of form on your WordPress site. If you can create a contact with the latter form , you can also offer a quote online as there are specific fields that generate some calculations, even the most complex…

Before begin you the creation of this type of form, must clearly identify your needs and define what are the fields that you want to appear. I propose to see step by step what are (non-exhaustive) steps to achieve this!

step 1: create the form

as a first step, you need to install the Caldera Forms plugin you will find the official directory of WordPress for free on .

Créer un formulaire de devis en ligne avec Caldera Form

Then you can create your first form in just a few clicks:

  1. go to the tab Caldera Forms > forms
  2. click new form
  3. choose “Blank form” and name it as you wish, for my example, it is called “Online quote”
  4. click the “+” to add a
  5. section

  6. then by drag-and – drop, add your first field

step 2: set the fields

Définir les champs du devis en ligne

after sliding your first field in the section, a window will open to give you the opportunity to choose your field types. For a quote form, you may need to insert fields which offer to select one or more options:

  1. in this case, it is in the tab “Select, you will find these types of fields, you can then select to insert a “drop-down menu” or “radio button” for a choice of single or a “checkbox” for multiple choices.
  2. Click “Set field” in order to insert it and set it up
  3. give a title to your field, specify whether it is a “required” fields and add a class if you want to change the Visual of your form later with CSS… You can also add a description.
  4. Add as many options as necessary: for example of my field named “internet site”, I created three options (window, blog and e-commerce site) using a radio button, which means that the person who filled out the form cannot choose one of these options.
  5. Check the box “show values” that will allow you to assign an amount for each of the options . This is step is crucial to achieve a quote online. Do not specify the currency “€” , enter only the amount: for example enter “100” for an option to a value of 100 .

step 3: add conditions

some fields that you create can become unnecessary or well essential according to the selection chosen by the person who completed the form. For my example (screenshot below), if we opt for an “e-commerce” site, I want to offer different rates depending on the number of products offered in the store. This implies that the field allowing to choose the item number should not appear if we chose a “showcase site”. You therefore create conditions according to your wishes and your fields by going to the tab “Conditions” .

Conditions pour devis en ligne avec Caldera Forms

  1. Click “Add a conditional group”
  2. enter the name of your condition
  3. choose to display or not display this group by using the dropdown named “Type”
  4. then click on “Add condition”
  5. set your condition: using the first drop-down menu, select the field that must be subject to the condition. The second drop down you will be used to define the desired action (“is”, “is not” etc…). The third drop applies the condition depending on the option chosen.
  6. Select the fields to apply the resulting condition. For the example in the screenshot above, my condition is: display if “Web Site” is “e-commerce” and this applies to my field “number of products” .

In the same way, you can create as many conditions as necessary. You can even create several groups within the same condition. Simply tailor it according to your project and your needs.

step 4: Add a ‘TOTAL’ section

the “total” section will allow you to see directly and dynamically total options selected by the customer.

Section total

  1. Add a new field: it’s “Spécial” tab you will find the appropriate field named “computation”
  2. enter the name of the field
  3. If you need add a custom class (to change the CSS)
  4. define what information must appear before and after the amount of calculation. For example, “before = Total:” / “after = €”
  5. choose the separators to display for thousands and decimals
  6. start to build your bill by clicking on “Add a group of operator” . You can add as much as you want.
  7. In each operator group, you can add as many lines as you need by clicking on “Add Line”
  8. do not forget to save your form

step 5: set notifications

now that you have created the fields, with or without conditions, your form is complete. However, it is necessary to set up notifications to receive when a user makes a request for a quote on your website.

Caldera forms - paramétrer onglet DE

Tab “To” :

  1. enter the name of the sender: that you will see in the email you will receive
  2. enter your personal email address: [email protected]
  3. in “response email” , use the value of the field on your form, for example %email% . This will allow you to be able to respond directly to the customer from your e-mail
  4. enter the subject of your e-mail
  5. build the content of your email, or even use {summary} for a summary of the application
  6. you can also make the choice not to receive no notification

step 6 : Add a form treatment

Traitement du devis en ligne

you can add a processing your form tab ‘Treatments’ :

  1. click “Add treatment”
  2. you can send a auto answer to the user. This will be done by sending an email to
  3. you can redirect the user on another page of your site or even a URL external
  4. you can add an increment value
  5. you can add a filter anti-spam and other add-ons available

step 7 : Set the settings of the form

Définir les réglages du devis en ligne

Finally, it will go to the tab ‘Settings of the form’ where you can:

  1. get the shortcode of your form
  2. decide whether to retain data
  3. make appear your form entries in a Caldera Forms menu subtab
  4. make disappear the form once the user for clicked the button ‘send’
  5. Add a “honey pot” which is an extra field visible only for robots, this will avoid to receive some spam
  6. enter the message to show in case of successful submission of the form

step 8: build your quote online

form

when your form is ready and that all your reglages are to the point, you can then insert your form on a page dedicated to this, either by copying-pasting shortcode of your quote form online within your editor either by clicking on the button “Caldera Form” located to the right of the button “Add media” . Before publish your page, do not hesitate to carry out several test in order to check the proper functioning. Here is the result of the test:

alternatives to make a quote online

Plugin alternatifs pour devis en ligne

of course, there are many plugins that will allow you to achieve an online quote form. As an alternative to Caldera Forms, you will be able to turn to premium such as plugins WordPress Project Cost Calculator or even Quote Management Plugin for WordPress who are specialists in the field plugins!

You can also turn to Gravity Forms and create a online quote just as powerful. Otherwise, you will have the solution of a specific development of manual way.

in conclusion…

The flexibility and simplicity of Caldera Forms allow to achieve more complex forms which those provided for online quotes… The most difficult will be to study what are your real needs in order to choose the most appropriate solution can turn…