<iframe src="//www.googletagmanager.com/ns.html?id=GTM-6PVX" height="0" width="0" style="display:none;visibility:hidden"></iframe> Customize Your Web Form Design | Custom CSS Tips and Tricks- Part 1

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

Join Us At How to Get the Most Out of Your Traffic Using Performance Marketing Techniques Webinar!
April 28, 2015
newsletter sign-up
Get That Newsletter Sign-Up Rate In The 7th Heaven With These Small Tweaks
May 5, 2015

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

123contactform Customize Web Form Featured

Customize Web Form DesignFancy yourself a little bit of a CSS magician? Well, you’ve come to the right place to learn the basics of changing your web form design and give it that extra panache. We are very proud of our collection of templates, but their purpose is to offer guidance. Once you’ve selected the form that best fits your needs, modifications can be made in minutes.

So let’s take a trip to the land of full CSS form customization and see what elements you can change to give your web form design more flair.

First off, in order to use custom CSS you need to know the basic elements of your form. Every type of field has an unique ID or is part of a class – as shown in this form X-ray. Now that you what they are, simply access your form’s Setting -> Themes and click the Use Custom CSS link. From that point on, you can become a digital artist and:

1. Have Round Borders In the Text Area

In order to have round borders in for your text area you need to input the following code into the custom CSS box:

#id123-control12296725 { border: 1px solid #A9A9A9 ; border-radius: 5px ; -moz-border-radius: 5px ; -webkit-border-radius: 5px ; }

Important! You will have to replace the ID from this example with the ID of your form’s field. To do this, access your form’s source code search for it.

If you use the exact code written above, this is what your field will look like. You can replace #A9A9A9 with another colour code or simply write red, blue, green or whatever color you’d like.

Round Borders Text area

2. Display The Background Image in Fullscreen

Setting a background picture for your form can be done from the Themes section. The standard display for the picture is tile, but no need to panic, you can change it into full screen. Simply input the following code into the custom CSS box:

body {
background-size: 100%

If this doesn’t work, add another line of code and that should do the trick:

body {
background-size: 100% !important;

3. Add a Google Font to Your Form

Our forms have a limited number of fonts available, but with custom CSS you can now expand that list and add Google fonts to your web form design. Just add the following code:

@import url(http://fonts.googleapis.com/css?family=Lobster);
.class123-label, input, #id123-button-send, body {font-family: ‘Lobster’, cursive;}

Important! When changing the code of the font, you need to also change the font familiy. All this information can be found on Google Fonts.

It’s understandable to feel a little lost when seeing this much information (I felt like I was learning a new language), but with a little practice and patience, you’ll master it soon enough! This concludes our basic training for customizing your web form design with custom CSS. In the upcoming blog posts, we’ll cover more advanced tricks, so be on the lookout!

Alex Balan
Alex Balan
is a Marketing Specialist at 123ContactForm. He is in charge of market research, general copywriting and anything in between. He likes spending his time watching TV series, reading and playing the ukulele.

Leave a Reply

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