Spacing Questions

1)  I would like to learn how to decrease the spacing between the "Today's Date" text box & the "Customer Name" text box.  

2) I would like to learn how to decrease the spacing between the text "iMail & more -- Itemized Customer Receipt" and "Today's Date/Customer Name" text boxes.

3)  How can I decrease the size of the description text box before the Email box?  I would like to place the description to the right of "Accessorials" & "Accessorials (2)."

4)  How can I decrease the spacing between iMail & More logo and the address section ?

Apologies for all of the questions, but with Adobe FormsCentral all of these options were click and drag.  Super easy -- and I have no background in coding or html.  

Please provide as much detailed information as you can - because I want to start utilizing JotForms more.  Thank you.

Please see link to the form I am trying to edit:  https://form.jotform.com/60574261633959

Hello PreferredGlobal ,

#1. To achieve this, you will have to remove the left & right padding of the ".form-line" css class but this will reflect across all fields of your form. Please inject the following custom css code:

.form-line{

    padding-left: 10px;

    padding-right: 10px;

}

If you just want to reduce the spacing for the "Today's Date" text box & the "Customer Name" text box, please inject the following custom css code:

li#id_10 {

    padding-right: 10px;

}

li#id_11 {

    padding-left: 10px;

}

#2. Please inject the following custom css code :

li#id_9 {

    top: -35px;

}

li#id_8 {

      top: -70px;

}

#4. Please inject the following custom css code:

li#id_7 {

    margin-left: -50px;

}

#5. Moved your question to a new thread and you will be answered here:  http://www.jotform.com/answers/782999

Please take a look at the following cloned form where I have implemented your requirement #3 alone with all other requirement :  https://form.jotform.com/60575974121963 

Feel free to clone this form for a closer look and the following guide should help you in form cloning:  http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

Hope this helps.

Do get back to us if you have any questions.

Thank you!

This makes some-what sense.  I can adjust the spacing numbers and play around with it.  

Can you add the other "Description Label" and place it next to 'Accessorials?'  How did you do this?  What was the coding?  Thanks for any help!

Also -- the numbers are not going in to CURRENCY format, neither is the Calculator widget at the bottom?  How to fix this?

Okay -- I am a little confused.  If you can work off of your clone -- I would really appreciate it.

https://form.jotform.com/60575633935160

All I need done is:

1)  Align the first 'Description' next to 'Accessorials.' (similiar to what you did with 'Accessorials(2).'

2)  Remove any spaces between the address at the top (1130 Bedford Ave., Brooklyn, NY, etc...) (it looks double spaced in the link).

3)  IF you can provide an explanation on how you aligned 'Description' and 'Accessorials(2).'

I will just work off of your clone.  I am going to make a new credit card authorization form this week and need to align multiple text boxes side-by-side so an explanation will really help....thanks!

Regarding 1 and 3, I am not sure what you were referring to as aligning them, so I'll explain both ways I interpreted it.

a) I can see that "Description" and "Accessorials" are already aligned in the same line on your form:

The way to make them be on the same line is to use the Shrink option, so that both of the fields are shrunken onto the same line:

b) If you were instead referring to the fields having their label on the left side on my colleague's form, and being on top on your form, you can easily change positions of your labels by clicking on a field, and setting its Label Align to Left:

On regards to your question number 2, I believe you are referring to vertical distance between the lines of text. They currently show as this:

And you would want them to have less vertical space, such as this:

We can do this easily by adding a small bit of custom CSS to your form. This code would affect only that one specific form field that has ID of 7, which is holding the address on your form:

#text_7 { line-height: 1em; }

If you wanted to make this change apply to all (HTML) Text fields on your form, you would use this code instead:

.form-html { line-height: 1em; }

Please let us know if you need any further clarifications, but if you have questions about something else, please do open a new support thread about each of the separate questions you may have. Thank you.

I would like to apologize, I'm not sure I understand what your last reply means. Can you help us by giving us more details, please, so we can further assist you. Thank you.

We will wait for your response. Thank you.