# Add Form

In Solodev, you can add a form to a web page to collect information for almost any kind of application.

# Add Form Options

From the main dashboard, there are two ways to add a form to Solodev:

  • Upload TPL File: If you have an existing form template, you can upload it as a .tpl file directly into Solodev and seamlessly integrate it into your webpage.

  • Form Studio: Solodev's drag-and-drop Form Studio lets you to create highly customized forms effortlessly, offering fine-grained control without the need to write any code. Instantly incorporate text, images, input fields, radio buttons, and more to craft your ideal form. Save your form and apply it to your page within minutes.

  1. From the main navigation menu, select Forms.

Main navigation with Forms link highlighted

  1. Click Add Form to start creating your new form.

Add Form

  1. Name Your Form. Enter a descriptive name to easily identify your form.

Name form field

  1. Modify the location where your form will be added, if needed, by clicking Browse. (Default: Forms).

Location form field

  1. Click the Upload button under the Template section.

Add form template button

  1. Select and upload your file containing the HTML form.

You can use the following Bootstrap form:

<div class="container">
  <div class="mb-3">
    <label for="full_name">Full Name</label> 
    <input class="form-control" id="full_name" name="full_name" type="text" required>
  </div>

  <div class="mb-3">
    <label for="email">Email</label> 
    <input class="form-control" id="email" name="email" type="email" required>
  </div>

  <div class="mb-3">
    <label for="company">Company</label> 
    <input class="form-control" id="company" name="company" type="text">
  </div>

  <div class="mb-3">
    <label for="phone">Phone</label> 
    <input class="form-control" id="phone" name="phone" type="tel">
  </div>

  <div class="mb-3">
    <label for="message">Message</label>
    <textarea class="form-control" id="message" name="message"></textarea>
  </div>

  <input class="btn btn-primary" type="submit" value="Submit">
</div>
  1. Click Save.

form main image

Use the built-in drag-and-drop WYSIWYG editor that allows you to create custom forms without any coding knowledge. It provides variety of features to help you create a professional-looking form, including:

Layout

Left toolbar Description Right toolbar options
Container Provides a controllable container to
position and pad objects like text, images,
and input fields
• Fluid: allows container to stretch to full browser width
• Non-Fluid: constrains container based on specific width
• Link settings: add a URL, email, or phone link.
• Set form to open in a new tab
• Full control of appearance
Columns Allows you to organize your form content
into pre-defined columns
• Column settings: set the number of columns and padding
• Link settings: add a URL, email, or phone link
• Set form to open in a new tab
• Full control of appearance

Content

Left toolbar Description Right toolbar options
Header Provides a text header to your form. • Header settings: set the H1 or other hierarchal status of your text
• Link settings: add a URL, email, or phone link
• Set form to open in a new tab
• Full control of appearance
Paragraph Insert a paragraph block of text in your form. • Full flexibility of appearance.
Image Add a custom image to your form. • Fluid: allows image to stretch to the full browser width
• Non-Fluid: constrains image based on specific dimensions
• Image properties: adjust shape, width, and height.
• ALT text: add data for accessibility
• Link settings: add a URL, email, or phone link
• Full control of appearance

Forms

Left toolbar Description Right toolbar options
Input Add fields for input data such as name, email, phone number, etc. • Add custom label, name, ID, and placeholder
• Input types: text, number, password, email, search, URL, or phone
• Full control of appearance
File Enables a user to upload a file such as a document, PDF, etc. • ID and name
• Button properties: adjust text and color
Text Area Include a field for long-form text. • Specify label, name, ID, placeholder, and helper text.
Checkbox Create pre-defined options with corresponding checkboxes. • Adjust label, name, and ID.
• Button properties: adjust text and color
Select Add a picker with a dropdown menu of options. • Add custom menu list text
• Select settings for helper text, placeholder, label, name, and ID.
Radio Button Create pre-defined options with corresponding radio buttons. • Adjust label, name, and ID.
Form Button Add a custom button to submit your form. • Link settings: add a URL, email, or phone link
• Button properties: adjust text, size, style, and color.

# Add the form to your page

There are two ways to add a form to your page. Point-and-click and with Shortcode.

  1. From the main navigation menu, select Filesystem.

Main navigation with Filesystem link highlighted

  1. Navigate to the STML file where you want to embed the form.

Website navigation with index.stml link highlighted

  1. With the stml opened, navigate to the form from the navigation menu.

Website navigation with Contact form link highlighted

  1. Select the dynamic div in the STML.

index.stml with dynamic div highlighted

  1. With the dynamic div active, click on the form to confirm the insertion.

index.stml with form highlighted

  1. Click Publish.

Publish button highlighted

  1. Navigate to Web Files > Content in your workspace. Either create a file in your desired location or use an existing file.

Create file modal

  1. On your file add the following shortcode:
[form id="1"]
  1. Click Publish.

Publish button