The quote request feature is used to create forms that your potential customers can use to request a quote or information about the services or products your business offers, the quote request feature gives you the ability to add different types of fields that can be tailored to your business needs.

For example, if your company offers website design, your customers can request a quote for a website design via the form you have previously created. Usually the forms will have more general questions like “What is your budget”, “Urgency”, “Type of website”, etc. and based on the information the customer has entered in the form, you can create a quote and send it to the customer.

Forms can be sent directly to the customer as a direct link or you can embed the form via iframe directly into your existing website pages, for example you can have a menu link on your existing company website named “Request a quote” and in this page you can embed the iframe form.

Create quote request forms #

The first step is to create a quote request form. You can create an unlimited number of quote request forms. To do this, when logged in as an administrator user, follow the steps below.

• Click on Settings and Request Quote→Forms.
• Click on New form .
• Add the name of the form, example: “Website Quote Request".
• Language – The language is currently only used for validation messages.
• The submit button text- It will be at the bottom where the user should click to submit the form Example Request a quote ou Contact us, feel free to adapt it to your needs.
• Message to display after successfully submitting the form – This message will display after successfully submitting the form.
  
• Status – What status will the quote request have after being successfully submitted in your Djaboo space.
  
• Responsible – Automatically assign the quote request to a specific member of staff.
  
• Notification settings – All users based on the type of notification will be notified via an embedded notification in Djaboo and additionally the member responsible for the quote request will receive an email notification if in Settings-> Email Templates -> Quotation request assigned (sent to Personal) is not checked as disabled.
  
• Recaptcha – You can use Google Recaptcha to prevent spam. The field for Google Recaptcha will only appear if you have previously configured the recaptcha keys .

After creating the form, 2 new tabs will be displayed in the Form Builder and Integration Code form area.

• Form Builder – The place where you create the form and adjust all the fields you need.
• The embed code is the code you will need to place on your website for the form to display, note that from the link you will be able to see that each has a unique key.
  

Add fields to the form #

To add a field to the form, simply drag the field to the right in the form area, note that the Email field should appear in the form and should also be marked as a required field.

Customize fields #

You can customize labels, add help text, placeholders and make them required. When you drag the field into the form area, just hover over the field on the top right, you will be able to see 3 buttons (edit, copy and delete)

After customizing the form, click the button at the bottom left RECORD and click on the Embed Code tab to get the code you need to add to your website. The code will be placed as an iframe and you can adjust the width and height directly to the code snippet provided.

Style #

If you need to customize the color of the input fields to suit your website, you can create a custom.css file on your site and apply the necessary styles.

Example of changing the border color of entries:

body.estimate-request-form input {
   border-color:red;
}

Example of changing the submit button background color:

body.estimate-request-form #form_submit {
   background:red;
}

body.estimate-request-form #form_submit:hover,
body.estimate-request-form #form_submit:active {
   background:green;
}

Include the logo in the form #

To include your company logo in the form, you can share or embed the URL with the query string parameter as shown below:

https://votre-entreprise.djaboo.appform-url?with_logo=1https://votre-entreprise.djaboo.app/form-url?with_logo=1

Direct link sharing #

Forms can be shared directly with your customers without actually embedding the form on your website, this feature is useful for example if you want to include a link in emails, SMS, etc.

In order for Djaboo to know that the link of the form is shared directly and not embedded in an iframe, you must specify the URL query string, in this case Djaboo will provide a better style to the form.

https://votre-entreprise.djaboo.app/form-url?with_logo=1&styled=1

Create multi-column form layouts #

By default the form fields will be added in a single full width column of the document if you want to customize the form and display the fields in multiple columns we have added the ability to achieve this with custom classes applied to the field you can add up to 12 columns in 1 row.

In the following example, we will create 2 fields in 2 columns and 1 row.

Keep in mind that the columns will not be applied in the form builder, only when the form is displayed by accessing the embed link or is in an iframe.

Register the form by clicking the Save button and preview the form from the embed link to see the final result.

As mentioned before, you can add up to 12 columns, in this case, form-col-6 + form-col-6 = 12, if you want to add 3 columns, apply the form-col-4 class on 3 fields ( form -col-4*3 fields will be 12 and the fields will fit the document) which are one by one in order.

Because in most cases you will be embedding the form in a small container/part of your website, the CSS bootstrap grid will always display the columns of new rows (not split into 2 columns), in this case consider d 'add another extra class for small container, for example if you added class form-col-6 , add another class for small area form-col-xs-6 , click here to check how it should look like.