Forms/Webforms

  • Home
  • Forms/Webforms

Why use Forms?

Forms are a great way to capture leads for your business. The WebEd form builder allows you to create as many forms as you wish and have them appear anywhere on the site. Forms work with the Contacts and Companies Module (Mini CRM) module, so anyone who completes a form on the website is automatically matched to an existing contact, or inserted as a new contact.

Most sites need a developer to create and build dynamic forms for their website but the WebEd 9 form builder module was specifically created to let a non-technical user do the job with less time and hassle.

Terms to Know for Keywords Management

  • Form Control or Field: Anything on the form the user can fill in or click
  • Email on submit: Send the data collected in the form in an email to a nominated email address
  • EmailTo: Who the email will be sent to when a visitor clicks submit? If this value is not set, then the following values are ignored and the email is not sent.
  • EmailSubject: The subject line of the email when a visitor clicks submit.
  • EmailFrom: Who the email will be from when a visitor clicks submit?
  • Thank you Message: The text to display to the visitor when they successfully submit.
  • Auto Responder: An email is sent to the person who submits the form
  • Notification Email: A different email is sent to someone else when a visitor clicks submit

Using Common Form Fields - Marketing Details

The most common controls are on the Marketing Details tab (first name, last name, email etc.)

STEP-BY-STEP
  • 1
    Go to the Marketing Details tab is the first tab to load on the form builder
  • 2
    On the right, is an empty form waiting for fields. (A Submit button is inserted to give you a starting point)
    Web Forms
  • 3
    Simply click and drag controls from the left side, click on the label, drag and drop to the form on the right side
  • 4
    If you change your mind, just click on the label and drag it back to the left.
    Web Forms
  • 5
    Once you have dragged and chosen your component, click on the label to manage the form control
  • 6
    This opens a popup allowing you to change and edit the labels, options and properties

Using Segmentation Fields - Communication Data

The most common controls on the Communication tab is - Campaign Code, Referred By, Product of Interest etc.

STEP-BY-STEP
  • 1
    Go to the Communications tab
  • 2
    Drag the segmentation fields required to the form and position
  • 3
    You can select either a Hidden Field to preset the value or a list box to allow the user to select from a range of values
  • 4
    Hidden fields like Campaign Codes are best for things like landing pages so anyone who submits the form will be tagged with the correct campaign
  • 5
    Dropdown List box fields like Product of Interest are best for generic pages and allow the user to self-segment. For example, I am interested in "Product A"
  • 6
    We recommend segmenting by Referred By and Campaign Code as a good starting point.
    Web Forms

Using Ad-Hoc fields

Ad-hoc fields are mostly empty common fields that you can customize for usage - Text Boxes, List boxes, Drop downs, Radio Buttons etc.

STEP-BY-STEP
  • 1
    Go to Form Elements Tab
  • 2
    Drag/Get the TextBox field - or any other preferred fields that are present and useful on the Form Elements tab
  • 3
    Update the ID/Name to the preferred ID/Name (ie. DietaryRequirements, CarModel)
  • 4
    Then click Save to apply the changes made
  • 5
    Please also note that most ID/Name of the fields in the Form Elements tab can be edited, so these will most likely be the go-to fields if you needed a customised ID/Name.
    Web Forms

Making Form Elements Mandatory

There are times when you want the user to enter a value on the form before they can proceed. In this situation, you can make a form element mandatory.

STEP-BY-STEP
  • 1
    On the Build Your Form section, click the field you want to be required
  • 2
    Tick the Required checkbox
  • 3
    Then click Save to apply the changes made
  • 4
    This will make the field required/mandatory on the form. The field will appear with a red star and the user cannot submit until they have entered or selected a value in the field.
    Web Forms

Configuring the Form

Step in creating the Form where you can set the Email and General Configurations

STEP-BY-STEP
  • 1
    Edit the form configuration to suit your requirements
  • 2
    Add in a "From Name" and "From Email" so you can be notified when someone submits your form
  • 3
    Add in general configurations like the Thank You Message
  • 4
    Click Finish Configurations
    Web Forms
  • 5
    Click Finish to see the script to add to your website
    Web Forms
  • 6
    See the new form created on the form list
    Web Forms

Editing an existing Form

If there is something you wish to change or configure on your existing form, you can use these steps:

STEP-BY-STEP
  • 1
    Go to Admin→ Forms
  • 2
    Click the Edit button on the left-most part of any Form
    Web Forms
  • 3
    The Form Builder will load and the contents of the form are displayed. You can now change and/or update the form
    Web Forms
  • 4
    Click Finish Build Form And Start Configuration
  • 5
    Configure the Form→ Finish Configuration

Adding Page Breaks for a Multi-Step form

You can split any form into multiple pages by using the Page Break form element on the Form Builder page. It helps to fit the form into logical sections and fits better to your site without changing the overall design. Start by adding all the fields you want on the form, then insert a page break at the place you want to insert a page break.

STEP-BY-STEP
  • 1
    Go to Admin→ Forms→ Create New Form (or you can choose to edit your existing forms)
  • 2
    The Form Builder page will appear
  • 3
    Drag and choose your preferred components
    Web Forms
  • 4
    To add a page break, go to the Form Elements tab
    Web Forms
  • 5
    Drag the Page Break to where you want to split your form
    Web Forms
  • 6
    You can select the Preview button to show how your form looks like before clicking the Finish Build Form And Start Configuration button.
    Web Forms
  • 7
    When a Page Break is added, Next and Previous buttons are automatically added to your form.
    Web Forms

Copying a Form to Quickly Make a New Form

A fast way to create a form is to copy an existing one. Use these steps to copy a form:

STEP-BY-STEP
  • 1
    Go to Admin→ Forms
    Web Forms
  • 2
    Click the Copy button on the leftmost part of any Form
    Web Forms
  • 3
    Edit the form name on the pop-up
  • 4
    Click Create button to create the new Form
    Web Forms
  • 5
    The new form will have all the form components from the copied form
  • 6
    Edit the form components to suit your requirements
  • 7
    Click Finish Build Form And Start Configuration
    Web Forms
  • 8
    The new form will also have all the Configure form details from the copied form

Segmenting Your Contacts

When using forms you can segment contacts automatically or allow them to self-segment as part of the form. Segment methods are, by default, labelled as follows:

  • Referred By - how did we come by this contact?
  • Campaign Code - What campaign was used to encourage this person to register?
  • Subscriber Type - What type of contact is this person
  • Certifications - What degrees, achievements, badges or another type of recognition is linked to this contact
  • Product of Interest - Which product or service are they interested in
  • Interested in Owning - Yes/No, allows you to relate products to a contact without making them appear as a sales prospect. For example, you may want to link existing owners but not mark them as "Interested in Owning"

Imagine you have a form that prompts for first name, last name, email, mobile and then a drop-down list or radio buttons for "What area do you work in". The options are set as corporate, university, self-employed, small business.

The field we store the response is "Subscriber Type". Over time various people complete the form and you decide you want to have a fast way to find and email these people.

Grouping Your Contacts

Why would you Group your Contacts?

Once you have contacts segmented, you can add them to groups by using the advanced search. Say you want to make a group called Universities so you can easily contact everyone who works at a Uni. You can use the advanced search and find all "Subscriber Types" and add them to a group. Now you can click the group and see everyone at a Uni. When more contacts register, you can "refresh" the group and anyone who submitted after you made the group, will now be added.

Using the Communication Controls to Segment New Contacts

  • If you want to segment your contacts as they are created, use the communication tab to select from a variety of segmentation options
  • Hidden controls can be used to preset a campaign or product of interest
  • List boxes can be used to allow the visitor to self-select
Web Forms

Using Hidden Communication Controls

Use this when you want to track data coming in from a specific form.

Using Campaign Code

STEP-BY-STEP
  • 1
    Drag and drop the Campaign Code over to your form
  • 2
    Click on the label (Campaign Code)
  • 3
    In the Value field, write the name of your Campaign
  • 4
    Note: DO NOT overwrite the ID
  • 5
    Edit the label
    Web Forms
  • 6
    You can use any of the hidden fields and set the value to automatically segment your contacts when they submit or register

Using Product of Interest

  • Drag and drop the Product of Interest over to your form

Change the Submit Button Label

STEP-BY-STEP
  • 1
    If you want to change the name or label of 'Submit', simply mouse click onSubmitbutton
  • 2
    The popup will be displayed on the page
  • 3
    Select the Button Label and edit as needed
  • 4
    click Save when done
    Web Forms

Preview Your Form

STEP-BY-STEP
  • 1
    Click the button to see how your form will look when live
    Web Forms
  • 2
    This will open a new tab and you can preview the Form
  • 3
    Close the tab when done to get back to your form builder
  • 4
    Configure and Name Your Form
  • 5
    Click Finish Build and Start Configuration to set up how your form will behave
    Web Forms
  • 6
    This saves the form and moves you to the next step
  • 7
    Add a form name for easy future reference

Sending an Email When a User Submits

STEP-BY-STEP
  • 1
    Setup the From Name and From Email address to display on emails generated by the Form
  • 2
    Check the Email this form on submit to enable After submission email sending
    Web Forms

Adding additional notifications to another user in the team

STEP-BY-STEP
  • 1
    Setup the Email on Submit and make sure it is checked
  • 2
    Enter the email address that you want them to receive an email notification as one submits the form

Editing Thank you Message

STEP-BY-STEP
  • 1
    Thank you Message: The text to display on successful submission.
  • 2
    To Edit the Thank You Message that appears right after submitting a form - Edit the Thank You message field
    • When a form is submitted, the visitor is generally given a text string to notify them.
    • Examples will include things like "Thank you for your submission", "Your request has been sent" etc
    Web Forms

Form Submission and Redirect to A New Page

STEP-BY-STEP
  • 1
    Default Form Submission alerts you on the page
  • 2
    If you need it to redirect to its thank you page, follow these steps:
  • 3
    On the General Configuration Form:
  • 4
    Check the Source Code and add this code:
    Web Forms
  • 5
    Edit the window location to the correct URL that it should land
  • 6
    Make sure to untick the box AJAX Submit for this to work.

 

Advanced Form Options

Auto Responders (Editing your Auto Responder)

You can also send autoresponders and notifications to other parties using the advanced options

STEP-BY-STEP
  • 1
    Scroll down and click on Advanced Options. You can edit the text in the Auto Response Body field (as shown below)
  • 2
    You can use the property drop-down to customise the message using the data supplied from the form
  • 3
    Any field you add to the form will be available

Notification Email

STEP-BY-STEP
  • 1
    Check the box Send Notification Email
  • 2
    Then configure the email to send using the properties
  • 3
    Properties can also be used in the subject line allowing a great deal of creativity and flexibility
  • Email to will send a formatted email to the address you configure
  • A notification email will allow you to send the same information submitted to someone else using a completely different formatting
  • You may want to use it for notifying your sales team, or perhaps an external provider for catering or any other reason you can think of

Ajax Submit

  • Submits the form without refreshing the page
  • Generally, this is the best way for forms to work and you should usually ensure this setting is set

Pre-populate the form with User's previously submitted data

  • Once a user re-visits the form they’ve submitted, their stored information will automatically be populated on the form fields.

Auto Responders

Editing your Auto Responder

You can also send auto responders and notifications to other parties using the advanced options

STEP-BY-STEP
  • 1
    To Edit the Email Auto Response, Scroll down and click on Advanced Options. You can edit the Text in the Auto Response Body field (as shown below)
  • 2
    You can use the property drop-down to customize the message using the data supplied from the form
  • 3
    Any field you add to the form will be available
    Web Forms

Notification Email

Web Forms

Ajax Submit

Ajax Submit Overview

Pre-populate a form with User's previously submitted data

Pre-populate a form with User's previously submitted data

Finish the Form

STEP-BY-STEP
  • 1
    Click Finish Configuration to save the configuration
  • 2
    You will now be presented with the embed script which allows you to put this form on any website
  • 3
    if you are inserting this form on your site, jump down to the section below on "How to add a Form to a Page in WebEd"
  • 4
    If you want to use the form on some other site, you can just copy and paste the code supplied.
  • 5
    Embedded Script will be generated in the text box area, you can copy and paste it into your webpage to show your form.
    Web Forms
  • 6
    Click Finish to return to forms
  • 7
    The Form you just created will appear on the list of forms
    Web Forms

Managing Forms from the Grid

Icon Description
Web Forms Edit form builder to setup form
Web Forms Preview form builder
Web Forms Configure settings of form builder
Web Forms Embedded to see script
Web Forms Delete form builder

How to add a Form to a Page in WebEd

STEP-BY-STEP
  • 1
    Edit the desired page
  • 2
    Select the Curly Bracket icon at the top right of the editor
    Web FormsWeb Forms
  • 3
    Click Configure button in the popup
    Web Forms
  • 4
    In the new popup, type the Form keyword into the textbox search. Then click on an item in the resulting search.
  • 5
    Select the option on the left side, and review the UI on the right side.
    Web Forms
  • 6
    Selected form in the dropdown list and it should be displayed in the preview.
    Web Forms
  • 7
    Then click the Insert button It will be adding the Curly Bracket to the Configuration Curly Bracket popup then click the OK button to complete.
    Web Forms
  • 8
    Then click the Save And Close button and see the form displayed on the page.
    Web Forms

How to edit the curly bracket

STEP-BY-STEP
  • 1
    Double-click or Right click and select the Edit Curly Bracket option on a Curly Bracket
  • Web Forms
  • 2
    The UI is the same with the previous steps
    Web Forms

How to Embed a Form Script in HTML

STEP-BY-STEP
  • 1
    Log in as an administrator and go to the Admin Dashboard.
    Learn how to log in here →
  • 2
    Go to the page that you want to show the form builder and click Edit
    Web Forms
  • 3
    After copying script and pasting it into Source Code editor WEBEDNINE-154 - Getting issue details... STATUS content then clicks the update and close button.
    Web Forms
  • 4
    The form builder is displayed on the page after the updated page.
    Web Forms

Submit the form and send an email to the user

STEP-BY-STEP
  • 1
    Go to the page where you want to show the form after adding the form inserted into WebEd9.
  • 2
    Input information in the form and submit button.
  • 3
  • 'Thank You Message' will be displayed after submission.
  • 4
    Check the mailbox of the Email To to confirm the email has been sent
    Web Forms

Inserting a Form via CurlyBracket

See Inserting a Form via CurlyBracket in action

See the demo here

Inserting a Form on a page via Curly Bracket

STEP-BY-STEP
  • 1
    Click on the Edit button on the right
    Inserting a form using Curly Bracket
  • 2
    Click on the 'Edit Page' button
    Inserting a form using Curly Bracket
  • 3
    On the edit window, scroll to the content where you want to insert a form. Make sure the cursor is where you want the form to be placed.
    Inserting a form using Curly Bracket
  • 4
    Click the Curly Bracket icon on the right.
    Inserting a form using Curly Bracket
  • 5
    On the search box, search for 'form'.
  • 6
    Click on 'Web Form'.
    Inserting a form using Curly Bracket
  • 7
    Select the form you want to insert from the options.
    Inserting a form using Curly Bracket
  • 8
    Click on the 'Insert' button below.
    Inserting a form using Curly Bracket
  • 9
    You should now be able to see the form (with its correct ID) inserted on the content.
    Inserting a form using Curly Bracket
  • 10
    Scroll down the edit window and click 'Save and Close'.
    Inserting a form using Curly Bracket
  • 11
    You should now be able to see the form on your page.
    Inserting a form using Curly Bracket

Checking Form and Email Notifications

Checking a Form on the Page Editor

STEP-BY-STEP
  • 1
    Click on the Edit button on the right
    Email Notification
  • 2
    Click on the 'Edit Page' button
    Email Notification
  • 3
    On the edit window, scroll to the content where the form is located and get the Form ID.
    The number on the curly bracket is the form ID.
    Email Notification

Navigating to the Forms module in Admin

STEP-BY-STEP
  • 1
    Go to Admin → Modules → Forms
    Email Notification
  • 2
    Find the form ID under the ID column
  • 3
    Click on the 'Configure Settings' icon
    Email Notification
  • 4
    On the Configure Settings page, you can find the emails that receive a notification whenever this form is submitted:
    • From Name - The "From" name that appears on the email notification when this form is submitted.
    • From Email - The "From" email address that appears on the email notification when this form is submitted.
    • To Email - The email address that receives the email notification when users submit this form.
    • CC - The email addresses that are CC'd on the email notification when users submit this form.
    Email Notification

Google reCaptcha Validation

What is Google reCaptcha?

Google reCaptcha is a CAPTCHA-like system designed to protect website forms from a user (normally in order to protect login, registration and other forms from bots).

Why you would use Google reCaptcha

  • Google reCaptcha is an effective security solution that protects your website forms from spam entries while letting real people pass through with ease. It can be used for login, registration, password recovery, comments, popular contact forms, and others.
  • Users are required to confirm that they are not a robot before the form can be submitted. It's easy for people and hard for bots.

See Google reCaptcha it in action

See the demo here

How to sign up for an API key pair for your site

To use reCAPTCHA, you need to sign up for an API key pair for your site. The key pair consists of a site key and a secret. The site key is used to display the widget on your site. The secret authorizes communication between your application backend and the reCAPTCHA server to verify the user's response. The secret needs to be kept safe for security purposes.

STEP-BY-STEP
  • 1
    Go to the link: https://www.google.com/recaptcha/admin
  • 2
    Input the label (optional) and your domains to get an API key pair Click Register
    Google Recaptcha Validation
  • 3
    After registering, you will be provided with an API key pair
    Google Recaptcha Validation

How to add API key pair to WebEd9 sites

To build a form with reCaptcha validation, you need to add API key pair to the site setting.

STEP-BY-STEP
  • 1
    Go to the site settings management in admin: Settings > Site Settings
    Google Recaptcha Validation
  • 2
    Search reCaptcha configuration on the site setting grid
    Google Recaptcha Validation
  • 3
    Click Edit icon to update your API key pair
    Google Recaptcha ValidationGoogle Recaptcha Validation
  • 4
    Click Save

How to add Google reCaptcha using form builder

Google reCaptcha is a component in the form builder to allow users to drag & drop when building a form. To understand how to use form builder, please refer to Forms / Webforms - Creating and Managing Forms on Your Website

STEP-BY-STEP
  • 1
    Go to Build Your Form screen
  • 2
    Navigate the Form Elements tab
    Google Recaptcha Validation
  • 3
    Find reCaptcha components then drag & drop them into your form.
  • 4
    Continue configuring your form and get the script to build a form.
  • 5
    Google reCaptcha will be generated when rendering your form.
    Google Recaptcha Validation
  • 6
    You can use the script to build a form to add to any websites you want.
  • 7
    For rendering Google reCaptcha in cross domains, you need to register these domains with Google ( Adding Google reCaptcha Validation API to your Forms )

Reinitializing Form Components

  • This is a function that will help us re-initialize the form components.
  • On this function, the fields of components "Name" or "ID" will be moved to the bottom of the edit section Form component
STEP-BY-STEP
  • 1
    Go to source code → Search "Tabs.json" and select that file
    Form Components
  • 2
    Update the JSON of Form components on that and deploy it on the site that you want to update
  • 3
    Go to Admin page → Settings → Form Settings → Select "Update Form Builder"
    Form Components
  • 4
    Click the button "Update Form" and wait function execute the update 
  • 5
    After the update, a message result will be shown
    Form Components
  • 6
    Go to the Forms listing to check the result after updated
  • 7
    Select Create or Edit a form
    Form Components
  • 8
    Try to pick and check some fields that you have to change before
    Form Components

Setting Up Reply Emails

What is a "Reply To:"?

This is a property of email that will determine the email to reply to when users click the Reply To button in an email.

Why you would use a "Reply To:"?

This is to resolve the problem that the email address is used to send the email is different from the email to receive replies.

How to set up Reply To for Forms

STEP-BY-STEP
  • 1
    Go to Form Listing in admin by going to Admin → Modules → Forms, or just simply append /Admin/Forms to your website URL and click go in the browser bar (Example: http://mysite.com/Admin/Forms)
    Setup Replying Emails
  • 2
    Find the form you want to set up Reply To and click on the Configure icon to go to the "Configure" step.
    Setup Replying Emails
  • 3
    In the "Email On Submit" group, there will be a text box to set Reply To for Notification.
  • 4
    There is a checkbox that allows you to use the email in the form as Reply To. This is to allow the one who receives the notification email, to reply directly to those who have submitted the form.
    Setup Replying Emails
  • 5
    To set up Reply To for Auto Response, please go to Advanced Options → Auto Response Setup → Auto Response Reply To
    Setup Replying Emails
  • 6
    Finally, click "Save and Continue Configure" or "Finish Configuration" to save your changes.
  • 7
    Notification is the email to let you know who has submitted the form and what details that were submitted.
  • 8
    Auto Response is the email for those who submitted the form and let them know that we have received their enquiry.

Show Contact Details in Emails

Contact Detail Form Overview

This page is about how to show a contact detail link at the bottom of an email if the "Email this form on submit" is checked in the Form Builder. This makes it easier for the website administrator to see who is the contact that answered the form. The email will be sent to the recipient entered in the "To Email" field in the Form Builder.

Email with a Contact Link

Below is an example of an email with a contact link below.

Contact Details

Managing the Contact Detail in the Form Builder

STEP-BY-STEP
  • 1
    Log in as an administrator and go to the Admin Dashboard.
    Learn how to log in here →
  • 2
    Click on Modules >> Forms or you can type "Forms" in the search bar and click the Forms menu item.
  • 3
    A list of forms will be shown. Click "Create New Form" or "Edit" an existing form.
  • 4
    Check the "Email this form on submit" checkbox we can see the contact link added at the bottom of the email. This email will send to the "To Email" value. See below:
    contact details

Vehicle Request More Info Form

Vehicle Request More Info Overview

Vehicle listings contain a "request more information" call to action for the visitors. This section describes how you can set the email address the leads are sent to and also what the content on the autoresponder contains

  • The form "Request More Info" is displayed on the vehicle listings.
  • It allows anyone interested in a vehicle to send a request to the site owner
  • The data is saved in contact and tagged with the product of interest for the vehicle make, model

What does the Request More Info controls?

  • Request More Info Success Message - The text displayed to the end user after they submit
  • Request More Info Email Address - The Email Address to which the request will be sent. This should be set to sales@ or enquiries@
    • You can enter multiple email addresses separated by a semi-colon (;)
    • Always leave the email address [email protected]in the email to list so Interactive Partners support staff can troubleshoot any issues
  • The Auto Response Template. This is the email the user will receive after they submit a request
  • The Notify Template. This is the email sent to addresses listed in the "Request More Info Email Address"

Request More Info

Managing the Auto Response Template for the Vehicle Listing Enquiry form

STEP-BY-STEP
  • 1
    To Edit the Auto Response Email Template (or other templates shown in the drop-down)
    Request More Info
  • 2
    Look for and click on Email Templates on the left menu panel under Settings
    Request More Info
  • 3
    A list of Templates should show, Scroll to look for Auto Response Email Template (Or the template you wish to edit)
  • 4
    Then click on the Edit icon
    Request More Info
  • 5
    The Template form should show - where you can edit the template body (Auto Response)
  • 6
    Once the template has been finished, click on Save
    Request More Info

Managing the Vehicle Request More Info Form

STEP-BY-STEP
  • 1
    Log in as an administrator and go to the Admin Dashboard.
    Learn how to log in here →
  • 2
    LocateSettings on the left panel then click on onSite Settings
  • 3
    Or use the search box at the top of the admin menu to search "site settings"
    Request More Info
  • 4
    A list of Site Settings should appear
  • 5
    Either scroll down and look for VehicleRequest More Info or type "Vehicle Request More Info" in the name text box at the top of the listing
  • 6
    Once you've located it, click on the Edit icon
    Request More Info
  • 7
    After clicking on Edit,the setting for the form should appear
    • Description: the description of setting
    • Request More Info Success Message: This text will display after the form submit
    • Request More Info Email Address: List email addresses will receive form information, each email separate by comma or semicolon
  • 8
    Edit the email address it's coming from.
    • And choose which Email Template will be sent to the client
    Request More Info
f