This article is written for the CSS novice, like me. Copy and paste the following code into your Custom CSS in Web Form Builder for quick and easy effects.

(Disclaimer: use these if you like, but if they create unintended effects please remember that we do not provide support for any custom CSS themes you create in Web Form Builder. You will get the idea of what can be changed if you get an expert in to help. Of course, you can always revert to one of the built-in themes at any time.)

How it works: your new Custom theme only applies your changes to the Default theme (see the full CSS for the Default theme here), so if you want to change the font to 'Montserrat' for example just paste this in and the rest of the provided CSS themes will be unaffected. If you make a change to your Custom Theme, you will need to re-save each form it's applied to in order to see the changes.

Change the font

/*
Hidden comment:
This will change the fonts.
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body {
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}


Change the background colour

/*
Hidden comment:
This will change the colour of the page background.
*/

body {
background-color:#F7F3FD;
}

Change the field label colour

/*
Hidden comment:
This will change the colour of the field labels.
*/

.control-label {
color:#604A98;
}


Change the size of texts styled with H1, H2, H3, etc

/*
Hidden comment:
This will change the size of any text styled with H1, H2, H3, H4, H5 or H6.
*/

h2 {
font-size:72px
}

Change the width of number entry fields

/*
Hidden comment:
This will change the width of number entry fields.
*/

input[type=number] {
    width: 15%;
    min-width: 90px;
}


Hide the WFMID at the bottom of the form (change colour)

/*
Hidden comment:
This will change the colour of the Web Form identifier ie: "WFM6024.01.L" to make it less prominent. If you set this to the page background colour it disappears completely.
*/

p#wfm_id {
    color: #fff !important;
}


Change the button size (all button types)

/*
Hidden comment:
This will change the button size in booking forms in EVM, POD and AOD.
Choose the button type you wish to make bigger:
- Finish button = btn-success
- Edit button = btn-primary
- Cancel button = btn-danger
- Postcode Lookup button = btn-info
- Submit button = btn-default
 or you can change all these buttons by just using = btn
*/

.btn-success {
font-size:30px !important;
}


Change the form's break-points, so that an embedded form does not right-align.

/*
Hidden comment:
This will change the break points of the form so that embedded forms go from desktop to mobile, and skip tablet.
*/
@media (min-width: 768px) and (max-width: 992px){
.container {
width: 100% !important;
}
.col-md-4 {
width: 33.33333% !important;
}
.col-md-6 {
width: 50% !important;
}
}


Change the button colour and button text colour and size

/*
Hidden comment:
This will change the colour of the button background, the button text and the button size.
*/

.btn-default {
background-color:#049cdb;
border-color:#049cdb;
color:#fff;
font-size:20px
}

For professional results always ask a CSS expert for help. Most users build their custom theme so that their web forms all match the CSS of the web page it is being embedded in. An expert can do this quickly.

New to CSS? Start here: https://www.w3schools.com/css/css_intro.asp

Related

Learn more about:

Did this answer your question?