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

    CSS Format and Layout Help!

    Asked by RogerYelvington01 on April 08, 2015 at 09:59 PM

    Hi Guys,

    Just trying to get the form to have a proper layout for my employees to use.  I've attached a graphic for reference, and the fields are conditional - so to match the graphic I selected "closing end of week" and "club manager" in the first two drop downs.

    http://form.jotformpro.com/form/50968165278973

    Thank you guys for helping me get this right, your the best!

    Roger

     

    Page URL:
    http://form.jotformpro.com/form/50968165278973

    Screenshot
    layout format and selected attached
  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 09, 2015 at 03:26 AM

    Hello Roger,

    Looking at the picture you have shared, I am not sure if I have understood your requirement correctly.

    Do you want to center align align your form fields and remove the top margin of form?

    Upon checking form, I found that the form fields appears to be aligned in center of form. Where you have two matrix fields, they appear to take a little more space. Please check the screenshot below:

    Do you want to align them with the other fields as well? You will have to move the matrix fields in separate rows or reduce the width. Do let us know your preference and we will try to help you.

    To reduce the top margin or form, please inject the following custom css code in form:

    .form-all {

      margin-top: -50px;

    }

    The following guide should help you on how to inject custom css code:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by Roger Yelvington on April 09, 2015 at 07:10 AM

    There are a total of 6 format changes I need to make to the form,

    and maybe we can increase the width of the form instead of making the table smaller to bring it to the center?

     

    thank you!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 09, 2015 at 08:47 AM

    Hello Roger,

    There are a total of 6 format changes I need to make to the form,

    What are the format changes you want to make in your form? Please explain your requirement a bit more in detail and we will surely help you. 

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by RogerYelvington01 on April 09, 2015 at 09:09 AM

    I did a side by side screen shot, and put a red box around the 6 changes needed.  The screen shot on the right is what I am trying to get the form to look like.

    The screen shot on the left is what is currently showing.

     

    1.  The first 4 fields at the top, I would like to put in the format of 2 rows, and 2 columns

    2.  The label above each box/matrix grid, I would like to line up at the top left as shown

    3.  I would like to widen the width of the form, to make sure all content fits properly and is centered

    4.  In the middle of the form, I have two drop downs, which I would like to format in two columns and one row (side by side), with the label on the inside of the field.

    5.  I would like to format the "Down Payment" and "Contract Amount" (that are below each of the membership sold, and PT contract sold boxes) to be the same size and font as the boxes above them

    6. I would like the "MEMBER SALES" and "PT SALES" text heading to be in two columns side by side, with two fields centered below each (Down Payments, Total Contracts)

    7.  Oh, and the last one (there are 7 total) is reducing the width of the first 5 drop down boxes at the bottom of the form by half.

     

    Thank you for your help, I hope these details help!

     

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 09, 2015 at 12:47 PM

    @ RogerYelvington01

    Right, I can see all of them in your screenshot from your first post. :)

    We'll check it and apply it on a cloned version of your form so you can clone it back afterwards. Stay tuned!

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 09, 2015 at 01:46 PM

    Here's the form http://form.jotformpro.com/form/50985382349972?.

    Feel free to clone this form back if you like. 

    I did not touch the existing styles on your form. I only added this CSS codes and made some minor merging and moving of fields to creating 2 columns.

    Thanks!

  • Profile Image

    Answered by RogerYelvington01 on April 09, 2015 at 05:26 PM

    Elton Chris, 

    This looks great!  I created a clone of your's here - and after doing testing with the form have a few more edits to make this form complete.  I hope you can help, thank you!

     

    Here is the clone I made, and then made some additional updates:
    http://form.jotformpro.com/form/50986145344965

     

  • Profile Image
    JotForm Support

    Answered by jonathan on April 09, 2015 at 08:26 PM

    Hi,

    Our colleague EltonCris is offline at the moment. But he will also get the notification of your latest message so he will get back to you as soon as he is available.

    Since EltonCris already have done the bulk of the resolution, it will be best if he will also be the one to proceed and complete it.

    I will also contact him and let him know of your update.

    We will update you here as soon as possible.

    Thanks.

     

  • Profile Image

    Answered by RogerYelvington01 on April 10, 2015 at 03:11 PM

    Hey Guys, any update?

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 10, 2015 at 04:16 PM

    Here's the form. http://form.jotformpro.com/form/50996146530964?

    About the dollar sign, unfortunately I could not find a workaround for it. I think currency validation is the right solution. You can also try input mask but I don't think that's ideal.

    I also can't seem to find the 4 column matrix in your cloned form so I decided not to touch that part. But here's my recommendation on that part. This is so much easy rather than separating these two rows unless you want to achieve something.

    Thanks!

  • Profile Image

    Answered by RogerYelvington01 on April 10, 2015 at 04:18 PM

    Hi!

    I have the fields below, so that way I can do the auto calcuations that feed into the fields at the bottom for the total down payments and total contract amounts

     

    Thank you!

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 10, 2015 at 05:04 PM

    Alright, got it. :)

    Mind finalizing the form including the 4 column matrices? Provide the form URL afterwards so I can clone it and provide to you the final layout.

    Thank you!

  • Profile Image

    Answered by RogerYelvington01 on April 10, 2015 at 05:58 PM

    Updated for review on this form:
    http://form.jotformpro.com/form/50985541435965

     

    Thank you!

  • Profile Image

    Answered by RogerYelvington01 on April 11, 2015 at 11:53 AM

    Just checking in on this?

  • Profile Image
    JotForm Support

    Answered by jonathan on April 11, 2015 at 04:55 PM

    Sorry for the delays. I will check with EltonCris on this.

    We will let you know once we have updates here.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 11, 2015 at 09:02 PM

    @RogerYelvington01 

    Apologies for the delay. Here's the form:

    http://form.jotformpro.com/form/51003095496958?

    Let me know if I have missed anything. Thank you!

  • Profile Image

    Answered by RogerYelvington01 on April 12, 2015 at 07:06 PM

    This looks great, I continued working on the form today and am striving to make it as user friendly as possible.  As well as printer friendly.  Looks like only a few small edits will get us there!

    I've attached a visual of the final round of edits, and they are the following:

    1.  Move Location Drop box from the bottom of the form to the top
    (And also arrange the 3 drop boxes at the top in a single row as shown)

    2. Reduce margins in 5 different areas throughout the form to reduce wasted space

    3.  Move "MEMBER SALES" and "PT SALES" Header Text just above left edge of boxes below

    4.  Error in "facilities check" and "Member Sales - opening" boxes not showing label header

     

    Thank you!

    Roger

     

     

     

  • Profile Image

    Answered by RogerYelvington01 on April 12, 2015 at 07:08 PM

    Also, almost forgot!  This is the most current version of the form:

    http://form.jotformpro.com/form/51015965154958

    Thank you!

    Roger

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 13, 2015 at 02:18 AM

    Hi Roger,

    I will get back to you on this later today.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 13, 2015 at 08:23 PM

    Here's the form mate. Sorry for a bit delay. http://form.jotformpro.com/form/51027430352948?

    Should you want further changes, let us know. Thanks!