19 CSS Tricks For Web Forms That You Should Know About

css tricks for web forms

Online forms are super awesome in many things over the Web, from collecting simple messages online to automating complex processes. Creating a web form Today takes less time and effort than it did more than twenty years ago. If the body of a web form is built with HTML, its beauty comes within the use of stylesheets.

Imagine your web form as the representative of your company, because in some way it is. If you’re running a web design company, but show a sloppy contact form on your website with no styling elements, people might get the wrong impression about your business.

On 123FormBuilder you have many styling options to choose from for your web form in the SettingsThemes section. Moreover, you can use the custom CSS panel to add your own stylesheets, either by typing them in or uploading them from your server via URL.

Here are 19 awesome CSS tricks for your web form that will make your heart melt:

1. Replacing images on hover

Copy this code:
.img-align-center:hover {content: url('https://website.com/image.png');}

  • Replace the color code with the one of the color you want or simply type in the name of the color (if applicable).

To replace the background of the signature canvas:

.digital-signature {background: url('https://website.com/canvas.png’);}

  • Replace the code or color name with the color you need


3. Adding Google fonts that are not located in Themes

We had some users that needed certain font families from the Google library on their web forms. Here’s the code that got them what they needed:

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

  • Use textarea only if you use long text fields on your form
  • Replace the font-family with the one you want to use


6. Resizing the Terms of Service field

There are some predefined option for this field to edit the width and height of the popup window. But if you want to customize the size of the popup to a certain x-amount of pixels, use this code:
#frameless {width:800px !important; height:600px !important;}

7. Adding a print button to the Payment Summary

This following code works only if you add the print button to your form from SettingsAdvanced. It will hide the print button on the form and display it on the payment summary page. If you’re using an order form, copy this code in your custom CSS panel:

@media print
visibility: hidden ;
visibility: visible;

8. Adding hyperlinks to choice options

First, you’ll need to add choices in HTML hyperlink tags. E.g. <a href=”http://www.yoursite.com/something”>Item#1</a>

Next, use this code:
.link {
background-color: #C0C0C0; /*this will make the background light grey */
color: red; /*this makes the text red*/
text-decoration:underline; /*this will underline the text*/

9. Removing the Submit button

Just copy this code:
#id123-button-send {visibility:hidden;}

10. Adding an image to the Thank You page with CSS

#id123-thankyou {
width: 640px;
height: 300px;
display: block;
background: url(http://goo.gl/3bs2fu) no-repeat;
background-position-y: 5px;
background-position-x: 170px;
text-indent: -99999px;

11. Removing the Calculate button

If you want to remove the Calculate button (when using payments):
#id123-button-calc {display: none;}

12. Changing the font on the Thank You page

#id123-thankyou {font-family:'Impact, Charcoal, sans-serif';}

  • Replace the URL with any image URL to replace the button with an image. It will still function.

14. Adding opacity to the form frame background

.tdmain {
opacity: 0.9;
filter: alpha(opacity=90);

  • Replace the values with the level of opacity you want
  • Works only if a custom background has been selected

 15. Styling the web form Captcha

{ background: #FF6600; border-left:3px solid #FF00FF; }

16. Coloring checkboxes and radio buttons

Applicable for single choice and multiple choice fields.

Copy this code:

.inside {background-color: red !important;}
.outside {background-color: green !important;}

  • .inside – this will style the interior when checked
  • .outside – this will style the background of the checkbox or radio

17. Adding a shadow-effect to the Submit button

Copy this code:

#id123-button-send:hover {box-shadow: 5px 5px 2.5px #888888;}}

18. Reduce vertical space between fields

Copy this code:

.fieldcontainer {margin-top: -6px !important; margin-bottom: -6px !important;}

19. Applying the image background to the form frame

Copy this code:

.tdmain {background-image: url("https://www.domain.com/image.png");
background-size: 100%;}

This concludes our list of 19 CSS tricks for web forms. If you have more to add to our list that other users may learn from, feel free to comment below.


Olivian Stoica
Olivian Stoica
is the Online Communications Manager at 123FormBuilder, novelist, poet, data-driven enthusiast, idealist and SEO lover.

Leave a Reply

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