- Why use Forms?
- Terms to Know for Keywords Management
- Using Common Form Fields - Marketing Details
- Using Segmentation Fields - Communication Data
- Using Ad-Hoc fields
- Inserting a Link on a Checkbox Form Field Label
- Making Form Elements Mandatory
- Configuring the Form
- Editing an existing Form
- Adding Page Breaks for a Multi-Step form
- Copying a Form to Quickly Make a New Form
- Segmenting Your Contacts
- Grouping Your Contacts
- Using Hidden Communication Controls
- Products of Interest
- Change the Submit Button Label
- Preview Your Form
- Sending an Email When a User Submits
- Adding additional notifications to another user in the team
- Editing Thank you Message
- Form Submission and Redirect to A New Page
- Auto Responders
- Notification Email
- Ajax Submit
- Pre-populate a form with User's previously submitted data
- Finish the Form
- Managing Forms from the Grid
- How to add a Form to a Page in WebEd
- How to edit the curly bracket
- How to Embed a Form Script in HTML
- Submit the form and send an email to the user
- Inserting a Form via CurlyBracket
- Checking Form and Email Notifications
- Google reCaptcha Validation
- Reinitializing Form Components
- Setting Up Reply Emails
- Show Contact Details in Emails
- Vehicle Request More Info Form
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.)
-
1Go to the Marketing Details tab is the first tab to load on the form builder
-
2On the right, is an empty form waiting for fields. (A Submit button is inserted to give you a starting point)
-
3Simply click and drag controls from the left side, click on the label, drag and drop to the form on the right side
-
4If you change your mind, just click on the label and drag it back to the left.
-
5Once you have dragged and chosen your component, click on the label to manage the form control
-
6This 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.
-
1Go to the Communications tab
-
2Drag the segmentation fields required to the form and position
-
3You 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
-
4Hidden fields like Campaign Codes are best for things like landing pages so anyone who submits the form will be tagged with the correct campaign
-
5Dropdown 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"
-
6We recommend segmenting by Referred By and Campaign Code as a good starting point.
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.
-
1Go to Form Elements Tab
-
2Drag/Get the TextBox field - or any other preferred fields that are present and useful on the Form Elements tab
-
3Update the ID/Name to the preferred ID/Name (ie. DietaryRequirements, CarModel)
-
4Then click Save to apply the changes made
-
5Please 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.
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.
-
1On the Build Your Form section, click the field you want to be required
-
2Tick the Required checkbox
-
3Then click Save to apply the changes made
-
4This 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.
Configuring the Form
Step in creating the Form where you can set the Email and General Configurations
-
1Edit the form configuration to suit your requirements
-
2Add in a "From Name" and "From Email" so you can be notified when someone submits your form
-
3Add in general configurations like the Thank You Message
-
4Click Finish Configurations
-
5Click Finish to see the script to add to your website
-
6See the new form created on the form list
Editing an existing Form
If there is something you wish to change or configure on your existing form, you can use these steps:
-
1Go to Admin→ Forms
-
2Click the Edit button on the left-most part of any Form
-
3The Form Builder will load and the contents of the form are displayed. You can now change and/or update the form
-
4Click Finish Build Form And Start Configuration
-
5Configure 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.
-
1Go to Admin→ Forms→ Create New Form (or you can choose to edit your existing forms)
-
2The Form Builder page will appear
-
3Drag and choose your preferred components
-
4To add a page break, go to the Form Elements tab
-
5Drag the Page Break to where you want to split your form
-
6You can select the Preview button to show how your form looks like before clicking the Finish Build Form And Start Configuration button.
-
7When a Page Break is added, Next and Previous buttons are automatically added to your form.
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:
-
1Go to Admin→ Forms
-
2Click the Copy button on the leftmost part of any Form
-
3Edit the form name on the pop-up
-
4Click Create button to create the new Form
-
5The new form will have all the form components from the copied form
-
6Edit the form components to suit your requirements
-
7Click Finish Build Form And Start Configuration
-
8The 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
Using Hidden Communication Controls
Use this when you want to track data coming in from a specific form.
Using Campaign Code
-
1Drag and drop the Campaign Code over to your form
-
2Click on the label (Campaign Code)
-
3In the Value field, write the name of your Campaign
-
4Note: DO NOT overwrite the ID
-
5Edit the label
-
6You can use any of the hidden fields and set the value to automatically segment your contacts when they submit or register
Change the Submit Button Label
-
1If you want to change the name or label of 'Submit', simply mouse click onSubmitbutton
-
2The popup will be displayed on the page
-
3Select the Button Label and edit as needed
-
4click Save when done
Preview Your Form
-
1Click the button to see how your form will look when live
-
2This will open a new tab and you can preview the Form
-
3Close the tab when done to get back to your form builder
-
4Configure and Name Your Form
-
5Click Finish Build and Start Configuration to set up how your form will behave
-
6This saves the form and moves you to the next step
-
7Add a form name for easy future reference
Sending an Email When a User Submits
-
1Setup the From Name and From Email address to display on emails generated by the Form
-
2Check the Email this form on submit to enable After submission email sending
Adding additional notifications to another user in the team
-
1Setup the Email on Submit and make sure it is checked
-
2Enter the email address that you want them to receive an email notification as one submits the form
Editing Thank you Message
-
1Thank you Message: The text to display on successful submission.
-
2To 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
Form Submission and Redirect to A New Page
-
1Default Form Submission alerts you on the page
-
2If you need it to redirect to its thank you page, follow these steps:
-
3On the General Configuration Form:
-
4Check the Source Code and add this code:
-
5Edit the window location to the correct URL that it should land
-
6Make 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
-
1Scroll down and click on Advanced Options. You can edit the text in the Auto Response Body field (as shown below)
-
2You can use the property drop-down to customise the message using the data supplied from the form
-
3Any field you add to the form will be available
Notification Email
-
1Check the box Send Notification Email
-
2Then configure the email to send using the properties
-
3Properties 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
-
1To 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)
-
2You can use the property drop-down to customize the message using the data supplied from the form
-
3Any field you add to the form will be available
Pre-populate a form with User's previously submitted data
Pre-populate a form with User's previously submitted data
Finish the Form
-
1Click Finish Configuration to save the configuration
-
2You will now be presented with the embed script which allows you to put this form on any website
-
3if 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"
-
4If you want to use the form on some other site, you can just copy and paste the code supplied.
-
5Embedded Script will be generated in the text box area, you can copy and paste it into your webpage to show your form.
-
6Click Finish to return to forms
-
7The Form you just created will appear on the list of forms
Managing Forms from the Grid
Icon | Description |
---|---|
Edit form builder to setup form | |
Preview form builder | |
Configure settings of form builder | |
Embedded to see script | |
Delete form builder |
How to add a Form to a Page in WebEd
-
1Edit the desired page
-
2Select the Curly Bracket icon at the top right of the editor
-
3Click Configure button in the popup
-
4In the new popup, type the Form keyword into the textbox search. Then click on an item in the resulting search.
-
5Select the option on the left side, and review the UI on the right side.
-
6Selected form in the dropdown list and it should be displayed in the preview.
-
7Then click the Insert button It will be adding the Curly Bracket to the Configuration Curly Bracket popup then click the OK button to complete.
-
8Then click the Save And Close button and see the form displayed on the page.
How to edit the curly bracket
-
1Double-click or Right click and select the Edit Curly Bracket option on a Curly Bracket
-
2The UI is the same with the previous steps
How to Embed a Form Script in HTML
-
1Log in as an administrator and go to the Admin Dashboard.
Learn how to log in here → -
2Go to the page that you want to show the form builder and click Edit
-
3After copying > script and pasting it into Source Code editor WEBEDNINE-154 - Getting issue details... STATUS content then clicks the update and close button.
-
4The form builder is displayed on the page after the updated page.
Submit the form and send an email to the user
-
1Go to the page where you want to show the form after adding the form inserted into WebEd9.
-
2Input information in the form and submit button.
-
3
- 'Thank You Message' will be displayed after submission.
-
4Check the mailbox of the Email To to confirm the email has been sent
Inserting a Form via CurlyBracket
Inserting a Form on a page via Curly Bracket
-
1Click on the Edit button on the right
-
2Click on the 'Edit Page' button
-
3On 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.
-
4Click the Curly Bracket icon on the right.
-
5On the search box, search for 'form'.
-
6Click on 'Web Form'.
-
7Select the form you want to insert from the options.
-
8Click on the 'Insert' button below.
-
9You should now be able to see the form (with its correct ID) inserted on the content.
-
10Scroll down the edit window and click 'Save and Close'.
-
11You should now be able to see the form on your page.
Checking Form and Email Notifications
Checking a Form on the Page Editor
-
1Click on the Edit button on the right
-
2Click on the 'Edit Page' button
-
3On 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.
Navigating to the Forms module in Admin
-
1Go to Admin → Modules → Forms
-
2Find the form ID under the ID column
-
3Click on the 'Configure Settings' icon
-
4On 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.
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.
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.
-
1Go to the link: https://www.google.com/recaptcha/admin
-
2Input the label (optional) and your domains to get an API key pair Click Register
-
3After registering, you will be provided with an API key pair
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.
-
1Go to the site settings management in admin: Settings > Site Settings
-
2Search reCaptcha configuration on the site setting grid
-
3Click Edit icon to update your API key pair
-
4Click 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
-
1Go to Build Your Form screen
-
2Navigate the Form Elements tab
-
3Find reCaptcha components then drag & drop them into your form.
-
4Continue configuring your form and get the script to build a form.
-
5Google reCaptcha will be generated when rendering your form.
-
6You can use the script to build a form to add to any websites you want.
-
7For 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
-
1Go to source code → Search "Tabs.json" and select that file
-
2Update the JSON of Form components on that and deploy it on the site that you want to update
-
3Go to Admin page → Settings → Form Settings → Select "Update Form Builder"
-
4Click the button "Update Form" and wait function execute the update
-
5After the update, a message result will be shown
-
6Go to the Forms listing to check the result after updated
-
7Select Create or Edit a form
-
8Try to pick and check some fields that you have to change before
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
-
1Go 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)
-
2Find the form you want to set up Reply To and click on the Configure icon to go to the "Configure" step.
-
3In the "Email On Submit" group, there will be a text box to set Reply To for Notification.
-
4There 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.
-
5To set up Reply To for Auto Response, please go to Advanced Options → Auto Response Setup → Auto Response Reply To
-
6Finally, click "Save and Continue Configure" or "Finish Configuration" to save your changes.
-
7Notification is the email to let you know who has submitted the form and what details that were submitted.
-
8Auto 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.
Managing the Contact Detail in the Form Builder
-
1Log in as an administrator and go to the Admin Dashboard.
Learn how to log in here → -
2Click on Modules >> Forms or you can type "Forms" in the search bar and click the Forms menu item.
-
3A list of forms will be shown. Click "Create New Form" or "Edit" an existing form.
-
4Check 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:
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"
Managing the Auto Response Template for the Vehicle Listing Enquiry form
-
1To Edit the Auto Response Email Template (or other templates shown in the drop-down)
-
2Look for and click on Email Templates on the left menu panel under Settings
-
3A list of Templates should show, Scroll to look for Auto Response Email Template (Or the template you wish to edit)
-
4Then click on the Edit icon
-
5The Template form should show - where you can edit the template body (Auto Response)
-
6Once the template has been finished, click on Save
Managing the Vehicle Request More Info Form
-
1Log in as an administrator and go to the Admin Dashboard.
Learn how to log in here → -
2LocateSettings on the left panel then click on onSite Settings
-
3Or use the search box at the top of the admin menu to search "site settings"
-
4A list of Site Settings should appear
-
5Either 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
-
6Once you've located it, click on the Edit icon
-
7After 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
-
8Edit the email address it's coming from.
- And choose which Email Template will be sent to the client