Formora provides robust options to control the layout and visual theme of your forms, ensuring they align with your brand identity and provide an optimal user experience. These settings are typically found within the “Appearance” or “Design” tab of the Form Settings panel in the Form Builder.

Form Appearance Settings Panel in Formora Builder

​
Form Layout Types (layout_type)

The layout_type property dictates how your form fields are presented to the user.

​
Theming & Visual Customization

Tailor the look of your form to match your brand.

​
Advanced Customization (for specific plans/users)

For users needing finer-grained control over appearance and functionality:

​
Custom Scripts

Fully customize your Formora forms with custom CSS & JS

Add custom CSS and JS to your forms to fully customize the look and feel.

​
Custom CSS Files

Add any number of CSS files to your Formora project repository, and the defined class names will be applied and available across your forms.

​
Adding style.css

For example, you can add the following style.css file to customize the styling of key form elements like buttons and field containers.

#navbar {
  background: "#fffff2";
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

​
Using Identifiers

Formora provides a set of common identifiers to help you target important elements of the form UI. Some, but not all, are listed below:

#form-container #submit-button #field-wrapper #progress-bar #error-message

Use browser inspect element to find references to elements you’re looking to customize.

References and the styling of common elements are subject to change as the Formora platform evolves. Please use custom styling with caution.

​
Custom JavaScript Files

Custom JS allows you to add executable code globally, equivalent to adding a <script> tag with JS code into every form instance.

​
Adding Custom JavaScript

Any .js file added to your Formora project directory will be included in every form instance. For example, you can add the following ga.js file to enable Google Analytics across your forms.

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');

Please use with caution to not introduce security vulnerabilities.

​
Live Preview is Your Friend

As you make changes to layout, theme, and custom script settings, make frequent use of the Form Preview tab or section within the Formora Builder. This allows you to see how your customizations will look to end-users in real-time, ensuring your form is both functional and visually appealing before publishing.

Thoughtful layout and theming can significantly enhance user engagement and form completion rates. After styling, the next step is often setting up Conditional Logic to create dynamic form experiences.