Zeablue Forms
Zeablue Forms can be used to collect information about new customer leads or product-related inquiries. They're especially useful for pages on your website that require visitor information, such as contact us, returns merchandise authorisation (RMA), or register warranties.
Using Zeablue Forms for these pages removes the need for double entry of hot leads and prospects.
Create a new Zeablue Form
Create a Zeablue Form: Quick tutorial
- Create the form in Qblue (CRM > Forms > +New form) with the required fields, such as first and last name, company name, phone number, email, etc.
- Add the form to your website by either embedding it directly on your "contact us" website page or linking to a hosted version of the form.
- When someone submits an enquiry:
- Their details are immediately saved into the forms submissions page (Forms page). You can quickly convert them into new leads, tasks, jobs, or customers.
- At the same time, an email notification is sent to your inbox.
Create a Zeablue Form: Step-by-step guide
On the Forms page, click +New form. This takes you to the form designer page.
On the form designer page, fill in the form header details.
Here's what each header field means.
| Header field |
Description |
| On confirm |
When a form is submitted, the entry appears in Qblue and can be easily converted into a customer, lead, task, or job. |
| Button colour code |
Foreground colour for the submit button (default & hover colours). Use a hex code starting with # (e.g. #1a73e8). You can pick a colour at W3Schools Color Picker or from other websites. |
| Button background colour code |
Background colour for the submit button. |
| Button radius |
Radius value; controls how round the submit button appears. The higher the number, the more round the button. |
| Screen background colour code |
Background colour of the form page. |
| Field 3 title |
This field is reserved; leave blank. |
| Display in iframe |
Toggle this on if you plan to embed the form on your website; contact your website programmer to embed the form URL. When toggled off, the form runs as a standalone page with its own page header. |
| Use placeholder prompts |
When ticked, prompt text appears inside the input boxes as placeholders. When unticked, prompt text is shown above the input boxes. |
| Google reCAPTCHA |
When toggled on, users must complete a Google reCAPTCHA security question before they can submit the form. |
| Published |
When toggled on, the form is live and ready to use. Use the publish form URL (starts with https://) to give to your website programmer to embed on your website page, or share the URL as a standalone page for submissions. |
| Tags to be inserted straight after HEAD or BODY |
For advanced HTML only, intended for use by experienced programmers. |
Once you've completed the form header details, scroll down and add the fields (input boxes) for the form.
Here's what each field in the image above means.
| Header field |
Description |
| Field name |
Prompt label text displayed for the input box. |
| Type |
Select from: text, number, date, email, dropdown, country, multiline-text, multi-select, or serial-number. |
| Max no. of characters |
Maximum number of characters for the input box. |
| Set default value |
Depends on the input type (see Type above):
- Dropdown: enter list of options, each option separated by a comma
- Multiline-text: set height of the input box in pixels, with a semicolon at the start e.g. ;height:120px
- Serial-number: system validates this value against existing serials
|
| Display order |
Number indicating the order the input boxes appear on the form page. |
| Mandatory |
When ticked, the user is required to fill in this field. |
| System mapping |
Select the system field corresponding to this field input (used when converting the form entry into a new customer, lead, task, or job). |
You can either embed the form directly on your website or provide a link to a standalone page of the form using the published form URL. This URL becomes available on the form designer page once Published is toggled on (see Step 1).
- Embed on your website:
Provide the published form URL to your website programmer/developer. Ensure "Display in iframe" is toggled on.
- Link to a standalone page:
Add the URL as a hyperlink on your website. When clicked, it will open the form as a standalone page with its own page header. Ensure "Display in iframe" is toggled off.
After a user submits a form
View a form submission
To view all form submissions, go to the Forms page and click View on the relevant row of the form.
The New submissions column shows the number of form entries that haven't been converted or deleted.
Convert a form entry to a lead, customer, task, or job
When viewing a form submission via the Forms page, you'll see five buttons on the right, as shown in the image below:
