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

  

    
First Name:
    

  
  

    
Last Name:
    

  
  

    
  

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
to the end.

*Also note that the 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.