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

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

human resources web form benefits
How Human Resources Departments Can Benefit From Online Forms- Part 2
June 16, 2016
web form examples
Amazing Examples of Web Forms Created by 123ContactForm Users- Part 2
June 27, 2016

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 forms 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 form elements, 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 take your web forms 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 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@123contactform.com.

Claudia Nesiu
Claudia Nesiu
is a Social Media Community Manager at 123ContactForm. 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 *