---
title: Customizing Form Styles with Custom CSS
description: Customize the appearance of your Forms to align them with your brand identity and create a seamless user experience. With this tool you can adjust the font size, color, padding, or any other CSS properties to achieve the desired appearance.
---

[Skip to content](https://help.joomag.com/knowledge/customizing-form-styles-with-custom-css#main-content)

English

Show submenu for translations

[![joomag logo blue-3.png\]](https://help.joomag.com/hs-fs/hubfs/joomag%20logo%20blue-3.png?height=29&name=joomag%20logo%20blue-3.png)](https://joomag.com)

- [Joomag Blog](https://help.joomag.com/blog)

Open main navigation

Close main navigation

- [Joomag Blog](https://help.joomag.com/blog)
- English
  
  Show submenu for translations
- [Contact us](mailto:support@joomag.com)

[Contact us](mailto:support@joomag.com)

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Help Center](https://help.joomag.com/knowledge?hsLang=en)
2. [Forms](https://help.joomag.com/knowledge/forms?hsLang=en)

# Customizing Form Styles with Custom CSS

## Customize the appearance of your Forms to align them with your brand identity and create a seamless user experience. With this tool you can adjust the font size, color, padding, or any other CSS properties to achieve the desired appearance.

**Important:** This is an add-on feature. If you would like to enable it for your account contact [Joomag's Customer Success team](mailto:success@joomag.com).

To apply custom CSS to your Custom Forms follow these steps:

1. Go to Forms section of your Account from the left sidebar:
   
   ![](https://downloads.intercomcdn.com/i/o/608394930/93063ccd4dea1519500219bb/f1fc458c-d2f3-4317-9c2d-9131c0c567b1)
   
   2\. [Create a new Form](https://help.joomag.com/knowledge/create-forms?hsLang=en), or click Edit on an existing one: 

   ![](https://joomag.intercom-attachments-7.com/i/o/400037718/0e7610d1bfc6c0ae124994de/1Co2AkJ8x0hYfVwTw6OKvxLYyXgRol8aw-e%3Ddownload)
   
   3\. Navigate to the Form settings page. This page allows you to modify various aspects of your Form, including its appearance. Locate **Advanced styling with custom CSS** section. This is where you can insert your custom CSS code to target and style the elements. ![](https://downloads.intercomcdn.com/i/o/751723092/ada0dc951296edde22b4287c/image.png)
   
   Here's the list of **customizable components**:
   
   | Fields | Selectors |
   | --- | --- |
   | **Parent container div of form** (top-level id selector) | #j-form-container |
   | **Form title** | .j-form-title |
   | **Field parent block** | .j-form-block |
   | **Field Label** | .j-form-field-label |
   | **Field Help text** | .j-input-help-text |
   | **Field (input, checkbox, select)** | .j-custom-form-input |
   | **Field checkbox text** | .j-form-field-checkbox-text |
   | **(GDPR) note** | .j-gdpr-note |
   | **Form submit button** | .j-custom-form-submit-button |
   | **Error message** | .j-error-message |
   
   4\. Make the necessary styling updates and click Preview to see the results.
   
   ![](https://downloads.intercomcdn.com/i/o/750363695/d3d8d307bb6b98de9a1add1d/image.png)
   
   5\. **Save** the Form to keep the changes.
   
   ---
   
    
   
   **Example: Customizing Form title font style, background color of the Form and the Labels inside**
   
   1\. Let's first import the font we want to use for the Form title, and specify font size, color and alignment:
   
   ```
   @import url('https://fonts.googleapis.com/css2?family=Tsukimi+Rounded:wght@600&display=swap');#j-form-container .j-form-title {    color: #ff5555;    font-size: 26px;    text-align: center;    font-family: 'Tsukimi Rounded', sans-serif;}
   ```
   
   2\. Then we can use the styling below to set the background color of the Form itself: 
   
   ```
   #j-form-container {    background-color: #302f2f;}
   ```
   
   3\. With this step we'll specify the styling for **Labels** and **Input fields** you have in your form:
   
   ```
   #j-form-container .j-form-field-label {    color: white;}#j-form-container .j-custom-form-input {   background-color: #504e4e;    color: white;}
   ```
   
   4\. And finally we can improve the style and the position of **Submit button**:
   
   ```
   #j-form-container .j-custom-form-submit-button {    width: 200px;    margin-left: 110px;}
   ```
   
   5\. Click preview to see the final results:![](https://downloads.intercomcdn.com/i/o/750375947/aef16c2dcc32dcf9cbeebbd0/image.png)6. Click **Save** to keep the changes.

- [Email Marketing](https://help.joomag.com/knowledge/email-marketing?hsLang=en#main-content)

    - [Email Templates Basics](https://help.joomag.com/knowledge/email-marketing?hsLang=en#email-templates-basics)
    - [Standard Email Template Editor](https://help.joomag.com/knowledge/email-marketing?hsLang=en#standard-email-template-editor)
    - [Campaign Basics](https://help.joomag.com/knowledge/email-marketing?hsLang=en#campaign-basics)
- [Publications](https://help.joomag.com/knowledge/publications?hsLang=en)
- [Distribute](https://help.joomag.com/knowledge/distribute?hsLang=en#main-content)

    - [Private Sharing](https://help.joomag.com/knowledge/distribute?hsLang=en#private-sharing)
    - [Embed a Collection](https://help.joomag.com/knowledge/distribute?hsLang=en#embed-a-collection)
    - [URL Customization](https://help.joomag.com/knowledge/distribute?hsLang=en#url-customization)
    - [Embed a Specific Publication](https://help.joomag.com/knowledge/distribute?hsLang=en#embed-a-specific-publication)
    - [AI Tools](https://help.joomag.com/knowledge/distribute?hsLang=en#ai-tools)
- [Collections](https://help.joomag.com/knowledge/collections?hsLang=en)
- [For the Readers](https://help.joomag.com/knowledge/for-the-readers?hsLang=en#main-content)

    - [Managing Reader Account Data](https://help.joomag.com/knowledge/for-the-readers?hsLang=en#managing-reader-account-data)
    - [Publication Viewer](https://help.joomag.com/knowledge/for-the-readers?hsLang=en#publication-viewer)
    - [Mobile HTML5 Viewer](https://help.joomag.com/knowledge/for-the-readers?hsLang=en#mobile-html5-viewer)
- [For Branded Mobile Applications Development](https://help.joomag.com/knowledge/for-branded-mobile-applications-development?hsLang=en#main-content)

    - [Android Branded Application](https://help.joomag.com/knowledge/for-branded-mobile-applications-development?hsLang=en#android-branded-application)
    - [iOS Branded Application](https://help.joomag.com/knowledge/for-branded-mobile-applications-development?hsLang=en#ios-branded-application)
- [Viewer Customization](https://help.joomag.com/knowledge/viewer-customization?hsLang=en)
- [Measure](https://help.joomag.com/knowledge/measure?hsLang=en#main-content)

    - [Analytics](https://help.joomag.com/knowledge/measure?hsLang=en#analytics)
- [The Creative Studio](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#main-content)

    - [Images](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#images)
    - [Links](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#links)
    - [Crater Editor Basics](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#crater-editor-basics)
    - [Texts](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#texts)
    - [Lines and Shapes](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#lines-and-shapes)
    - [Slideshows](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#slideshows)
    - [Popups](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#popups)
    - [Library](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#library)
    - [Videos](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#videos)
- [Forms](https://help.joomag.com/knowledge/forms?hsLang=en)
- [Create](https://help.joomag.com/knowledge/create?hsLang=en)
- [Engage](https://help.joomag.com/knowledge/engage?hsLang=en)
- [FAQ](https://help.joomag.com/knowledge/faq?hsLang=en)
- [CRM](https://help.joomag.com/knowledge/crm?hsLang=en#main-content)

    - [Filters](https://help.joomag.com/knowledge/crm?hsLang=en#filters)
    - [Contacts](https://help.joomag.com/knowledge/crm?hsLang=en#contacts)
    - [Lists](https://help.joomag.com/knowledge/crm?hsLang=en#lists)
- [Managing Account Data](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#main-content)

    - [Users](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#users)
    - [Payments](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#payments)
    - [Billing](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#billing)
    - [Account Settings](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#account-settings)
    - [Integrations](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#integrations)
    - [User Settings](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#user-settings)
- [Troubleshooting](https://help.joomag.com/knowledge/troubleshooting?hsLang=en)
- [Edu accounts](https://help.joomag.com/knowledge/edu-accounts?hsLang=en)
- [Integrations](https://help.joomag.com/knowledge/integrations?hsLang=en#main-content)

    - [SSO](https://help.joomag.com/knowledge/integrations?hsLang=en#sso)

Copyright © 2026, Joomag, Inc.