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

    Responsive quantity field

    Asked by cfranson on October 15, 2015 at 10:38 AM

    Hello,

    I'm hoping to have my quantity fields to the right side of the question when the viewer screen is 480px or wider and then drop down under the question, the way it currently is, when the screen is narrower than 480px.

     

    https://form.jotform.com/52694973898986

     

    Thanks for your help!!

    Page URL:
    https://www.outlawsalsa.com/fundraisingtools.html

    quantity JotForm thanks wider
  • Profile Image
    JotForm Support

    Answered by Boris on October 15, 2015 at 12:18 PM

    You can achieve that by adding the following custom CSS to your form:

    @media only screen and (min-width:480px) {
    .form-product-item {

        display: block;
    }
    .form-product-item > label {
        display: block;
        float: left;
        width: 50%;
        padding: 0 20px 0 0;
        margin: 0;
    }
    .form-product-item > br {
        display: none;
    }
    .form-product-item > .form-sub-label-container {
        margin-top: 0;
    }
    }

    The form would display like this:

    You can add the code by opening the Designer (Setup & Embed > Designer):

    And pasting it into the textbox under the CSS tab. However, you will first need to remove one part of the broken CSS codes that you have in the form, because they would be preventing this code from working:

    After removing the broken lines, please add the recommended code, and save your form:

    Please let us know how it goes.

  • Profile Image

    Answered by cfranson on October 15, 2015 at 03:21 PM

    Hi,

    I think I accomplished what you suggested and it still looks the same.  Can you take another look please? Thanks!

  • Profile Image

    Answered by Carina on October 15, 2015 at 05:56 PM

    I tested the form and with a 416px screen the quantity fields are under the label:

    With normal screen the quantity is on the right side:

    Let us know if we can assist you further.   

  • Profile Image

    Answered by cfranson on October 15, 2015 at 06:24 PM

    Yes, when I use the direct link I see that the form is responsive and is reformatting correctly.  I'm using an iframe imbed method and it will not work when i imbed the code.  Any ideas?  

    I'm using the same style as other forms on my site that do reformats responsively. Like this form.

    https://form.jotform.com/52810227665960

  • Profile Image

    Answered by cfranson on October 15, 2015 at 07:21 PM

    OK I figured out the form is working but it only goes into the side by side position when my form is about 750px wide.  That's too late.

    Id like it to stay in the horizontal layout until about 480px wide. Then go into the column type layout. Is that possible?

  • Profile Image

    Answered by KevinGarcia on October 15, 2015 at 09:32 PM

    Hi, 

     

    I think this can help, you should change some things in the CSS code, well your code should look like this  :

    @media only screen and (min-width:480px) {
    .form-product-item {

        display: block;
    }
    .form-product-item > label {
        display: block;
        float: left;
        width: 49%;
        padding: 0 20px 0 0;
        margin: 0;
    }
    .form-product-item > br {
        display: none;
    }
    .form-product-item > .form-sub-label-container {
        margin-top: 0;

       width:40%;

    }
    }

     

    This is the result: 

     

    I hope that helps.

     

    Regards.

     

     

     

  • Profile Image

    Answered by cfranson on October 15, 2015 at 10:14 PM

    It does help and we''re very close. It still feels a little tight on the bigger screen. You can see that some of the prices are already starting to wrap. Can we get everything on the horizontal plane on the bigger devices?

  • Profile Image

    Answered by KevinGarcia on October 15, 2015 at 10:49 PM

    I got, just paste this CSS code in the Designer, it should work.

    .form-product-item {

        width: 100% !important;

    }

     

    I hope that helps.

     

  • Profile Image

    Answered by cfranson on October 15, 2015 at 10:58 PM

    That went the opposite way. I'm trying to keep the prices on the same line and that made all the prices wrap under

  • Profile Image

    Answered by cfranson on October 15, 2015 at 11:02 PM

    no i take that back. it is working. Thanks i think that's good for me!!

  • Profile Image
    JotForm Support

    Answered by Boris on October 16, 2015 at 03:06 AM

    On behalf of everyone who helped, you are most welcome. :)

    We are happy to hear that you've got it working. If there are any further adjustments needed, please do include a link to the page where the form is embedded, so that we can check for any issues directly on that page as well.

    As always, if you need any other help with your forms, please do not hesitate to open a new support thread about it, and we'll do our best to help.