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. In case you would like to enable it for your account contact Joomag's Customer Success team.

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

Go to Forms section of your Account from the left sidebar:
Create a new Form, or click Edit on an existing one:
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.

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`
Thank you message	`.j-thank-you-message-container`

4. Make the necessary styling updates and click Preview to see the results.

5. Save the Form to keep the changes.

Example: Customizing Form title font style, background color of the Form and the Labels inside

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:

6. Click Save to keep the changes.