» Form

Form

Forms are useful for your site visitors to conveniently leave their information or answer any questions you set. With WebCommander you can create custom forms that suit your business needs for a range of different purposes. To start creating your form you need to be logged in to your WebCommander account. Once logged in you’ll need to install the Form Editor plugin.

You can find the instructions to install a plugin on the Add Plugins page.

Create a new Form

  1. From the Web Content menu, click on the Form option

2. Click on the + New button to select your form type.

  1. Blank Form: build a customised form based on your preferences and requirements.
  2. Contact Form: offers a pre-built contact form for you to use in your site.
  3. Event Registration Form: provides a pre-designed event registration form to obtain attendee information.
  4. Job Application Form: offers a basic job application form with all the necessary fields required to submit a job-application.
  5. Order Form: a form designed to obtain the delivery details and product information from the customers.
  6. Customer Survey: a standard survey form to gain feedback from visitors or

Once you’ve selected your chosen form, click on the Create button to load and further customise your form if needed.

Edit Form Attributes

Form Settings

From here you can edit the form attributes including the name of your new form and the Captcha options.


1. Enter a name for your form in the Name field.
2. Toggle the Enable Captcha toggle switch to display a captcha code for visitors to enter before submitting the form.
3. There are three options to choose from when selecting where your form submissions will be sent.  
Send to Email: Enter the subject of the email, your preferred email address(s), and CC or BCC any additional email address(s) if required. You can also choose to send a copy of the submission to the default contact.

Send as an external URL: Enabling this option lets you receive the form submissions to a specific web address. Enter the desired URL in the URL field to save a local copy of the submission data.

Save internally: Selecting this option will save all the form submissions to the WebCommander back-end.

Advanced Settings

From here you can edit the advanced settings of your form. This includes changing the text for the submit button and other functions.
1. Change the default text on your submission button by replacing the text in the “Label for the submit button” field.
2. Toggle the Enable Reset switch to allow the user to reset all form information before submitting it.
3. Enter your own success/failed messages using the Successful Submissions and Failed Submissions fields respectively.

4. Toggle the “Require Acceptance of a Terms & Condition” button to create a checkbox for visitors to click before submitting the form. From here you can also set the terms as change the default text that accompanies the checkbox.
5. Enter the name of the class where the HTML code of the form is to be included in the HTML Class field
6. If needed, you can also set any explicit functions to run before or after the submission of your form. You can enter your code/function in between the function beforeSubmit(form) { } and function afterSubmit(form) { } fields.

Conditions

If there are any conditions applied to a form field, they will be listed here. Each element of the form can have different conditions applied. To create a condition on a form element, go to Edit Form Elements.

Add Form Elements

Once you’ve created your new form it’s time to completely customise by adding new form elements and editing pre-existing fields. 
 
To add a new element to the form:
1. Click on the + button on the top-right corner of the form.

2.  From this screen you can select from the following types of fields.
     Single Line:  Allows site visitors to answer using a single sentence.
     Paragraph: To provide the space for entering a paragraph Allows site visitors to answer using a paragraph.
     Single or Multi Select:  Allows site visitors to select from a range of options you provide.
     Date & Time:  Allows site visitors to pick a date and a time.
     File:  Allows site visitors to upload files.

Edit Form Elements

Whether you added a new field or want to customise an existing one WebCommander’s form settings allow you to do so with ease.

When creating your form, you can select certain options by clicking the cog icon displayed next to a selected field. Conditions include moving the field up or down the form, copying, removing and adding the selected field. Additionally, when selecting radio button element there is the option to “add conditions”.

When all the fields are placed in the form you can easily rearrange them by clicking and dragging the blocks across the form.

Below we go into greater detail on how to use each field for every element and edit them accordingly.

Single Line

Used to allow answers that are a single line or sentence. To edit:

1. Click on the single line field you would like to edit. Your field options will appear on the left side of the screen.
2. Field Settings

  • Edit the title of your field
  • Toggle whether the field is required

3. Advanced Settings

From here you can edit advanced properties of your field including default values, placeholder and hover text as well as specifying the html name and class for the field.

4. Validation

  • From here you can set a number of restricts when it comes to what can be entered in the text field. For example:
  • Set the length of the answer by placing a minimum or maximum word length.
  • Set the format of the answer. Choose between Email, AlphaNumeric, Alphabetic, Numeric, Phone Website(URL) or None.
  • Custom: Enter a customised validation by toggling this option and setting your own expression

Paragraph

Used to allow answers that are a paragraph. To edit:

1. Click on the paragraph field you would like to edit. Your field settings options will appear on the left side of the screen.
2. Field Settings

  • Edit the title of your field
  • Toggle whether the field is required

3. Advanced Settings

From here you can edit advanced properties of your field including default values, hover text as well as specifying the html name and class for the field. 

4. Validation
Set the length of the answer by placing a minimum or maximum word length.

Radio Button

Allows visitors to answer by selecting answers using a radio button or dropdown menu. To edit:
1. Click on the element you would like to edit, and you will have the field settings options on the left pane.
2. Field Settings

  • Edit the title of your field
  • Toggle whether the field is required
  • Choose if the selection style will the single or multiple select
  • Make the style radio button or drop down. You can add as many radio buttons/ drop downs you need and add Name and Value to it

3. Advanced Settings
From here you can edit advanced properties of your field including default values, hover text as well as specifying the html name and class for the field.

Date & Time

Allows visitors to select a date & time as an answer. To edit:
1. Click on the Date & Time field you would like to edit. Your field options will appear on the left side of the screen.
2. Field Settings

  • Edit the title of your field
  • Toggle whether the field is required
  • Add the type of picker you would like to display from the menu below.
  • Select whether the date type will be calendar or dropdown

3. Advanced Settings
From here you can edit advanced properties of your field including default values, hover text as well as specifying the html name and class for the field. 

4. Validation
Restrict the date by setting a start and end date

File

Allows visitors to upload files as their answer. To edit.
1. Click on the File field you would like to edit. Your field options will appear on the left side of the screen.
2.  Field Settings

  • Edit the title of your field
  • Toggle whether the field is required
  • Choose from our two separate styles to upload.

3. Advanced Settings
From here you can edit advanced properties of your field including default values, hover text as well as specifying the html name and class for the field. 

4. Validation

  • Restrict the maximum size of the uploaded file
  • Choose the format(s) that visitors can upload.

Adding the Form to your Site

To display a form on your site, you need to attach your newly created form to a page.
1. From the Web Content menu, select the Page option. Once loaded click on the action cog for the page you would like to add the form to. From the cog menu select Edit Content

2. From the left-pane, use the search box to find the Form widget and drag it to where you want it to appear on your page.

3. You can select the form type from the form drop-down option in the widget section. All the available forms are listed in the drop-down menu, including the ability to create a new form. Click save to update the changes.

4. Once the form has been added to a page, it will be displayed on the front-end or your website

5. Once the form is in your site you can continue to make edits using the simple editor to make changes to the titles of form fields, edit placeholder text and mark fields as required. Any further modifications you’ll need to make by returning to the Form tab in Webcommander’s back end.

Accessing form submissions

To view your submission records, click the three dots next to your form and select View Submissions.

Newsletter
Share this page