Customize Your Web Form Design | Custom CSS Tips and Tricks- Part 2

customize web form tricks

In the first part of this series, we showed different ways you can tweak form elements and jazz up your web form design with custom CSS. Now we’re back with even more practical CSS tips and tricks! As explained in the first part, in order to use CSS code to customize your web form design, you need to go to SettingsThemes and next to the New Blank Theme, you’ll find the subsection Use custom CSS.

Now let’s get right into it and see how you can adjust your web form design from boring to brilliant by:

1. Adding a background image to your form

From the Themes section you can easily set a page background or change the form background color but adding a background picture to your form can also be done by simply adding the following code into the custom CSS box: .tdmain {

background: url(“”);

background-color: transparent;}

Important! You will have to replace the image link from this example (“”) with your own image link. You can use a site like this to get permanent links for your images. However, if you use the exact code written above, your form will look like this:

Contact us Custom CSS


2. Making the Form Frame Transparent

As highlighted above, you can choose any background color you wish for your web form. But what if you wanted the form frame to be transparent? Well, this can easily be done by adding the following code:


opacity:0.8 !important;


Important! Based on how transparent you want your form frame to be, you can go ahead and modify the opacity. In our example, the opacity is set to 0.8.

Contact us Transparent frame


3. Adding a text shadow effect to the headline

In order to add a text shadow effect to your form’s headline, just input the following code into the custom CSS box: h1 {

   color: white;

   text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;


Important! You can replace the colors we chose as an example with whatever colors you want for the shadow effect. 

Text shadow Custom CSS

Feel free to give these easy web form design tricks a try and don’t forget to share the results with us! If you need help, don’t hesitate to contact our Support Team at

Claudia Borceanu
Claudia Borceanu
is a Social Media Community Manager at 123FormBuilder. She manages our social media presence and contributes to the overall communication strategy. Claudia loves nature, music, reading, traveling and learning new things.

Leave a Reply

Your email address will not be published. Required fields are marked *