What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by daveoreardon on September 21, 2014 at 01:44 AM

    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)

    Page URL:
    http://www.test.ciopulse.com.au/signup.html

    horizontal horizontal space JotForm uploads name label
  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 21, 2014 at 08:41 AM

    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!

  • Profile Image

    Answered by daveoreardon on September 22, 2014 at 12:59 AM

    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!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 22, 2014 at 02:08 AM

    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!