19 CSS Tricks For Web Forms That You Should Know About

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 URL with the one of the image you need
  • To apply it to a certain image field only, use this code instead:
    #row1:hover {content: url('https://website.com/image.png');}
    Note: Replace #row1 with the ID of the row on which the image is placed on the form.
  • Keep the size of the new image the same as the old one by controlling its width, like this:
    .img-align-center:hover {content: url('https://website.com/image.png');width: 200px !important;}
    #row1:hover {content: url('https://website.com/image.png');width: 200px !important;}

2. Styling the Signature field

To change the canvas color:

.digital-signature {background-color: #F1F1F1!important;}

  • 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 URL with any image URL

To change the color of the clear button:

.clear-btn {color: white !important;}
.clear-btn {color #fff !important;}

  • 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;}

  • Replace the URL with any font URL you need from the Google fonts library
  • .class123-label applies to form labels
  • input applies to all input fields
  • #id123-button-send is the submit button
  • body represents other text elements on the form (e.g. within the HTML block).

4. Displaying the form’s background image in fullscreen

This works only if your form is opened in a separate tab by link, not when it’s embedded. When you upload a background image for your web form in Themes, depending on its size, it might appear multiple times in the background of the form. Use this code to show it in fullscreen on any screen resolution:
body {background-size: 100%;}

5. Applying a certain font-family to field inputs

input, textarea {font-family: Impact, Charcoal, sans-serif !important;}

  • 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 font family with the one you need

13. Styling the upload buttons

Use this class: .fileinput-button

Here’s an example:
.fileinput-button {content: url('//mydomain.com/upload.png');
border-bottom: 0px; border-right: 0px; border-left: 0px; border-top: 0px;}

  • 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.


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.