Customizing Form Styles with Custom CSS

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

1. Go to Forms section of your Account from the left sidebar:

   

   2. Create a new Form, or click Edit on an existing one: 

   

   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.

   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.

   

   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:6. Click Save to keep the changes.