Form Builder Tools

An in-depth description of form builder's tools.

Matthew Garrepy avatar
Written by Matthew Garrepy
Updated over a week ago

Overview

Solodev Form Builder provides developers and content creators with the tools to build, test, and style dynamic forms. This document will provide an overview of the Form Builder dashboard and discuss each property in further detail.

Form Builder Dashboard

Graphical HTML Elements

In Solodev Form Builder, the graphical elements that provide the HTML in the templating system are located in the left navigation pane and organized into three categories:

  • Elements: HTML elements such as headers, containers, columns, images, and paragraphs are located here.

  • Templates: Pre-built forms with the appropriate form fields are found here.

  • Form/Inputs: All form input fields and form buttons are located here.

Graphical elements from each category, possess element settings that developers can use to customize the HTML to their liking.

Elements

Properties

Description

Element Settings

Container

Bootstrap containers provide the developer with a means to center and horizontally pad their form's contents.

Add links to the container. Choose between fluid and non-fluid options.

Columns

HTML elements, form templates, and form inputs must be placed within columns. As a best practice columns should be embedded in containers.

Add links to the columns. Set the number of columns. Add padding.

Header

The header element represents a container for introductory content.

Add links to the header. Set heading size.

Image

The graphical analog to the <img> tag used to embed an image in an HTML page.

Add links to the image. Add an image. Add alt text. Set image shape. Set image width and height.

Paragraph

The graphical analog to the <p> tag that defines a paragraph on an HTML page.

No settings.

Templates

Properties

Description

Element Settings

Contact Form

A form template that contains First Name, Last Name, Email address, Phone number, Message fields, and a Submit button.

Set the Form Tag, Form Name Form Action, Form Method, and Enctype.

Subscribe Form

A form template that contains First Name, Last Name, Address, City, State, Zip fields, and a Submit button.

Set the Form Tag, Form Name Form Action, Form Method, and Enctype.

Forms

Properties

Description

Element Settings

Input

The graphical analog to the <input> element.

Set the name, input type, label, helper text, placeholder text, ID, prepend icon, append icon. Toggle between required and optional.

File

The graphical analog to the <input type="file"> that defines a file-select field and a "Browse" button for file uploads.

Text Area

The graphical analog to the <text-area> tag that defines a multiline input control.

Set the label, helper text, placeholder text, Name, ID. Toggle between required and optional. Hide/show the label.

Checkbox

The graphical analog to the <input type="checkbox"> that defines a checkbox.

Set the label, Name, and ID.

Select

The graphical analog to the <select> element that defines a drop-down list.

Set the item and values.

Arrange the hierarchy of select values. Add select values. Add helper text. Add placeholder text. Set the label. Add a Name. Set the ID. Toggle between required and optional. Hide/show the label.

Radio Button

The graphical analog to the <input type ="radio"> that defines a radio button -- which lets a user to select only one of a limited number of choices.

Set the label. Add a Name. Set the ID. Set the Value.

Form Button

The graphical analog to the button element that defines a clickable button.

Add links. Select a button style, set the button size, set the button text.

Form Views

Developers can preview their forms from the form builder in different screen sizes. Form views are located in the top navigation pane in Solodev Form Builder. Preview forms in a desktop view, tablet view, mobile landscape view, and mobile portrait view.

Element Styling

Developers can style all graphical elements in each category, including form templates, using Element Styling. Element Styling allows the developer to apply CSS styling to each graphical element with little or no code. Below is a description of the CSS properties that can be styled.

Properties

Description

Position

Set pixel, em, or % values and colours for margins, borders, and padding for all sides. Developers can apply styling to all sides of margins, borders, and padding with the padlock icon. Developers can also center margins, borders, and padding.

Border Radius

Adjust the radius for each or all corners of the border in pixels, em, or % of the display.

Layout

Set the values for the display, float, overflow, position, text-align, and clear properties.

Size

Set the height and with of an element in pixels, em, or % of the display.

Typography

Set the font, font-size, color of the text. Align, bold, italicize, underline and set the line-height of the text.

Background

Set the background colour and background image.

Did this answer your question?