A popular request has been a way to align fields horizontally e.g:
First name _____________ Last name _____________
Here is a guide to achieving this, using a couple of HTML snippets and the versatility of CSS.
------------------------------------------
1) Add HTML snippets
Log into sc_admin and navigate to the contact form builder page.
Create a HTML snippet and position it before the first of the fields you want to align, with the following code:
<fieldset>
Next, create another snippet and position it after the last of the fields you want to align, with the following code:
</fieldset>
Repeat this step for any other groups of fields you want to align.
2) CSS changes
Open screen.css
Find the code for styling a form. It should look like this:
form {
margin: 0;
width: 300px;
}
Delete the width line.
Find the code for styling a fieldset. It should look like this:
fieldset {
border: none;
border-bottom: 2px solid lightgrey;
padding: 8px;
}
Replace the block with the following:
fieldset {
border: none;
clear: left;
margin: 0;
padding: 0;
}
fieldset div.lbl, fieldset div.obj {
float: left;
display: block;
}
fieldset div.lbl {
width: 100px;
}
fieldset div.obj {
width: 180px;
}
fieldset div.obj input, textarea {
width: 160px;
}
The dimensions I have specified are simply for example. I recommend experimenting with the CSS until you have achieved the layout you want.