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