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

123FormBuilder

by 123FormBuilder

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(“https://s31.postimg.org/ck8wnblrv/papyrus_160495_640.png”);

background-color: transparent;}

Important! You will have to replace the image link from this example (“https://s31.postimg.org/ck8wnblrv/papyrus_160495_640.png”) with your own image link. You can use a site like this https://postimage.org/ 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:

.form-container{

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 support@123formbuilder.com.

Leave a comment

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

You love forms as much as we do?

Then share your form story with us! We will read all the submitted cases and reach out the selected ones for further details. The chosen ones will have a case study created and will be featured in our blog, newsletter and social media channels.