The estimate request feature is added in Xodox CRM Latest Update and it’s used to create forms that your customers or potential customers can use to request an estimation of cost for services or products from your company, the estimates request feature give you the ability to add various types of fields that can be tailored for your company requirements.

For example, if your company is offering website design, your customers can request an estimate request for a website design via the form that you have previously created in Xodox CRM. 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 entered in the form, you can create an estimate in Xodox CRM and send to the customer.

The forms can be sent directly to the customer as direct link or you can embed the form via iframe directly in your existing website pages e.q. you can have a menu link on your existing company website named “Request estimate” and in this page, you can embed the form iframe.

Create estimate request forms #

The first step is to create an estimate request form, in Xodox CRM you can create unlimited number of estimate request forms, to achieve this, when logged-in as admin user follow the steps below.

• Click Setup then Estimate request->Forms.
• Click New Form.
• Add form name, for personal identification e.q. “Website estimate request”.
• Language – The language is currently used only for the validation messages.
• Submit button text – The bottom where the user will need to click to submit the form E.q. Request a Quote or Contact us, feel free to adjust to fit your needs.
• Message to show after the form is successfully submitted – This message will be shown after use successfully submit the form.
• Status – The estimate request will need to be in status after successfully is submitted into the Xodox CRM database.
• Responsible – Auto-assign the estimate request to a specific staff member.
• Notification settings – All users based on the notification type will be notified via built-in notification inside Xodox CRM and additionally, the responsible estimate request staff member will get an email notification if in Setup->Email Templates -> Estimate Request Assigned (Sent to Staff) is not checked as disabled.
• Recaptcha – You can use Google Recaptcha to prevent spamming. The field for Google Recaptcha will be shown only if you have previously configured the recaptcha keys.

After you create the form 2 new tabs will be shown in the form area Form Builder and Integration Code.

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

Add fields to form #

To add a field to the form just drag the field to the right side in the form area, note that the Email field is required to exist in the form as well must be marked as a required field.

Customize the fields #

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

After you customized the form click on the bottom left button SAVE and click on the tab Integration Code to get the code you need to add to your website. The code will be placed as iframe and you can adjust the width and height directly to the code snippet provided by Xodox CRM.

Styling #

If you need to style the color of the input fields to fit with your website you can create custom.css file in assets/css and apply the necessary styles.

Example changing inputs border color:

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

Example changing 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;
}

Redirect user to custom URL after submission #

Via FTP/cPanel go to application/helpers/ and create (if don’t exists) file my_functions_helper.php and add the following code snippet:

hooks()->add_action('estimate_request_form_submitted','my_estimate_request_form_submitted_redirect_to_custom_url');

function my_estimate_request_form_submitted_redirect_to_custom_url($data){
    echo json_encode(array(
      'success'=>true,
      'redirect_url'=>'http://yourcustomurl.com'
    ));
    die;
}

Don’t forget to include the <?php opening tag at the top of the file if it’s not already added.

Include logo in the form #

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

https://your-Xodoxcrm-installation.com/form-url?with_logo=1

Direct link sharing #

The forms can be shared directly to 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 Xodox CRM can know that the form link is shared directly and not embedded into an iframe, you need to specify the URL query string, in this case, Xodox CRM will provide better styling to the form.

https://your-Xodoxcrm-installation.com/form-url?with_logo=1&styled=1

Create multi-column form layouts #

By default, the form fields will be added in a single column full width of the document if you want to customize the form and have the fields displayed 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 won’t be applied in the form builder, only when the form is viewed by accessing the integration link or is in an iframe.

Here is a quick example:

Final result:

Assume that in your form builder you have 4 fields, as in order Name, Email Address, Company, Address.

For the first 2 fields click on the EDIT button on the top right side of the field wrapper to slide down the edit area, in the class input add an additional class for both fields form-col-6
Save the form by clicking on the save button and preview the form from the integration 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, in case you want to add 3 columns apply the class form-col-4 on 3 fields (form-col-4*3 fields will be 12 and the fields will fit the document) that are one by one in order.

Few things to consider #

1. When placing the iframe snippet code there are few things you need to consider.
   1. If the protocol of your Xodox CRM installation is HTTP then use an HTTP page inside the iframe.
   2. If the protocol of your Xodox CRM installation is https than use an https page inside the iframe.
   3. Summarized will be no SSL Xodox CRM installation will need to place the link in no SSL eq landing page and backward, SSL websites with SSL Xodox CRM installation and no SSL website with none SSL Xodox CRM installation. You can read more about this here