Advanced CSS Design

Changing the design of the form

This information is for those who want to be able to make changes to the design and layout of their form. It involves using CSS to make the changes. If you need to learn more about CSS, there is a lot of info on the web. Here is one place to start : W3schools or for something more fancy CSS Tricks.

Where to place the CSS

There are 2 places you can add CSS. Directly on each field which applies to just that field, or at the form level so it applies to the whole form.

Applying at the field level

When you click a field you wish to edit - a link will appear below the Save Form button - 'Show Design'. Click 'Show Design' and there will be 2 new boxes that appear in the field. CSS Class and CSS.

CSS Class: Add a single word into CSS and this will add the class name onto the form. Note that you will need to describe this class at the form level.

CSS: Allows you to add the text for this field. It does not need any selectors because it is added directly to the DIV element surrounding the label and edit box. e.g. font-size:2em

See below for an example of how to change the width of your fields.

Applying at the form level

This content is placed between <style> tags at the head of the form and as such will need to use the selectors to identify which elements you wish to change. Each element has a class so that you can style it - and is surrounded by an element ID if you need to get specific. e.g. .cellM {font-size:2em}

Example changes

To change the width of your field

  1. Click on the field you want to change in the build form e.g. gender
  2. Click Show design.

  3. You now see 2 more fields available in 'gender' - enter the word narrow in the first box.
  4. Repeat this for any others you want to have the same width
  5. Click on Form settings
  6. In the CSS box enter the following
    .narrow select, .narrow input {width : 100px !important} so it looks like this.
  7. This will change all the drop down fields (as gender is) and any input fields e.g. a simple text box - or a tick box! - to be 100px wide.

To make the "short text" field the same width as the multiline text

Add at the form level CSS to make the width 90% of the page (so it is responsive)

#content .cellM { width:90% !important}

Change the colour of the background (behind the white form area)

body {background-color:red}

Change the colour of the form background (normally white)

#content {background-color:#d7d7d7}

Change the font used for the labels

.label {font-family:serif}

Change the layout so the entry boxes appear beneath the labels, not beside

You will need the following 3 lines

.data {float:none}
.label {width:90%}
.icoHelp {float:none}

Change the text beside a radio button go full width

.radiotext { width: calc(100% - 30px) !important }

Change the color of the submit or reset buttons

For the submit button there is an image that you need to remove first, then set the colour you want. Note that you have the 'hover' (i.e. when the mouse moves over it) too.

.submitbutton {

background-image: none; background-color: red;

}

.submitbutton:hover {

background-image: none; background-color: blue;

}

The reset button is the same - just change the submitbutton to buttonSecondary

Change the colors of the help tip box

.entryhelp {background-color: #000; color:#fff; border-color:red}



By inspecting the HTML you can see the classes and structure of the page such that you should be able to easily identify the info you need to be able to style it.