How to recreate the Quick Tools fields, Full Name & Address, as individual fields

Hi.

On my form, I need to be able to re-create the two Quick Tools fields, Full Name and Address as separate fields (rather than as two compound fields with sub-fields), E.g. I want separate fields for First Name and Last Name, and separate field for Address Line 1, Address Line 2 etc.

On my form, I would like to the layout of these fields exactly as they would appear if I were to use the Quick Tools fields, e.g. most labels hidden, sub labels under each field, fields positioned close together vertically and horizontally.

I have spent hours trying to do this with injected CSS, but:

1. I can't get the first name and last name fields close enough together.

2. I can't get the address fields to look right at all. Every time I make a small change to the CSS, the formatting (e.g. hiding the field labels) seems to get completely corrupted.

Can you help me get the CSS right please? Thank you!

(To display the address fields you need to choose "One year in advance by invoice" for Payment Method)

Hello daveoreardon,

Unfortunately it is not possible to create your own fields but you can inject custom css code in your JotForm to change the appearance of your form fields.

Please take a look at the following cloned form where I have updated the injected custom to hide all the field labels and also position the first & last name field:  http://form.jotformpro.com/form/42633757504962? 

Do get back to us if you want us to re-position the "Postal / Zip Code" and "Country" code and I will do the needful.

Thank you!

Ok, don't worry. I perserved with editing the injected CSS you wrote for me and was able to position the fields where I wanted them.

The CSS I ended up with was:

div#cid_30 { margin-left: -175px; }

div#cid_36, div#cid_38 {margin-left: -173px;}

div#cid_34, div#cid_35, div#cid_36, div#cid_37, div#cid_38 { margin-top: -10px; }

#label_30, #label_34, #label_35, #label_36, #label_37, #label_38{visibility: hidden;}

For anyone else trying to do the same thing, the key things I learned were:

use div#cid_xx to move whole fields (not #id_xx or #label_xx).

use {margin-left: ...} to move fields left/right.

use (margin-top:...} to move fields vertically closer together.

Ashwin - thanks for your help. I really love the way you Jotform support guys are prepared to go in and fix our forms for us. It's fantastic!

Hello daveoreardon,

You are welcome.

I'm very pleased that I was able to help you.

Do get back to us if you have any questions.

Thank you!