Help with form alignment.

  • Profile Image
    HealthyBoxx
    Asked on August 13, 2019 at 10:36 PM

    Hi... i'm trying to finalize this attached form,

    there are a few things holding it up.

    a) .. shipping address is supposed to be on same line as address

    b) Life style options next to for the soul 

    c) ... speed loading & line spacing... so the website where i'm embedding the html code is telling me the form is too long...  and when i tested the form with my focus group, they said the line spacing is making it difficult to read/follow the form. -- please HELP!

    Thanks & Enjoy your day,

    -Chris!

     p.s. -- if the form is too difficult to read - please fix in the account.

    thanks again

    Screenshot
  • Profile Image
    Jed_C
    Answered on August 14, 2019 at 04:01 AM

    a) Shipping address is supposed to be on same line as address — Do you mean you want it to be vertically aligned. Currently, the field is on the right side of "Address" field. If so, you can unshrink the field check this guide https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm

    b) Life style options next to for the soul — You can inject the CSS code below to reduce the Lifestyle Options field width.

    li#id_8 {

        width: 400px;

    }

    sample output:

    1565769576Create ... your personalized H

    c) speed loading & line spacing — As for your last concern, please share to us the exact URL where the form is embedded so we can check. Looking forward for your response. 

  • Profile Image
    HealthyBoxx
    Answered on August 14, 2019 at 10:43 AM
    section a -- thank you - that worked.
    issue B -- no that is not what i mean... look at my attachement
    i want the spacing between the lines very super tight...
    like the lines almost on top of each other... line when you type in
    word .95 line spacing.
    issue C - speed loading... lets figure out the line spacing first.
    thanks,
    ...
  • Profile Image
    IvayloK
    Answered on August 14, 2019 at 01:04 PM

    I will work on a workaround and contact you later today.

  • Profile Image
    HealthyBoxx
    Answered on August 14, 2019 at 03:43 PM
    ok.- thanks!
    ...
  • Profile Image
    IvayloK
    Answered on August 14, 2019 at 06:36 PM

    In order to decrease the space between options in the multiple choice field, please try the following CSS code:

    li#id_8 {

        width: 400px;

    }

    #input_8_4 {

      margin-top: -2.5px;

    }

    #input_8_5 {

      margin-top: -2.5px;

    }

    #input_8_2 {

      margin-top: 10px;

    }

    #input_8_1 {

      margin-top: 10px;

    }

    #input_8_0 {

      margin-top: 10px;

    }

    #input_8_3 {

      margin-top: -2.5px;

    }

    #other_8 {

      margin-top: -2.5px;

    }

    Please give it a try and let us know, how it works for you.

  • Profile Image
    HealthyBoxx
    Answered on August 16, 2019 at 11:43 AM
    no - this did not work.
    ...
  • Profile Image
    Kevin_G
    Answered on August 16, 2019 at 01:20 PM

    You may recude the space between the options with this code: 

    li#id_7 .form-checkbox-item, li#id_8 .form-checkbox-item {

        margin: 0;

        height: 20px;

    }

    Note that you can change the value in the height property in order to set the desired space. 

    Here's the result: https://form.jotform.com/92274866320965 


  • Profile Image
    HealthyBoxx
    Answered on August 16, 2019 at 10:18 PM
    Kevin -- high five !!!!!!!! That worked awesome for the
    check-boxes... it didn't work on the items for sale inside the square
    cc processing frame... Can you PLEASE fix that too !??!
    thanks,
    Chris
    ...
  • Profile Image
    Jed_C
    Answered on August 16, 2019 at 11:36 PM

    Please add the CSS code below:

    span.form-product-item.hover-product-item {

        margin-bottom: -10px;

    }

    If you want it more closer, increase the negative value of pixel.

    Let us know if you have any questions or if you need further assistance. 

  • Profile Image
    HealthyBoxx
    Answered on August 17, 2019 at 12:43 PM
    hi -- jed -- that worked great...
    except for the drop down boxes... see attached.
    ...what is the code to raise those lines ??
    for example ... under words "size Awe -How cute"
    is the line "number of Months to Send Gift box " ....
    .... how can i move THAT line that says Number of MOnths to SEnd gift box
    closer to the check mark box...
    AND
    is it possible to move the line "Number of Months to SEnd Gift Box, etc."
    5 spaces in, so that the word number is under the word Awe ? ... you know, so
    its easier to see the drop down choices goes with that particular
    check box sale item.?
    THANKS - I greatly appreciate your Help!
    ...
  • Profile Image
    Mike_G
    Answered on August 17, 2019 at 03:07 PM

    It appears that the screenshot you tried to include in your last reply was not posted. Probably because you are replying from your email. To include a screenshot in your reply, please see the instructions in this guide — How-to-Post-Screenshots-to-Our-Support-Forum


    Even without the screenshot, I managed to understand your requirements. Thanks to your description, I appreciate it.

    As for the solution, please inject the following CSS codes into your form.

    .form-product-item .form-sub-label-container {

        margin: 0px -45px 10px 56px !important;


    }

    Here's how it will look like after.

    1566068833zt15_06_42.png

    Feel free to contact us again anytime if you need any further assistance.


  • Profile Image
    HealthyBoxx
    Answered on August 17, 2019 at 10:43 PM
    thanks mike - that worked !!!
    there are 2 more things that need to be fixed in that section.
    ... i'm not sure of the word i'm looking for - padding? margin?
    but the product items that have the drop down menu line.
    ... the drop down menu line and the space to the next product item
    needs to be closer.
    ... so if you goto my site or see the published form...
    i'm talking about
    Size Awe, etc.
    ...number of months to send
    [ space that needs to be made narrower, line instead of a 12px maybe a 8px]
    Size Wow, etc.
    ... number of months to send
    [space that needs to be made narrower, like instead of a 12px maybe an 8px ?]
    ............ issue 2 ........ lines squeeshed together like the rest of the form
    for the following sections ...
    the actual credit card box section
    first name , last name
    credit card security code
    express date
    ... AND...
    the actual address box section - the actual shipping box section
    THANKS ! ENjoy yoru day!
    ...
  • Profile Image
    Jed_C
    Answered on August 18, 2019 at 12:36 AM

    Ok. so you want the entire product items to be closer. Try the code below:

    .form-product-item-detail {

        margin-bottom: -3px;

        margin-top: -6px;

    }

    #cid_9 > div:nth-child(1) > div > div > span:nth-child(1) {

        margin-bottom: -10px;

    }

    Sample output:

    1566102893Gift ... Healthy Boxx - Google

    I hope that helps. Let us know if you have any questions or if you need further assistance. 

  • Profile Image
    HealthyBoxx
    Answered on August 18, 2019 at 01:43 PM
    that did NOT work... i'm going to open a new support ticket so i can
    show you what i'm talking about...
    ...