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

    Add CSS code to form to make it mobile responsive

    Asked by mcota4421 on October 01, 2016 at 09:08 PM
    Can I get the custom css for mobile view re RMAC COACHES
    Officials Game Report.
    thanks!
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com
  • Profile Image
    JotForm Support

    Answered by liyam on October 02, 2016 at 03:57 AM

    Hello,

    There is no need to add a code to make your form mobile responsive. With just a few clicks, you can find the option to make your form mobile responsive. This guide will walk you through: https://www.jotform.com/help/311-How-to-make-forms-mobile-responsive 

    Another method is simply just add a mobile responsive widget on your form. You can find the widget here: https://widgets.jotform.com/widget/mobile_responsive 

    If you have questions, please let us know.

    Thanks.

  • Profile Image

    Answered by ozlem.demirci1993 on October 02, 2016 at 09:52 AM

    Hi mcota4421,

    Jotform is already mobile responsive as mentioned above, but if you want to write your own CSS codes to your form to make it mobile responsive, you can do it by using Advanced CSS Editor panel.

     

    https://youtu.be/7zYFQv94EsU

     

    If you want something else, or need further assistance, feel free to revert back.

     

    Thanks.

  • Profile Image

    Answered by mcota4421 on October 03, 2016 at 01:45 AM
    It actually kind of isn't responsive. And the widget doesn't work well. 
    Please provide the custom CSS for the form in question so I can copy and past it. Thanks. 
    Deep Dive Ref Admin Crew
    Info@deepdiveref.com
    www.deepdiveref.com
    "We WILL make you better"
    Sent from Mobile Outlook
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 03, 2016 at 03:37 AM

    Hello,

    I have made few changes in your form. Can you please take a look and see if it is displaying correctly in mobile devices?

    I have injected the following custom css code in your form:

    @media only screen and (min-device-width : 414px) and (max-device-width : 736px){

        .form-submit-print {

            margin-left : 6px !important;

        }

    }

    @media screen and (min-width: 10px) and (max-width: 480px){

    img.header-logo-left {

    width : 280px !important;

    }

    .header-logo-left {

    width : 280px !important;

    }}

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by mcota4421 on October 03, 2016 at 10:45 AM
    Good morning! What form was changed? It was supposed to be the
    RMAC Coaches Officials Game Report
    Please update me. Thanks!
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 03, 2016 at 12:11 PM

    Hello,

    I have injected the following custom css code in your form "RMAC COACHES Officials Game Report" and your form seems to display correctly in mobile devices:

    @media screen and (min-width: 10px) and (max-width: 480px){

    #cid_4 .form-image {

    width : 280px !important;

    }

    #first_5 {

    width : 170px !important;

    }

    #last_5 {

    width : 170px !important;

    }

    .form-line-column {

        white-space: normal !important;

    }

    }

    I would suggest you to please test your form and get back to us if you have any issues.

    Thank you!

  • Profile Image

    Answered by mcota4421 on October 06, 2016 at 10:45 AM
    Good morning!
    I received this from another jotform client. Is this a template? If
    so, which one is it? This is exactly what I need! And how is that
    payment set up? Not pal correct?
    His:
    https://form.jotform.com/62743801674156
    My current store template: (I need people to select qty of size just
    like this one)
    https://form.jotform.com/62604171377152
    Can you help me change mine to the the one above although it is live and
    active?
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 06, 2016 at 12:54 PM

    Hello mcota4421,

    If I understand your requirement correctly, you want to display product quantity & size next to each other instead of one below the other. Is that correct?

    Please inject the following custom css code in your form and that should display the product options next to each other:

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

        width: 550px;

    }

    The output of the above custom css code:

    Thank you!

  • Profile Image

    Answered by mcota4421 on October 06, 2016 at 03:45 PM
    I need to display side by side but sizes and qty under same dropdown arrow as jos example. 
    Deep Dive Ref Admin Crew
    Info@deepdiveref.com
    www.deepdiveref.com
    "We WILL make you better"
    Sent from Mobile Outlook
    ...
  • Profile Image

    Answered by mcota4421 on October 06, 2016 at 05:44 PM
    I also need to know what payment service he used so I can
    consider.....thanks!
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com
    ...
  • Profile Image
    JotForm Support

    Answered by liyam on October 06, 2016 at 09:55 PM

    Hello mcota4421,

    As mentioned by Ashwin, the code you need to insert in order to show the dropdown side by side is this:

    span.form-product-item.hover-product-item {
        width: 550px;
    }

    Regarding the payment gateway service used, he used Stripe.

    If you need assistance in inserting the CSS code, please let us know.

    Thanks.

  • Profile Image

    Answered by mcota4421 on October 07, 2016 at 06:45 PM
    This is what I need: (I need to have qty add up at the end)
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on October 07, 2016 at 09:42 PM

    Just to be clear, this is the form https://www.jotform.us/form/62798779633175 being worked on. Let us know if not.

     

    Base on what I understand after back reading on the discussion thread, I can assume the original question about the CSS code needed for the form was already resolved. Let us know if this is not the case.

    If you have new question not related to this thread, you can create a new topic for it using the link below https://www.jotform.com/contact/

     

    Best

  • Profile Image

    Answered by mcota4421 on October 09, 2016 at 02:44 PM
    yes I need them to be able to choose size qty and total of item on side
    like the screenshot I sent
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com
    ...
  • Profile Image
    JotForm Support

    Answered by Jan on October 09, 2016 at 04:51 PM

    Currently, this is how your form looks like in mobile device:

    If I understand you correctly, you would like the "Quantity" and the "Size" in 1 row below the product name in mobile device. If yes, then please insert this CSS code:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    .form-sub-label-container {
    width: 60px;
    }

    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    Hope that helps. Thank you.

  • Profile Image

    Answered by mcota4421 on October 09, 2016 at 08:44 PM
    Ok.
    We need each size to have its own dropdown as illustrated in previous picture with red mark ups
    Need total qty for each item as noted once the patron is done selecting. Just like picture I sent you guys. 
    Does that make sense??
    I.e. XS through XXL
    XS.    S1.       12.      23.      34.      45.      56.      6

    Deep Dive Ref Admin Crew
    Info@deepdiveref.com
    www.deepdiveref.com
    "We WILL make you better"
    Sent from Mobile Outlook
    _____________________________
    ...
  • Profile Image
    JotForm Support

    Answered by liyam on October 09, 2016 at 10:10 PM

    Hello,

    As your question no longer refers to a CSS matter and more of something related to the set-up of your products, I have moved the last question to a new thread. We'll give you a response on the said thread in a while.

    Thanks.