How to Apply Custom CSS in Formester

You can fully customize your form design in Formester using the Custom CSS option. It lets you control fonts, colors, spacing, and animations with precision. Follow the detailed steps below to apply your own styles and create a professional form design.

Step 1: Open the AI Form Builder

Start by creating a new form using Formester’s AI form builder. Once your form is ready, open it in the builder view. The editor gives you a visual layout of all form elements, making it easy to style specific parts.

Step 2: Navigate to the Design Tab

At the top of the builder, click on the Design tab. This tab contains all styling features. Here, you can modify themes, adjust layouts, and access the Custom CSS editor to write your own styles.

Step 3: Access the Custom CSS Section

Scroll down within the Design tab until you see the Custom CSS section. Click on it to expand the options. You will find a CSS Selector Mode icon that allows you to choose which parts of the form you want to edit. Turn on this mode to begin selecting elements visually.

Step 4: Select What You Want to Style

Hover your mouse over different parts of the form. You will see visual outlines showing which elements can be styled.

• If you hover over the full form container, you can edit the CSS for the entire form layout. This helps when you want to set background colors, margins, or overall spacing.
• If you hover over individual elements such as a button, title, or input field, you will see two choices:
• Add Class Selector: applies the same style to all elements of that type in your form.
• Add Individual Selector: applies the style only to that specific element.

Choose the selector that best fits your goal.

Step 5: Edit with the Script Editor

Once you select an element, open the Script Editor that appears in the same section. You can now write or paste your CSS rules. Use it to adjust font sizes, change colors, add borders, or create animations and hover effects.

You can also reuse CSS snippets you have written before or create new ones directly inside the editor.

Step 6: Preview and Adjust

After adding your styles, click on the Preview option at the top right of the builder. This allows you to see how your form appears on desktop, tablet, and mobile views. Make sure all elements are aligned and responsive. Adjust your CSS if something looks off.

Step 7: Save and Publish

When you are satisfied with the final design, click Save. Then, publish your form so that the new styling goes live. Your custom CSS will be automatically applied to both the hosted and embedded versions of your form.

Using these steps, you can easily create beautiful, responsive, and branded forms in Formester without relying on external tools. The Custom CSS feature gives you full control to design your forms exactly the way you want.

Updated on: 29/10/2025