Web forms

Web forms

Generate contacts by capturing the website sign-up information of your potential customers, directly into Bigin without single line of code.

Let's say you have a fully furnished website with a 'Subscribe' form. A potential customer checks out your homepage, the products you offer, their specifications and analyses how your product stands out from the rest. Once they are interested, they enter their information in the subscribe form. Now, you will receive an email with the information submitted by your potential customer. Then you have to manually enter that information into your Bigin account, assign user, assign task etc. This process is time-consuming and there are chances of missing out the information submitted by a potential customer. To help you save time and boost efficiency, this process should be automated.
That's where webforms can help you by instantly capturing the information submitted by your potential customer and adding them automatically as contacts in your Bigin account. 

Setting up Webforms

It involves three steps
  • Building the form - Drag and drop the fields that you need into the WYSIWYG editor.
  • Specifying the form details - Such as Form Name, Form location, Landing Page URL, Assign owner upon form submission and customise notification.
  • Generating the code for the form - Embed the form in your webpage and in 3rd party sites such as Facebook, Wordpress, Google Sites, Joomla.
To generate webforms
  1. Go to Setup > Settings > Webforms.
  2. Click +Create Web Form. 

  3. In the webform builder, do the following:
Build a form:
  • Drag and drop the fields that you need in the web form.
  • Insert captcha.
  • Add the option to upload files.
  • Mark fields as mandatory.
  • Make fields hidden in the form.
  • Provide hint or help links for fields.
  • Set font and layout of the form.
  • Change button names.
Specify form details and other options
  • Add form details such as, form name, landing page URLs, form location URL.
  • Set notification options
Copy web form code and embed options
  • Get code to embed in your site and other third-party sites.
    The code is available in three different formats - HTML source code, Embed code and iFrame code.

Step 1 : Build a form

Drag and drop the required fields in the WYSIWYG editor and change the font, font size, background color, width of your choice.
 
To add fields and set font and layout of the form
  1. Under the Fields tab, click on a field and drag & drop it in the form builder.

  2. Make changes to the font, font size, background color, field label alignment and form width.

Note:
  • By default, mandatory fields such as Last Name, Email and Phone are already added in the form.
  • You cannot remove the Last Name field from the form, as they are mandatory for a record in the contacts module.
  • To have custom fields, you need to first create them in the contacts module. See Also Custom Fields
  • When you add the Account Name field in the web form for Contacts and contact details are submitted, an account will automatically be created in Bigin. If an account with the same name already exists in your Bigin account, an account will not be created when the form details are submitted.
  • An Account will be created, even if certain mandatory field details are not provided. Later, when the account is edited, you need to provide the other mandatory details before saving the record.

Upload files
Allows the user to upload files such as screenshots, invoice request, etc and will be added as attachments to the record automatically into Bigin account.
 
To add the options to upload files
  1. Click the Tools tab.
  2. Drag & drop the File Upload field.
    Note that the visitor cannot upload a file above 20 MB. You can use the help link option in the Field Settings to provide this hint.


Insert Captcha
Prevents bots from automatically submitting unwanted content in your webform. This acts as a secured gateway where the records will be considered upon successful completion of this test.

To insert captcha
  1. Click the Tools tab.
  2. Drag and drop the Captcha field.

Insert privacy policy
Privacy Policy explains how the website owner will look after and deal with customers’ private information. Adding this in your webforms allow the customers' to legally agree to your company's privacy policy or End-User License Agreement. When this is added in your webform, the customer can submit only after reading and enabling the checkbox. 
 
To Insert privacy policy
  1. Click the Tools tab.
  2. Drag & drop the Privacy Policy field.
  3. In the Privacy Policy popup, add the relevant message and click done.
    You can add a link to the text as well. For example, a link to the privacy policy page.

Mark fields as mandatory
Certain fields such as Name, Email, Phone are important and a potential customer must fill these details before submitting the form. Marking a field as mandatory allows the user to submit the form only after filling these necessary details.
 
To mark a field as mandatory
  1. Move your mouse pointer to the field that you want to mark as mandatory.
  2. Click on the Settings icon.
  3. In the Field Properties pop-up, select the Mark as required field checkbox.
  4. Click Done.

Mark fields as hidden
Hidden fields discretely gives you information which are not visible for the customers who submit the webform. Let's say you have hosted the same webform in Facebook, Twitter, Website. The hidden fields tell you where the form is submitted from.
 
To mark a field as hidden
  1. Move your mouse pointer to the field that you want to hide in the form.
  2. Click on the Settings icon.
  3. In the Field Properties pop-up, select the Mark as hidden field checkbox.
  4. Specify the default value for the field and click Done.


Provide Hint or Help link
Assist the customer in entering required information in the specified format. Providing hints or help links guides the customers' on what the field represents and how the response should be submitted. 
 
To provide hint or help link for fields
  1. Move your mouse pointer to the field for which you want to provide hint or help link.
  2. Click on the Settings icon.
  3. In the Field Properties pop-up, select the Include help link checkbox.
  4. Choose one of the following:
    • Link & Text - Specify a text for the link and provide the link URL.
    • Text Only - Specify the help/hint text. For example, the date field can have - MM-DD-YYYY

  5. Click Done.

Change button name
By default there are two action buttons Submit and Reset. These buttons can be customized to satisfy your needs.
 
To change button names
  1. Move your mouse pointer to the button you want to rename in the form.
  2. Click on the Settings icon.
  3. In the Button Properties pop-up, modify the field name.
    The name of the field will be changed only in the current form.
  4. Choose the button color of your choice.
  5. Click Done.

Remove fields from the form
If you have added a field by mistake or would like to remove a field that's prefilled in your webform, you can do so by deleting the field.
 
To remove a field from the form
  1. Move your mouse pointer to the field that you want to remove from the form.
  2. Click on the Delete icon.

Note:
  • You cannot remove a mandatory field from the webform.

Preview the webform
See how your webform looks like before publishing.

To preview the form
  1. In the form builder, click on the Preview link.
    A preview of the form will be available.

Step 2 : Specify form details

  1. Enter the Form Name (Feedback, Contact Us, etc.).
  2. Specify the Form Location URL. This should be the web page where the web form will be hosted. It should start with "http:// or https://". (Example: https://www.zylker.com/contact-us.html).
    If you are not sure where the web form will be hosted, enter * in this field. This prevents Spam and allows only forms submitted through the particular domain to be captured as valid information.
  3. Specify a Landing page URL. The visitor who submits the form will be redirected to the URL specified here. It should start with "http:// or https://".
    The length of Return URL should not exceed 255 characters. (Example: https://www.zylker.com/thank-you.html).
  4. Assign owner to the records that are submitted via webforms.
    Select from the drop-down list. All the records generated through the form will be assigned to the selected user.
  5. Add relevant Tags, if applicable, from the list of existing tags for the module. 
    The chosen tag will be added to all of the records captured from the webform. 
  6. Toggle on the Enable Double Opt-in button.
    Note that this option can be used only if the primary email field is added to the web form. When web forms with double opt-in is submitted, a confirmation email is sent to the visitor for additional verification.
  7. Select the Request for Approval toggle if you want to submit the records for approval. 
    Note that users with the Approve Contacts permission in the profile can approve the records.
  8. Click Save.

Note:
  • The Enable Manual Approval option will help you validate the generated records manually, and then add them to the corresponding module in Bigin. If this option is not selected, all the records generated through the web form are added directly to the corresponding modules.
  • If the domain name in the Location URL does not match with the URL where the web form is hosted, then the information will not be captured. Alternatively, you can enter [*] in the landing URL field to capture from other / multiple domains.

Step 3 : Use Web form code to embed

The code for the web form is available in 3 formats: Source Code, code to Embed, iFrame code. The code is also readily available for some third-party sites - WordPress, Facebook, Google Sites and Joomla. Please note that the Script and iFrame code is available only in the Paid Editions.
 
To embed the web form in your web page
  1. Select Source Code, Embed or the iFrame code from the list as required.
  2. Copy the code and paste it in the website where you want the web form
  3. Click Done.

Note
  1. In order to avoid Spam, the generated Web Form (HTML file) must be published in an active web server (Apache, Microsoft, IIS, etc.).
  2. The web form will not work if you submit the form values from your desktop.
  3. When the HTML code is generated for the web form, certain entities are hidden by default. If you remove those hidden entities, the web form will not work. Here is the code snippet that should not be removed from your web form code:
    <input type="hidden" name="xnQsjsdp" value="" /> <input type="hidden" name="xmIwtLD" value="" /> <input type="hidden" name="actionType" value="" />

    • Related Articles

    • Web Forms

      Capture visitor information directly from the website using Web Forms Help guide Web Forms - An Introduction Setting up Web Forms  Including Opt-in Checkbox in Web Forms for Consent

    • Web Forms

      Web forms simplify the process of capturing the visitor or user information from your website into your system. They are designed to automate the importing of data from websites into Zoho Workerly. Non-technical users find it easy to design and ...

    • Web Forms - An Introduction

      Web forms simplify the process of capturing visitors or users information from your website into your CRM system. They are designed to automate the importing of data from websites into Zoho CRM. Non-technical users find it easy to design and publish ...

    • Setting up Web Forms

      Creating a web form involves three steps  Building the form  - Drag and drop fields to build a form and format it easily with the WYSIWYG editor.  Specifying the form details  - Add details such as form name, landing page URL (where the visitor needs ...

    • Web Forms in Zoho Desk

      Web Forms simplify the process of capturing support tickets from your website into your Zoho Desk. The tickets can be from customers requesting your help or simply leaving feedback about your product. Either way, the Web Forms are easy to design and ...