Website Management Tab

Creating a new online Form using the Form Builder

The Form Builder is a website add-on tool that allows you to create your own custom forms. Once a form is created you can then add it onto any of the pages on your website. Forms can be used to send yourself an email, add details to your contact database, and add new leads to your CRM.

To create a new Form:

  1. When you are logged into your website in thewebconsole, click on Form Builder on the menu on the left.
  2. Click the Add New Form button and fill in the following fields:
    • Form Name: Give the form a name (this is visible to you and the client).
    • When User Completes the Form: Select the action that happens when the user submits the form
      • Confirmation Message - Type the message you want your users to see once they have filled in the form.
      • Redirect to URL - Redirect the user to another page on your website or an external website.
    • Email Subject: The subject of the email when it is sent.
    • From Email: The address the email is sent from. You can set it to be sent from the sender by selecting that field in the form.
    • To Email: The email can be sent based on a number of rules.
      • Single Email - The form is sent to the email address you place in the “Email” field.
      • Multiple Email Addresses - The form will send to all emails based on the next selection:
        • Emails - You can add as many email addresses as you like
        • All my users - All the users added to thewebconsole will receive the email.
        • Roles - The email will be sent to all thewebconsole users that are assigned a certain role.
      • Round Robin - Used for sales teams to distribute leads evenly.
    • Hidden behind the “Show Advanced Options” are a range of other fields, including:
      • Label Position: This will determine where the label appears in relation to the field the user is filling in.
      • Include Captcha: A Captcha will prevent SPAM programs from filling in your form.
      • Send User Copy: Send copy to user after submission.
      • Send Auto-Responder: An auto responder is an email that is automatically sent to the person who filled in the form.
      • Web Hook Integration: This feature allows the contents of the form to be sent to a third party application as XML or JSON. It is used by organisations that want to integrate the form into existing software that they may have for running their business.
      • Attach the submission as a CSV: The input from the form is added to a csv file, which is attached to the email.
      • Save Submissions to Contacts: If you select “Yes” for this option, you can add the form to your contact database. You match the form fields up to their field in the database when you add the field in the Form Builder.
      • Page Template: The template of the page the form is on.
      • Visibility: Select whether the form is Hidden or Visible. 

      3.   Click on “Save Form”, which will direct you through to the editor.

       4.   The editor works by dragging Field Types from the left-hand menu to the pane on the right-hand side. When you drag a field across, depending on the field type, you may be asked a series of questions, including:

  • Field Label - This is the label that will appear next to the field.
  • Field Type - This is the field you dragged from the left-hand menu. You can change the type if you need to.
  • Description - The description field is displayed below the field as a tool tip to help website visitors filling in the field.
  • Default Value - If you want a value to be pre-filled in the form you can add it here.
  • Limit Input Length - If you want to ensure that the input in this field is within a certain number of characters you can select “Yes” and set a minimum and a maximum number of words, or characters.
  • Size - The width of the field in the form.
  • Required - If you want to force visitors to fill in the field, tick this box. Forms with too many fields discourage visitors from using them.
  • Database Marketing Contact Field - If you have selected “yes” to “Save Submission as a Contact” in the Form Settings, you can match this field with its custom field in the contact database.

     5.   Your form will be saved as you progress.

     6.   Your form will not appear on the website until you have added it to the menu, or linked to it from within a page in your website.

Adding a form to a page:

  1. Once you have created your custom form simply navigate to Manage Pages > Content Pages and Edit the page you wish to add the form into.
  2. Once in the Drag and Drop Page Editor simply click and hold the Form Builder option (located in the Tools menu to the left of the screen) making sure to drag the tool into the desired content section.
  3. Hover over the Form Builder tool once it has been placed in the content section and Click the Edit Button 
  4. A new window will open displaying the Form builder content options, the first tab (Form) allows you to choose the form you wish to display, simply click the Select Form dropdown and choose the desired form
  5. Once the form has been chosen you can style its appearance by clicking the Style tab, this will give you the below options:

    • Show Form Heading: This either Displays or Hides the Form Title (Form Name) assigned to the form.
    • Form Heading Type: This allows you to choose the heading style assigned to the Form Title, by default the tool will choose Header 1, however we suggest changing this to heading 2 or below to improve on page SEO.
    • Label Colour: This allows you to assign a colour to each of the forms Field Titles.
    • Background Colour: Allows you to assign a background colour to the form.
    • Border: Allows you to assign a border to the form.
    • Label Font Family: Allows you to change the font family of the forms Field Titles
    • Label Font Size: Allows you to change the font size of the forms Field Titles.
    • Label Font Weight: Allows you to style the font of the form Field Titles (ie Bold, Italic, underlined).
    • Line Height: Allows you to style the spacing to the font of the form Field Titles.

  6. Once the form has been chosen and the styling completed simply click Save and Close.
  7. Once you have completed all updates to be made on the page Click Save (located on the bottom left of the Drag and Drop Page Editor

Last Modified: 31 May 2022
In This Article