How to Use Custom CSS in Pop-Ups and Embedded Forms

Welcome back! In this tutorial, we will learn how to use custom CSS in pop-ups and embedded forms.

Steps to Use Custom CSS

1. Access the Custom CSS Section:

   Scroll down to the custom CSS section in your form settings.

2. Identify the Classes:

   To change the styles, identify the classes used in your pop-up form. Use the inspect element tab to find the specific div you want to modify.

3. Modify the Gap Between Title and Description:
   • Locate the description section in the inspect element.
   • Identify the margin settings and remove the top margin.
   • Find the SendXModelBodyUnique class and the p tag within it.
   • Change the margin top to 0 pixels and add the !important tag.
4. Adjust the Gap Between Text Input and Button:
   • Identify the class used for the text input and button.
   • Locate the button's margin settings and remove the top margin.
   • Find the SendXFormedUnique class and adjust the margin settings as needed.
   • Ensure to use the !important tag.

And that's it! You have successfully added custom CSS and reduced the gap between the title and description, as well as the gap between the text area and button.

Thank you for watching this tutorial. If you have any further queries, feel free to reach out to our support team. Happy creating!