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 form product items quantity is not shown

    Asked by cfranson on September 29, 2015 at 03:27 PM

    Hello,

    I'm trying to add the responsive feature to this form.  It's a wholesale order page so it has a password protection on it. the password is "bandana"

    https://secure.jotformpro.com/form/52693164387970

    when I try it out with your designer viewer the quantity input fields are cut off.  I should think they would wrap over an down under the product.

    Can you take a look and see what can be done to make this functional down to 320 pixels wide?

    Thanks!

    Page URL:
    https://secure.jotformpro.com/form/52693164387970

    password protection quantity product wide
  • Profile Image

    Answered by Ben on September 29, 2015 at 05:06 PM

    I would like to first let you know that having a field that asks for "password" or "pass" is very likely to result in your form in being suspended, suspending your account alongside of it.

    My suggestion is to change that into something else, like "ordering code" or something along those lines.

    Now in regards to the quantity field.

    The issue is caused by this rule:

    br + br + span.form-sub-label-container

    which can be fixed by applying the following code:

    @media screen and (max-width:360px) and (min-width:321px)
    {
      .form-product-item:nth-child(2) > span.form-sub-label-container,  .form-product-item:nth-child(20) > span.form-sub-label-container,  .form-product-item:nth-child(26) > span.form-sub-label-container {
        left: 39% !important;
     }
    }
    @media screen and (max-width:360px)
    {
     span.form-product-item {
        width: 90%;
     }
     span.form-product-details {
        display: block;
        text-align: right;
     }
     .form-product-item > span.form-sub-label-container {
        left: 60% !important;
        margin-bottom: 20px;
        margin-top: -30px;
        position: relative !important;
     }
     .form-product-item:nth-child(20) > span.form-sub-label-container {
        left: 39% !important;
     }
    }

    Once you add it to your form, you should see the quantity field and the price on the right and under the label. The issue here is that some images are a bit bigger and some a bit smaller, which brings difficulties while creating CSS that makes all fields aligned in the same manner.

    This is how it looks for me with the code above:

    The CSS above should be added to your form by following these steps: Inject Custom CSS Codes

    Do let us know how it goes.

  • Profile Image

    Answered by cfranson on September 29, 2015 at 06:19 PM

    thanks for the heads up on the password. It's now changed to "Fundraiser Ordering Code".

    The CSS code works nicely for my 320 pixel devices but is needlessly tight for a larger screen. I was hoping for a form that would be reactive and would change to that smaller, tighter form only when needed.

  • Profile Image

    Answered by cfranson on September 29, 2015 at 06:26 PM

     

    ooopps!

    my apologies it appears to do that very well.

    Thanks!!

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 30, 2015 at 02:24 AM

    On behalf of my colleague, Ben, you are welcome. Please feel free to contact us again if you have any further questions.