Web Forms is a powerful new module that allows you to create dynamic, responsive web forms to be posted on your website and filled out by users. By using smart elements, forms can be linked to various aspects of DNA. They may include DNA accounting items, which will allow you to create invoices and process payments when forms are submitted and approved. They may also contain contact information, and be automatically linked with existing DNA contacts when submitted.

Web Forms can be assembled with no prior programming experience and are highly editable. A wide variety of fields can be created, edited and reordered using a simple drag-and-drop interface.

From the Blue Application Bar:

 

Select ‘Web Forms’ to enter the Web Forms module. You will arrive at the Web Forms dashboard.

 

The dashboard contains a list of previously created forms. Forms can be edited by clicking on their name in the list, and can be deleted by clicking on the grey trashcan icon to the right of the form’s name. New web forms can be created using the green  button.

 

Clicking on a form’s name in the dashboard will open the Edit Form page, allowing you to edit that form’s details. Clicking on the green  button from the Web Forms dashboard will likewise create a new form and open the Edit page for that new form.  

Several form details can be edited from the Edit Form page. The form’s name, auto submit status, source code, and mail settings can be changed using the box at the top of the screen. Individual form elements can be edited by clicking on that element’s box, or rearranged by clicking and dragging the element to a new position. New elements can be added using the green button at the bottom of the page. The form can also be previewed using the ‘Preview’ button in the top-right corner.

 

The Mail Settings option allows you to configure various automated emails that will be sent during different points in the form’s submission process. Clicking on ‘Mail Settings’ from the Edit Form page will navigate to the following screen.

You will now be able to configure two separate emails: the On Form Submission and On Form Processed emails. Each email consists of a title, which will be used as a subject line, and a body. The On Form Submission email will be sent to the user as soon as the form has been submitted. The On Form Processed email will be sent once the user’s form has been reviewed and processed in DNA. Note that auto-submitting forms are processed immediately upon submission, and will send both emails concurrently if they are present.

 

Clicking ‘Preview’ on the Edit Form page will cause a window to pop up containing a preview version of the current form.

Once you are finished reviewing the form, click ‘Cancel’ to return to the edit screen.

Note: The version of the form you will see when previewing will not look exactly like that which ultimately appears on your website. The preview form is a generic version of the final product, and its appearance will be affected by the styling and color scheme of your website. If your website contains multiple templates, the form’s styling will change to suit the template of the page to which it is posted.

 

Edit Source is an advanced feature that allows users with some coding knowledge to directly edit a form’s elements. It is recommended to save a form’s source code elsewhere before editing it, and not to make any edits unless necessary, as faulty edits can render a form unusable.

Clicking ‘Edit Source’ from the Edit Form screen will cause the following window to open.

The form’s source code can now be edited. Changes can be saved by clicking ‘Apply’. Any changes made will reflect in the Edit Form screen once the popup window has been closed.

 

On the Edit Form page, click on the green  button to add an element to the form. The Edit Element window will open, allowing you to create and save a new element.

Once an element has been created, it can be edited again at any time by clicking on it on the Edit Form page.

When creating a form element, one must first select the element’s type. The element’s properties are determined by its type, and will refresh automatically when the type is changed. A detailed description of the various element types and their uses and properties can be found below. Some element types are simple HTML elements, while others are proprietary elements created by bizZone.

Every form element has two names: an element name and a database name. The element name is the name that users will see when completing the form. The database name is the name of the column under which values for that element will be saved in the database. Therefore, the element name can be thought of as a visible, frontend name and the database name as a hidden, backend name.

 

Note: The database name must conform to SQL naming standards. It cannot contain spaces or special characters other than @, $ and _, and it must begin with a letter, or a _, @, or # symbol. bizZone recommends keeping a consistent naming standard across all database names to avoid confusion. Common practice is to use an altered version of the element name: change uppercase letters to lowercase letters, replace spaces with underscores, and remove special characters. Thus First Name becomes first_name and Phone # becomes phone_number.

Once the element’s type has been chosen, its properties can be altered. These properties are determined by the element type. Common properties include:

• ‘Show’ checkbox: present on Smart Elements that have multiple input areas. Use to select which of the available inputs you wish to appear on the form.
• ‘Required’ checkbox: use to set an element’s ‘required’ status. Required elements must be filled out in order for the form to be submitted.
• Label: An additional text label that will appear above the element.
• Placeholder: A placeholder value that the element will possess when the form is first loaded.
• Field name / value: Present in checkbox / radio button elements. The field name is the forward-facing name that users will see when filling out the form, and the value is the value that will be saved into the database when the form is submitted. If unsure, set both fields to the same value. Note that the value does not need to conform to SQL naming standards.

 

The various element types available in the form builder are divided into five categories: Accounting Items, Smart Elements, Basic Elements, Actions and Decorators.

 

These items are linked to accounting items in DNA, and are used for forms where a user must purchase something. Having one of these items in your form will cause it to move into payment processing once completed.

Account Item Checkbox	A list of accounting item checkboxes. Anywhere from none to all of these items can be selected at once. Use when a user can pick and choose as many items as they like from a list.
Account Item Count	A list of accounting items with quantity selection boxes. The same as an Account Item Checkbox, but the user can buy multiple copies of each item if they wish.
Account Item Mandatory	A list of mandatory accounting items. If completing this form, the user must pay for the items listed here. Use when a user should have no choice but to purchase an item (e.g. a mandatory membership fee attached to a membership application form).
Account Item Radio	A list of accounting item radio buttons, only one of which can be selected at a time. Use when a user must select one out of a list of items to purchase.

 

 

These elements are linked to various aspects of DNA. Many are composed of several inputs combined into one element.

Address	An address field that can include any of: •                Address line 1 •                Address line 2 •                Country •                Province •                City •                Postal code Any of these fields can be made mandatory if desired.
Contact	A contact information field that can include any of: •                Salutation •                First name •                Last name •                Gender •                Website URL •                Primary phone •                Secondary phone •                Fax number •                E-mail address •                Title Any of these fields can be made mandatory if desired. This information will be used for contact merging in DNA when the form is being processed— DNA will try to match these fields with the information of existing contacts.
Company Select	Allows the user to select a company from DNA’s existing list of companies.
Contact List	This field allows the user to select a contact from DNA’s existing list of contacts.
Company Search	Allows the user to search through an autocompleting list of DNA’s existing companies.
Terms and Conditions	An HTML block accompanied by a checkbox, allowing users to review and agree to a set of Terms and Conditions.

 

These are simple HTML items that can be used to collect any data not covered by the other element types.

Checkbox	A list of checkboxes, any number of which can be selected at a time. Use when a user can pick and choose any combination of options from a list.
Date Input	Will show a small calendar when clicked, allowing the user to select a date and time
Text	A one-line text input field. Has a 255-character limit.
Dropdown Input	Allows the user to select an option from a drop-down list.
File Input	Allows the user to select and upload a file from their computer.
TextArea	An expandable, multi-line text input field for greater amounts of text, such as a detailed answer to a question or a paste of a resume.
Password Input	A pair of text boxes, a password entry box and a password confirmation box. The contents in both boxes will be hidden when entered, and must be identical in order for the form to be submitted.
Radio Input	A list of radio buttons, only one of which can be selected at a time. Use when a user must select one option out of a list.

There is only one Action element, the submit button. This is a unique element that must be present on every form.

Submit

A button that will submit the form when clicked. Every form needs at least one of these buttons to be able to be submitted.

Decorators are elements used to decorate the form, and do not require any input.

Header	An HTML header, which will automatically be styled the same as other headers throughout your website. Useful for subdividing a form into sections.
HTML	A block of HTML that can include any usual HTML features, such as text, images, and tables.
Page Break	A page break.

From the Web Forms dashboard, clicking on ‘Form Submissions’ in the left sidebar menu will open the Form Submissions page.

The main feature of the Form Submissions page is a list of previously created forms, and a summary of their submission statistics. There are three possible statuses for submitted forms:

·       Pending: A form that has been submitted by a user and is awaiting review. Upon review, a form can either be processed or archived.

·       Processed: A form that has been approved and processed by a DNA user. When a form is processed, its desired action (e.g. the creation of a new membership for a membership application form) is triggered.

·       Archived: A form that has been reviewed and archived by a DNA user.

Clicking on a form’s name in this list will open a detailed list of submissions for that form.

 

Clicking on a form’s name from the Form Submissions dashboard will open a detailed list of submissions for that form only. By default, pending submissions are shown.

Using the tabs in the top-right corner of the page, the view can be switched between pending, processed, and archived submissions. You can return to the Form Submissions page by clicking the ‘BACK’ button in the bottom-right corner. Clicking on a submission’s name in the list will allow you to review that submission.

 

Clicking on a submission’s name in the list will open the review window.

From this window, several actions can be taken.

• Print: Opens a print dialogue, allowing you to print a printer-friendly version of the submission
• Delete: Deletes the submission
• Archive: Archives the submission
• Process: Opens the Merge Elements window, allowing you to associate the form with a DNA contact before processing
• Quick Process: Processes the form immediately, skipping over the Merge Elements feature
• Close: Return to the Form Submissions page

 

Note: Forms processed using the ‘Process’ button will make use of the Merge Elements feature to determine whether or not the form should be associated with an existing DNA contact. Forms processed using the Quick Process button will skip over this step, and create a new DNA contact using whichever information was inputted with the form. It is recommended to use the Process option if there is a high chance that a form was submitted by an existing contact. This will aid in reducing the number of duplicate contacts stored by DNA.

 

The Merge Elements feature is accessed by clicking on ‘Process’ when reviewing a form. Selecting ‘Process’ will open the following window.

This window allows you to match a form submission with an existing contact in DNA. In the leftmost column, you will see the first name, last name, and email address that were provided in the form submission. In the middle column are close matches with existing DNA contacts. In the rightmost column are less likely matches, as well as a search bar allowing you to search through all existing DNA contacts.

Doing nothing on this screen and immediately clicking ‘Quick Process’ (or selecting the leftmost contact information and then clicking on ‘Quick Process’) will create a new contact in DNA with the provided information, and will associate the submitted form with that new contact.

Selecting previously existing contact information from the middle or right column and then clicking on ‘Quick Process’ will associate the submitted form with that contact. If all three of the provided first name, last name and email match an existing contact, it is highly likely that the contact should be merged.

 

Back