Breadcrumb path: Pages / Form Builder
You can access this page by clicking on Pages from the main menu, and Page Builders from the dropdown menu. Then select the Form Builder module from the available builders.
Form Builder Fundamental
In this section, you will learn how to use the Form Builder - Editor. This is our versatile, content-building software that allows you to easily and efficiently create your own pages.
Here is an example of a finished page created using our Form Builder:
As part of creating a new page using the Form Builder, you will have access to the Editor window shown below. The following screenshots and descriptions will guide you through each component of the
Editor.
This section will be separated into three main parts (plus subsections), covering the different functions included in the Editor:
- ● 1 Screen size
- ● 2 Control Panel
- ● 3 Design Panel
- (A) Elements
- A1 - Columns
- A2 - Forms
- A3 - Blocks
- A4 - Articles
- A5 - Contact
- A6 - CTA
- A7 - Commerce
- A8 - Features
- A9 - Gallery
- A10 - Hero
- A11 - Pricing
- A12 - Statistics
- A13 - Team
- A14 - Testimonials
- A15 - Common Inputs
- A16 - Row Templates
- A17 - Carousel Templates
- A18 - Desktop Templates
- A19 - Tablet Templates
- A20 - Mobile Templates
- A21 - Form Templates
- (B) Layer Manager
- (C) Style Brush
This guide will now walk you through how to use all parts of the Editor.
(1) Screen Size
- ● 1 In this area, you will find icons that toggle between Desktop, Tablet, and Mobile design modes for your page. This allows you to easily and quickly design different canvases to fit each of these device viewing modes.
- Desktop. Clicking this icon will enable you to design your page for Desktop use.
- Tablet. Clicking this icon will enable you to design your page for Tablet use.
- Mobile. Clicking this icon will enable you to design your page for Mobile use.
- ● After you have understood how to change the Screen Size, you can move on to the next section (Control Panel).
(2) Control Panel
- ● 2 In this area, moving from left to right, you will find the following functions:
- Change Version. This button enables you to Switch the Version of the Editor. There are two versions: the Default which is covered in this guide, and the Alternate, which features the same functionalities but a different layout and appearance. You will receive a confirmation message to ensure you are ready to make the change.
- View Elements. This allows you to see the individual Elements of your page.
- Preview. This provides an instant Preview of your page in its current state.
- Fullscreen. This button toggles on and off the Full Screen viewing option for the editor
.
- View Code. This button enables you to View the HTML Code for your page.
- Undo / Redo. These buttons allow you to move backward (Undo) or forwards (Redo) in recent memory.
- Edit Code. This opens your Code Editor (shown below), giving you access to all the page’s source code for HTML editing.
- Clear Canvas. This delete button resets your canvas and clears everything from your current draft.
- Save to Database. This saves your current canvas as a single file that can be accessed again for future use.
- System Accessibility Test. Click this button to perform a System Accessibility Test (shown below). This will check your page to ensure that links are working and that the necessary Elements are provided to satisfy ADA Compliance.
Now that you have learned about the functions of the Control Panel, you can move on to the next section (Design Panel).
(3) Design Panel
- ● 3 In this area, you can toggle between the three options to be displayed in the bar along the right side. Default (shown) is Elements (right icon). For this section, we will move from right to left, through the different menu icons.
- (A) Elements. This displays all the Elements you can drag and drop onto your canvas.
- (B) Layers. This displays the Layer Manager. Here you can view and manage all the different layers on your canvas.
- (C) Style Brush. This enables you to change the Style for Elements on your Canvas.
Each of these sections will be explained individually. When you are ready, you can move to the next section (Elements).
(3A) Elements
- ● 1 With the Elements icon selected along the top, you will see the right bar contains a long list of dropdown menus. Elements in the Form Editor are grouped into the following categories:
- ● A1 - Columns. Displays Column organizers that can be used on your canvas. These create dividing spaces on your canvas to help with arranging your various Elements.
- ● A2 - Forms. Displays the Forms that can be used on your canvas. These are premade Forms that can serve a variety of purposes.
- ● A3 - Blocks. Displays the basic Blocks that can be used on your canvas. This category includes many of the various Elements you will be using.
- ● A4 - Articles. Displays the Articles that can be used on your canvas.
- ● A5 - Contact. Displays the Contact that can be used on your canvas.
- ● A6 - CTA. Displays the CTA that can be used on your canvas.
- ● A7 - Commerce. Displays the Commerce that can be used on your canvas.
- ● A8 - Features. Displays the Features that can be used on your canvas.
- ● A9 - Gallery. Displays the Gallery that can be used on your canvas.
- ● A10 - Hero. Displays the Hero that can be used on your canvas.
- ● A11 - Pricing. Displays the Pricing that can be used on your canvas.
- ● A12 - Statistics. Displays the Statistics that can be used on your canvas.
- ● A13 - Team. Displays the Team that can be used on your canvas.
- ● A14 - Testimonials. Displays the Testimonials that can be used on your canvas.
- ● A15 - Common Inputs. Displays the Common Inputs that can be used on your canvas.
- ● A16 - Row Templates. Displays the Row Templates that can be used on your canvas.
- ● A17 - Carousel Templates. Displays the Carousel Templates that can be used on your canvas.
- ● A18 - Desktop Templates. Displays the Desktop Templates that can be used on your canvas.
- ● A19 - Tablet Templates. Displays the Tablet Templates that can be used on your canvas.
- ● A20 - Mobile Templates. Displays the Mobile Templates that can be used on your canvas.
- ● A21 - Form Templates. Displays the Form Templates that can be used on your canvas. These are premade templates for forms serving a variety of purposes.
- ● Each category of component will be covered separately below.
Now that you have learned about the different sections of The Editor, you can move to the next section (3A-1 - Columns).
3A-1 - Columns
Each of the Columns configurations to the right can be dragged and dropped onto the canvas. Columns can be placed within a Form, or a Form can be placed within a Column.
- ● 1 1 Column. An example of how the 1 Column configuration looks on the canvas.
- ● 2 2 Columns. An example of how the 2 Columns configuration looks on the canvas.
- ● 3 3 Columns. An example of how the 3 Columns configuration looks on the canvas.
- ● 4 2 Columns 3/7. An example of how the 2 Columns 3/7 configuration looks on the canvas. This includes 2 columns, one filling 30% of the column width, the other filling 70% of the width.
Now that you have learned about how to apply Columns to your Form Editor canvas, you can move on to the next section (3A-2 - Forms).
3A-2 - Forms
- ● 1 Forms. Clicking this dropdown will reveal a list of additional individual Forms elements that can be dragged and dropped onto the canvas (listed from left to right).
- Form. This Form includes a layout for a default Form for site visitors to fill out.
- Input. This Form includes a general Input field where site visitors can enter text.
- Textarea. This Form includes a general Textarea where site visitors can enter text.
- Select. This Form includes a Select dropdown menu where site visitors can select an option.
- Button. This Form includes a Button that site visitors can click on.
- Label. This Form includes a Label for site visitors to identify a portion of your site.
- Checkbox. This Form includes a Checkbox where site visitors can select an option.
- Radio. This Form includes a Radio where site visitors can select an option.
- ● 2 A Form has been dragged and dropped onto the canvas in the example (but has not yet been connected to the database).
- ● Note: for any of these Forms to function properly on your website, additional programming within the Style menu is required (connecting them to the database).
Now that you have learned about Forms, you can move on to the next section of the Form Builder - The Editor user manual (3A-3 - Blocks).
3A-3 - Blocks
This section provides access to Blocks that can be dragged and dropped onto the canvas.
- ● Countdown. This displays a Countdown timer on your site.
- ● Typed. This displays an animation of text being typed, and a cursor.
- ● Tabs Block. This displays a Tabs Block you have entered. It includes Tabs and a place for Tabs Content.
- ● Slider. This displays a Slider on your page.
- ● Icon. This displays an Icon on your page.
- ● Text. This displays a space where you can enter Text to appear on your page.
- ● Link. This displays a Link on your page.
- ● Image. This displays an Image on your page.
- ● Video. This displays a Video on your page.
- ● Map. This displays a Map on your page.
- ● Link Block. This displays a Link Block on your page.
- ● Quote. This displays a Quote on your page.
- ● Text section. This displays a Text section on your page.
- ● Button Styles 1, 2, and 3. This displays a Button of Style 1, 2, or 3.
- ● Line. This displays a Line on your page.
Now that you have learned about Blocks, you can move on to the next section of the Form Builder - The Editor user manual (3A-4 - Articles).
3A-4 - Articles
This section provides access to Articles. You can drag and drop these premade templates designed to offer a preview of Articles that you have written on your site. You will need to set up Links to the article pages on your site.
- ● 1 Articles. Here, you can drag and drop Articles onto your canvas.
- ● 2 An example is shown of how the first three-Article element can appear on your canvas.
Now that you have learned about Articles, you can move on to the next section of the Form Builder - The Editor user manual (3A-5 - Contact).
3A-5 - Contact
This section provides access to Contact elements. You can drag and drop these premade templates designed to provide Contact info for your store.
- ● 1 Contact. Here, you can drag and drop Contact elements onto your canvas.
- ● 2 An example is shown of how the first Contact element can appear on your canvas.
Now that you have learned about Articles, you can move on to the next section of the Form Builder - The Editor user manual (3A-6 - CTA).
3A-6 - CTA
This section provides access to CTA elements. CTA stands for “Call to Action” which is a portion of your website intended to engage your visitors and motivate them to connect with your business in a tangible way. You can drag and drop these premade templates designed to provide CTA info for your store.
- ● 1 CTA. Here, you can drag and drop CTA elements onto your canvas.
- ● 2 An example is shown of how the first CTA element can appear on your canvas.
Now that you have learned about Articles, you can move on to the next section of the Form Builder - The Editor user manual (3A-7 - Commerce).
3A-7 - Commerce
This section provides access to Commerce elements. These templates offer a way to organize Commercial Products for Sale on your website. You can drag and drop these premade templates designed to organize Commerce elements for your store.
- ● 1 Commerce. Here, you can drag and drop Commerce elements onto your canvas.
- ● 2 An example is shown of how the first Commerce element can appear on your canvas, which includes an Image, Category, Name, and Price.
Now that you have learned about Commerce, you can move on to the next section of the Form Builder - The Editor user manual (3A-8 - Features).
3A-8 - Features
This section provides access to Features elements. These templates offer a way to organize Features on your website. You can drag and drop these premade templates designed to organize Features for your store.
- ● 1 Features. Here, you can drag and drop Features elements onto your canvas.
- ● 2 An example is shown of how the first Features element can appear on your canvas, which includes a main Title for the Features, Titles for individual Features, Icons for each Feature, a preview paragraph of each Feature, and a link to Learn More about each Feature.
Now that you have learned about Features, you can move on to the next section of the Form Builder - The Editor user manual (3A-9 - Gallery).
3A-9 - Gallery
This section provides access to Gallery elements. These templates offer a way to organize a Gallery of images for advertising products on your website. You can drag and drop these premade Gallery templates onto the canvas.
- ● 1 Gallery. Here, you can drag and drop Gallery elements onto your canvas.
- ● 2 An example is shown of how the first Gallery element can appear on your canvas, which includes a main Title and Description for the Gallery, in addition to Images that will be included in your Gallery.
Now that you have learned about Gallery, you can move on to the next section of the Form Builder - The Editor user manual (3A-10 - Hero).
3A-10 - Hero
This section provides access to Hero elements. These templates offer a way to organize a Hero, which refers to a special feature or product on your site that you want to stand out among the rest.
- ● 1 Hero. Here, you can drag and drop Hero elements onto your canvas.
- ● 2 An example is shown of how the first Hero element can appear on your canvas, which includes an Image, Title and Description, in addition to two Buttons.
Now that you have learned about Hero, you can move on to the next section of the Form Builder - The Editor user manual (3A-11 - Pricing).
3A-11 - Pricing
This section provides access to Pricing elements. These templates offer a way to present Pricing pages on your site, which includes access and information to purchasing different packages.
- ● 1 Pricing. Here, you can drag and drop Pricing elements onto your canvas.
- ● 2 An example is shown of how the first Pricing element can appear on your canvas, which includes four packages with itemized features, Title, Price, and Button.
Now that you have learned about Pricing, you can move on to the next section of the Form Builder - The Editor user manual (3A-12 - Statistics).
3A-12 - Statistics
This section provides access to Statistics elements. These templates offer a way to present Statistics for your site.
- ● 1 Statistics. Here, you can drag and drop Statistics elements onto your canvas.
- ● 2 An example is shown of how the first Statistics element can appear on your canvas, which includes metrics for number of Users, Subscribers, Downloads, and Products.
Now that you have learned about Statistics, you can move on to the next section of the Form Builder - The Editor user manual (3A-13 - Team).
3A-13 - Team
This section provides access to Team elements. These templates offer organized and elegant ways to present your Team on your site.
- ● 1 Team. Here, you can drag and drop Team elements onto your canvas.
- ● 2 An example is shown of how the first Team element can appear on your canvas, which includes a Team Title and Description, and a Grid for individual Team members with their profile Images and their Roles.
Now that you have learned about Team, you can move on to the next section of the Form Builder - The Editor user manual (3A-14 - Testimonials).
3A-14 - Testimonials
This section provides access to Testimonials elements. These templates offer organized and elegant ways to present Testimonials on your site. Testimonials are a crucial recommended element of your site, showcasing your devotion to customers and confirming their satisfaction with your services.
- ● 1 Testimonials. Here, you can drag and drop Testimonials elements onto your canvas.
- ● 2 An example is shown of how the first Testimonials element can appear on your canvas, which includes a Heading, and two Quotes for individual Customers or others providing Testimonials for your business.
Now that you have learned about Testimonials, you can move on to the next section of the Form Builder - The Editor user manual (3A-15 - Common Inputs).
3A-15 - Common Inputs
- ● 1 Common Inputs. Clicking on the dropdown will display all of the available Common Inputs. The purpose of these is to allow for a user to easily and quickly create a page by using a variety of prebuilt Common Inputs which are already connected to the database.
- ● The Common Inputs available are First Name, Last Name, Email, Phone, Comments, Address, Zip code, City, State, Date, and Time.
- ● 2 Individual Inputs can be dragged and dropped onto any form already on the canvas. The existing form elements will be retained and the Common Inputs will be added.
- ● Clicking on a Common Input on the canvas will reveal the Style menu, where the matching Placeholder can be entered (under Settings).
- ● Note: All of the Common Inputs can be instantly activated and used on your website.
Now that you have learned about Common Inputs, you can move on to the next section of the Form Builder - The Editor user manual (3A-16 - Row Templates).
3A-16 - Row Templates
This section provides access to Row Templates elements. These are premade Templates that were created so that you could easily build a website, one Row at a time.
- ● 1 Row Templates. Clicking on the dropdown will display all of the available Row Templates. The purpose of these is to allow for a user to easily and quickly create a page, one row at a time, by using a variety of prebuilt Row Templates.
- ● 2 Individual Row Templates can be drag-and-dropped onto the canvas. The Text and Image can be modified by the user. The fifth template down the list is shown in the example.
Now that you have learned about Row Templates, you can move on to the next section of the Form Builder - The Editor user manual (3A-17 - Carousel Templates).
3A-17 - Carousel Templates
This section provides access to Carousel Templates elements. These are premade Templates that were created so that you could easily build a Carousel for your website.
- ● 1 Carousel Templates. Here, you can drag and drop Carousel Templates elements onto your canvas.
- ● 2 An example is shown of how the first Carousel Templates element can appear on your canvas.
Now that you have learned about Carousel Templates, you can move on to the next section of the Form Builder - The Editor user manual (3A-18 - Desktop Templates).
3A-18 - Desktop Templates
This section provides access to Desktop Templates elements. These are premade Templates that were created so that you could easily build a website formatted for Desktop.
- ● 1 Desktop Templates. Here, you can drag and drop Desktop Templates elements onto your canvas.
- ● 2 An example is shown of how the first Desktop Templates element can appear on your canvas.
Now that you have learned about Desktop Templates, you can move on to the next section of the Form Builder - The Editor user manual (3A-19 - Tablet Templates).
3A-19 - Tablet Templates
This section provides access to Tablet Templates elements. These are premade Templates that were created so that you could easily build a website formatted for Tablet.
- ● 1 Tablet Templates. Here, you can drag and drop Tablet Templates onto your canvas.
- ● 2 An example is shown of how the first Tablet Template element can appear on your canvas.
- ● 3 Click the Tablet icon to set the Format to Tablet. This will ensure that the Tablet Template you choose will be compatible with the Tablet Format.
Now that you have learned about Tablet Templates, you can move on to the next section of the Form Builder - The Editor user manual (3A-20 - Mobile Templates).
A20 - Mobile Templates
This section provides access to Mobile Templates elements. These are premade Templates that were created so that you could easily build a website formatted for Mobile.
- ● 1 Mobile Templates. Here, you can drag and drop Mobile Templates elements onto your canvas.
- ● 2 An example is shown of how the first Mobile Templates element can appear on your canvas.
- ● 3 Click the Mobile icon to set the Format to Tablet. This will ensure that the Mobile Template you choose will be compatible with the Mobile Format.
Now that you have learned about Mobile Templates, you can move on to the next section of the Form Builder - The Editor user manual (3A-21 - Form Templates).
3A-21 - Form Templates
This section provides access to Form Templates elements. These are premade Templates that were created so that you could easily build a Form for your website.
- ● 1 Form Templates. Clicking on the dropdown reveals a list of premade Form Templates. The purpose of these is to allow a user to instantly and easily add a prebuilt Form to the page they are creating.
- ● 2 Individual Form Templates can be drag-and-dropped onto the canvas. Clicking on any element of the form will automatically bring up the Style Manager menu (to be covered in a later section). The second Template down the list is shown in the example.
Now that you have learned about Form Templates, you can move on to the next section of the Form Builder - The Editor user manual (3B - Layer Manager).
3B - Layer Manager
- ● 1 In this section you can see an outline of all the Layers in the current canvas.
- The View (eye) icon on the right can be turned on or off to display the Layers.
- The Move icon on the right can be dragged to reposition the Layers.
Now that you have learned how to use Layers, you can move on to the next section by selecting the left icon (C - Style Manager).
C - Style Manager
This displays the Style Manager for editing the elements on your canvas. This will bring up a menu for the selected element and allow you to enter detailed specifications.
- ● 1 Above is an example of the Style Manager options available when a Form element is selected.
- ● The following Style options will be available when you click on a Form element as long as the Style Manager is activated.
- Settings. These basic Settings can be modified for any given form (an example is shown for the Email form element selected).
- Name. This field enables you to change the name of the Form field.
- Placeholder. This field enables you to enter a Placeholder, which is text that will display until the user fills in the form with replacement text.
- Type. This dropdown enables you to select the Type of Form field.
- Required. This checkbox enables you to choose whether or not the user must fill out this Form in order to submit their information.
- Tabindex. This field displays the Tabindex for the selected Form.
- Id. This field displays the Id for the Form field.
- Max Length. In this field, you can enter the Max Length of the selected Form field.
- General. This enables you to make changes to the component’s General specs, including Display and Position.
- Dimension. This enables you to make changes to the component’s Dimension specs, including Width, Height, Margins, and Padding.
- Typography. This enables you to make changes to the component’s Typography specs, including Font Size, Color, Weight, Letter Spacing, Line Height, Text Align, and Text Decoration.
- Decorations. This enables you to make changes to the component’s Decorations specs, including Opacity, Border, Box Shadow, and Background.
- Extra. This enables you to make changes to the component’s Extra specs, including Transition, Perspective, and Transform.
- Flex. This enables you to make changes to the component’s Flex specs, including Flex Parent, Children, Container, Justify, and Align.
Now that you have learned how to use the Style Manager, this concludes the help guide section for the Form Builder - The Editor.
Comments
0 comments
Please sign in to leave a comment.