Customizing Popup/Embed form Styles using Custom CSS CSS
SendX
Updated on Dec 05, 2024
Welcome back! In this tutorial, we will learn how to use custom CSS in pop-ups and embedded forms.
Access the Custom CSS Section:
Scroll down to the custom CSS section in your form settings.
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.
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.
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!