How to Create an Online Form

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. If you are interested in this tool you can send us a message HERE.

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.
     • Reply To Email: When you reply to the form submission in your email that you receive, you can select for the reply button to reply to the submitter.
     • 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 File: 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.
     • Custom CSS: This area is used for our designers to custom style your form.
     • Visibility: Select whether the form is Hidden or Visible. 

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

Adding Form Elements:

1. From the Forms screen, click the Edit link on your new form. The Edit Element screen will be displayed, below.
    
2. There are a number of options available regarding the Form Elements you can drag and drop into the body of your form. To create your form, simply drag and drop the Form Elements from the left-hand menu onto the canvas. You can drag and reorder elements, or click to edit existing elements as required. The main elements are described below:
   Standard Fields: 
   • Text Field:  A standard, small type text field.
   • Number Field:  A standard, small type number field
   • Text Paragraph:  A larger, text type field that spans multiple lines.
   • Checkbox:  A standard checkbox type field.
   • Radios:  A standard radio button, single option type field.
   • Drop Down: Creates a dropdown element, giving you the option to specify what options appear in the dropdown list.
   • Section: Allows you to break up your form into segments/sections.
   • Page Break: Allows you to split up your form into multiple pages/steps.
   • Static Heading: Allows you to show a heading.
   • Static Text: Allows you to display text on the form.
      
3. Special Fields: 
   • Name: A field for users to enter their name, which can then be added to the database.
   • Date: A standard date selector field.
   • Time: A time selector field.
   • Phone: A text field to add a phone number in
   • Address: Set out address fields to add your address
   • Website: A text field to be able to add a web address into
   • Price: A field to add a price along with a currency selection.
   • Email Address: A field that allows the user to enter their email address.
   • File Upload: The ability to be able to upload a file attachment to the form.
   • Unique Field: A standard text field that can be used for small text.
   • Terms & Conditions: A checkbox field that allows you to set terms and conditions text.
   • Signature: A field that allows you to digitally sign the form.

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.
• Placeholder: Placeholder to show an example of this element
• 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.

1. Once the form has been chosen and the styling completed simply click Save and Close.
2. 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