Skip to main content
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.
Screenshot of the Form Appearance settings panel showing theme selection, color pickers, and font choices.

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.
This is the traditional form layout where all fields are displayed on a single, scrollable page.
  • Best For: Shorter forms, simple questionnaires, or when you want users to see all questions at once.
  • Identifier: Usually single_page or the default if no other layout is chosen.
This layout breaks your form into multiple steps or pages. In Formora, this can be implemented as multi_page (where each field can act as a step) or by using “Page Break” layout elements to define separations.
  • Best For: Long or complex forms, surveys, applications, or any process that benefits from being broken down into smaller, manageable chunks.
  • Features:
    • Automatic “Next” and “Previous” navigation buttons.
    • Progress bar or step indicator to show users their completion status.
  • Benefits: Reduces cognitive load, can improve completion rates for longer forms, and allows for conditional progression through steps. See Layout Elements for more on Page Breaks.
Illustration of a multi-page form showing distinct steps, navigation, and a progress bar.

Example of a multi-page form with progress bar and navigation

​
Theming & Visual Customization

Tailor the look of your form to match your brand.
Formora offers predefined themes to quickly change the overall look and feel.
  • Options: Typically includes “Light” (default) and “Dark” themes. There might be other stylistic themes available.
  • Selection: Choose from a dropdown or visual swatches in the Appearance settings.
The primary_color is the main accent color used for elements like buttons, active field borders, selected options, and progress bars.
  • Configuration: Select a color using a visual color picker or by inputting a HEX, RGB, or HSL code.
  • Impact: Significantly influences the form’s brand alignment.
Choose the typography for all text elements within your form, including labels, help text, input values, and button text.
  • Options: Formora usually provides a curated list of web-safe fonts and popular Google Fonts.
  • Selection: Choose from a dropdown menu.
Depending on your Formora subscription plan, you may have the option to control the visibility of “Powered by Formora” or similar branding on your forms.
  • Configuration: A toggle switch (show_branding: true/false).

​
Advanced Customization (for specific plans/users)

For users needing finer-grained control over appearance and functionality:
If your plan allows, you can add your own CSS rules to further customize the form’s appearance beyond the theme options. This is a powerful feature for developers or users with CSS knowledge.
  • Configuration: A text area where you can write or paste CSS code.
  • Best Practices:
    • Use browser developer tools to inspect Formora’s default element classes and IDs to target your styles accurately.
    • Test thoroughly to ensure your custom CSS doesn’t unintentionally break the form layout or responsiveness.
    • Keep custom CSS organized and commented.
Custom CSS is applied globally to the form. Overly broad selectors can have unintended consequences. Be specific.
Screenshot of the Custom CSS input area in Formora's settings.

Custom CSS input area in Form Settings

Certain plans might allow the injection of custom JavaScript snippets. This can be used for various purposes, but should be handled with extreme care.
  • Configuration: A text area for JS code.
  • Potential Use Cases:
    • Integrating third-party analytics or tracking pixels (e.g., Google Tag Manager, Facebook Pixel, Mixpanel) beyond built-in integrations.
    • Minor dynamic UI modifications (use very cautiously).
  • Security & Stability:
    • Poorly written or malicious JavaScript can break your form or compromise user data.
    • Formora might sanitize or restrict certain JS functionalities for security.
    • Always test thoroughly and understand the implications of any script you add.
Only use Custom JavaScript if you are confident in your coding abilities and understand the security risks. Formora support may not be able to troubleshoot issues caused by custom scripts.

​
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.
⌘I