Skip to main content
All CollectionsEmbedFormsGetting started
How to customize your form using Custom CSS
How to customize your form using Custom CSS

Steps on how to customize a form with Custom CSS in EmbedForms.

Laze Trajkov avatar
Written by Laze Trajkov
Updated over a week ago

In the EmbedForms product, you have a variety of settings, customization options, and custom field questions.

However, If you want to apply any extra customizations, with Custom CSS for example applying a change to the font color and background color:

.es-label {background-color: #ADD8E6;color: blue;}​


Follow the steps below.

1. Open your form, and in the Create section select General Settings on the left. Scroll down and you'll see the Custom CSS white box where you can insert the codes:

Pasting your CSS and clicking save

2. Once you insert the codes, make sure you click on Apply, and at the end click on Save at the right top corner to save the changes.

That's it!

If you need to change the font size and alignment of the questions' text, add the following inside the brackets {} for example right after the; of the color:

font-size: 16px;text-align: left;

For changing the Submit button text color, background color of text, font size and alignment, please use .es-submit-btn

An example:

.es-submit-btn
{background-color: #000;color: yellow;font-size: 16px;text-align: left;}

If you need to change the background color that appears after a form on your webpage, you can do so with this code:

.es-body {
background-color: #000000;
}

You can change the color code to the desired one.

Important note:

The changes made with CSS are currently visible in the Preview of the form. The Preview button is placed on the top right corner, next to the Save button.

Clicking on preview

If you need any further help with Custom CSS feel free to chat with us via Intercom or send us an email at: support@embedsocial.com


Did this answer your question?