# Forms, Popups & Landing Pages > **Source**: [SendX](https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA) > >

Create embedded forms, popups, and landing pages to grow your email list. Learn how to customize them, integrate with WordPress, and connect form submissions to your SendX lists.

## Browse Collection 1. [Creating Embedded Forms in SendX and Integrating Them into Your Website](https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/FG03O1Kmqgx0Epo1OAo3Ew.md) (Video) 2. [Creating a Custom Pop-Up Form in SendX and Embedding it on a Website.](https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/uP472WzIIC77LCFZlzkY9g.md) (Video) 3. [Embedding Forms in WordPress](https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/eIFRDClrdOdfvGC0A60P8Q.md) (Video) 4. [Embedding Forms in Shopify Store](https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/HZx7Eo59snmUtQHNJJbHDw.md) (Video) 5. [Creating a Landing Page in SendX: Step-by-Step Guide](https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/HLlgEcHd8a00juR1kzlY7g.md) (Video) 6. [Integrating SendX Popup in WordPress](https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/kO5DgvF7tEv7DBTYA8qUXA.md) (Video) 7. [Integrating a Popup in Your Shopify Store in SendX](https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/ASI5kSWkByQT6hRx3kiBBA.md) (Video) 8. [Customizing Popup/Embed form Styles using Custom CSS](https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og.md) (Video) 9. [Creating a Lead Generation Form Using SendX Landing Page Builder](https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/5MWPz64iIwOdumXuvEA5EQ.md) (Video) --- # VIDEO: Customizing Popup/Embed form Styles using Custom CSS ## METADATA - id: MpW2yWeGc27GTOkxYs31og - type: video - source: SendX - content_url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og - collection_url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA ## TRANSCRIPT - time: 00:00 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=0 text: In this video, let's see how to use custom CSS in popups and embedded forms. - time: 00:05 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=5 text: Welcome back. In this tutorial, we will learn how to use custom CSS in popups and embedded forms. - time: 00:14 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=14 text: So to use custom CSS, scroll down and go to the custom CSS section. - time: 00:21 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=21 text: Then to change the styles you need to figure out what are the classes that we have used in our pop up form. - time: 00:29 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=29 text: So to do that, you have to go to the inspect element tab and you need to figure out which div you want to change. - time: 00:37 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=37 text: So for this, I will be decreasing the gap between title and description. - time: 00:46 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=46 text: So here you can see that I have found where the description is written. - time: 00:52 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=52 text: So you can see there it has margin, so I will remove its top margin. - time: 00:57 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=57 text: So it's inside SendX-Model-Body-Eid-Unique class, so first I will copy this class and inside this there is the p - time: 01:03 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=63 text: tag. - time: 01:07 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=67 text: Here, I will change margin top to zero pixels. Don't forget to add the important tag. - time: 01:17 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=77 text: Next, I want to decrease the gap between text input and the button. - time: 01:22 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=82 text: So I will see which class is used in that. - time: 01:37 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=97 text: Now you can see that the button have margin, so I will remove the top margin. - time: 01:48 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=108 text: So it is inside the SendX-Form-Eid-Unique, or you can also find it from the bottom panel. - time: 01:56 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=116 text: Click on this. You get the class that we have to use, and then you can just simply copy paste, and then I will just change the - time: 02:01 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=121 text: margin. - time: 02:10 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=130 text: Don't forget to use the important tag. - time: 02:13 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=133 text: And that's it. - time: 02:15 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=135 text: You have successfully added custom CSS and reduced the gap between title and description and the gap between text area - time: 02:21 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=141 text: and button. - time: 02:23 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=143 text: Thank you for watching this tutorial. - time: 02:25 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=145 text: If you have any further queries, feel free to reach to our support team. - time: 02:31 url: https://video.sendx.io/MoupX4vX6fGqJPz6cg6aUA/MpW2yWeGc27GTOkxYs31og?start_time=151 text: Happy creating. ## SUMMARY # 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!