Forms / Webforms - Creating and Managing

Overview   

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 in 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 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

  • Form Control or Field : Any thing 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 sent to the person who submits the form
  • Notification Email: A different email sent to a someone else when a visitor clicks submit

How to create a new Form using Form Builder

  • The first, go to login site as Administrator
  • Once you're logged on you should be taken to the admin dashboard. Once you're there - Go to the left panel menu then click on Modules > Forms
    A list of all the existing forms on the pages of your website should now show.

  • The form management will be displayed on grid and click create new form button



  • The form builder is displayed.
  • On the left are all the form controls you can use.
  • The most common controls are on the tab Marketing Details (firstname, lastname, email etc)
  • On the right, is an empty form waiting for fields. (A Submit button is inserted to give you a start point)



  • Simply click and drag controls from the left side, click on the label, drag and drop to the form on the right side
  • If you change your mind, just click on the label and drag it back to the left.



  • Once you have dragged and chosen your component, click on label to manage the form control
  • This opens a popup allowing you to change and edit the labels, options and properties
  • You can add validation such for required or mandatory fields on your form
  • Once done, click Save

If you would like to add form fields that are not commonly used on forms. You can use the steps below :

  • Go to Form Elements tab
  • Drag/Get the TextBox field - or any other preferred fields that are present and useful on the Form Elements tab
  • Update the ID/Name to the preferred ID/Name (ie. DietaryRequirements, CarModel)
  • Then click Save to apply the changes made

Please also note that most ID/Name of the fields in Form Elements tab can be edited, so this will most likely be the go-to fields if you needed a customised ID/Name.

Make the field required/mandatory

  • On the Build Your Form section, click the field you want to be required
  • Tick the Required checkbox
  • Then click Save to apply the changes made

This will make the field required/mandatory on the form.

How to use Page Breaks

You can split any form into multiple pages by using the Page Break form element on Form Builder page. It helps to fit the form into logical sections and fits better to your site without changing the overall design.

  • Go to Admin → Forms → Create New Form (or you can choose to edit your existing forms)
  • The Form Builder page will appear
  • Drag and choose your preferred components


  • To add a page break, go to Form Elements tab
  • Drag the Page Break to where you want to split your form 


  • You can select the Preview button to show how your form looks like before clicking the Finish Build Form And Start Configuration button.
  • When a Page Break is added, Next and Previous buttons are automatically added to your form.

Editing a Form

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

  • Go to Admin → Forms
  • Click the Edit button on the left most part of any Form

  • The Form Builder will load and the contents for the form are displayed. You can now change and/or update the form

  • Click Finish Build Form And Start Configuration
  • Configure the Form → Finish Configuration

Copying a Form

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

  • Go to Admin → Forms

                                                                      

  • Click the Copy button on the left most part of any Form

                                                                      

  • Edit the form name on the Popup
  • Click Create button to Create the new Form

                                                                     

  • The new form will have all the form components from the copied form
  • Edit the form components to suit your requirements
  • Click Finish Build Form And Start Configuration

                                                                    

  • The new form will also have all the Configure form details from the copied form

Configuring the form

  • Edit the form configuration to suit your requirements
    • Add in the correct "From Name" and "From Email"
    • Add in general configurations like the Thank You Message
  • Click Finish Configurations

                                                                   

  • Click Finish

                                                                 

  • See the new form created on the form list

                                                                



Segmenting Your 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

  • Drag and drop the Campaign Code over to your form
  • Click on the label (Campaign Code)
  • In the Value field, write the name of your Campaign
  • Note: DO NOT overwrite the ID
  • Edit the label 

Using Product of Interest

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

Drop Down Selectors for Campaign Codes / Product of Interest

  • Instead of setting hidden values for Product of Interest or Campaign Code you can also drag and drop controls.
  • This will allow the visitor to select the values prior to submitting the form
  • This is a great way to prompt for any type of value and allows easy segmentation of contacts for email broadcasting


  • If you want a drop-down list for choosing Product of Interest or Campaign Code, create these BEFORE adding the element to your form
  • Go to Admin
  • Search for "Product of Interest" or "Campaign Code"
  • Edit any existing records
  • Use the Create New button to add a record

Change the Submit Button Label

    • If you want to change the name or label of 'Submit', simply mouse click on Submit button
    • The popup will be displayed on page
    • Select the Button Label and edit as needed
    • click Save when done

Preview Your Form

  • Click the button  to see how your form will look when live
  • This will open a new tab and you can be preview the Form
  • Close the tab when done to get back to your form builder



Configure and Name Your Form

  • Click Finish Build and Start Configuration to setup how your form will behave
  • This saves the form and moves you to the next step 
  • Add a form name for easy future reference

Sending an Email When a User Submits 

  • Setup the From Name and From Email address to display on emails generated by the Form
  • Check the Email this form on submit to enable After submission email sending

Editing Thank you Message 

  • Thank you Message: The text to display on successful submission.
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 

Advanced Form Options

Auto Responders (Editing your Auto Responder)

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

 
  • 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)
  • You can use the property drop down to customise the message using the data supplied from the form
  • Any field you add to the form will be available


Notification Email

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


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

Finish the Form

  • Click Finish Configuration to save the configuration
  • You will now be presented with the embed script which allows you to put this form on any website
  • 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"

If you want to use the form on some other site, you can just copy and paste the code supplied.

  • Embedded Script will be generated in the text box area, you can copy and paste it into your webpage to show your form.




  •  Click Finish to return to forms

  • The Form you just created will appear on the list of forms


Managing Forms from the Grid

  • You can edit, preview or configure forms from from the form listing
  • Just select from the available icons to the left of the form



IconDescription
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

  • Edit the desired page
  • Select Curly Bracket  icon at the top right of the editor



  • Click Configure button in the popup

  • In new popup, typing Form keyword to the textbox search. Then click on an item in result search.

  • Select option in the left side, review the UI in the right side.


  • Selected form in the dropdown list and it should be displayed in preview.


  • Then click Insert button It will be adding the Curly Bracket to Configuration Curly Bracket popup then click OK button to complete.




  • Then click Save And Close button and see the form is displayed on the page.


How to edit the curly bracket 

  • Double click or Right click and select Edit Curly Bracket option on a Curly Bracket



     
  • The UI is the same with previous steps


How to Embed a Form Script in HTML

  • Go to WebEd 9 site and login as Administrator
  • Go to page that you want to show form builder and click Edit



  • After copied </> script and pasting it into Ck editor  content then click update and close button.



  • The form builder is displayed on page after updated page.


Submit form and send email to user

  • Go to the page that you want to show the form after added form inserted to WebEd9.
  • Input information in the form and submit button. 

    'Thank You Message' will be displayed after submit.

  • Check the mailbox of the Email To to confirm the email has been sent



Related articles