Customising Insightly HTML contact form (aligned, spaced fields)

Question

My apologies in advance, I have VERY modest coding experience and am trying to get to grips with HTML...

While applying some basic code for a contact form from insig

Answer 1

The key to attractive layouts is DIVs and CSS.

First, use DIVs to group the various input areas, and to divide each area into left/right (via float).

For example, you might want the label and the input fields to be nicely aligned:

.frmGroup{overflow:hidden;}
.frmLeft {float:left;width:120px;}
.frmRight{float:left;width:300px;}
#thisone{margin-top:50px;}

<form>
  <div class="frmGroup">
    <div class="frmLeft"><label for="fn">First Name:</label></div>
    <div class="frmRight"><input id="fn" type="text" /></div>
  </div>
  <div class="frmGroup">
    <div class="frmLeft">Last Name:</div>
    <div class="frmRight"><input type="text" /></div>
  </div>
  <div id="thisone">
    <textarea cols="50" rows="5"></textarea>
  </div>
</form>

The float instruction is particularly useful, as it allows you to align the DIVs side-by-side. However! It also removes the DIVs from the HTML "flow", meaning that they take zero vertical space. To counter that, add overflow:____ to the parent DIV. In example, I used overflow:hidden]. In the jsFiddle at bottom, experiment by deleting/adding that line.

You can also give an ID to a specific DIV and style it to have either margin or padding above/below/left/right.

DIVs have the added advantage of being block elements, which has the same effect as adding a <br> to the end.

*Also note that the <label> tag is really only useful for buttons, checkboxes, etc. because they allow the user to click the button/checkbox by also clicking on the text label.

Here is a jsFiddle of the above demo that you can experiment with.