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

    I would like to add a sub-heading within the products field in my order form

    Asked by locodisplay on May 24, 2013 at 04:48 PM

    I would like to add the sub heading ' please select postage option' in my I would like to order field after the last product on my order form.

    Page URL:
    http://www.locodisplay.co.uk/

    Screenshot
    order form heading product postage
  • Profile Image
    JotForm Support

    Answered by Morian on May 24, 2013 at 05:07 PM

    Hello!

    Directly under the "I would like to order" checkboxes, add Free Text(HTML) which is located under the Power Tools.

    Use this code:

    Make sure that the font is Arial with #666666 as the color

     

    Then inject this custom CSS code

     

    #postage {

    position:absolute;

    top:-86px;

    }

    And this is the result

  • Profile Image

    Answered by locodisplay on May 24, 2013 at 05:33 PM

    Thanks for your answer - worked perfectly

  • Profile Image
    JotForm Support

    Answered by Morian on May 24, 2013 at 05:34 PM

    You're welcome! Let us know if you need further assistance! 

    Cheers! =)

  • Profile Image

    Answered by locodisplay on May 24, 2013 at 05:55 PM

    It works fine on pc and ipad however when the form is opened on a mobile running android, the please select postage option text is automatically moved across over the 'My Hermes' postage option making it unreadable. Is there an obvious fix?

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 24, 2013 at 06:48 PM

    @locodisplay

     I was able to replicate the problem even on iPhone device. It's obviously because the form switches to it's mobile view.

    Let me find a workaround for this an get back to you. Stay tuned!

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 24, 2013 at 07:11 PM

    How about this. Please add this CSS on the existing injected CSS codes to your form.

    @media only screen and (max-device-width: 550px){

    .form-product-item:nth-child(9){

    margin-top:35px;

    }

    #postage {

    position: absolute;

    top: -112px;

    }

    }

    Result:

    Let us know if it doesn't display the way it should on your end.

    Thank you!

  • Profile Image

    Answered by locodisplay on May 24, 2013 at 07:23 PM
    Would this CSS code apply to a logo I wanted to use at the top of my form
    as well, as when I viewed my form on a mobile device the original logo
    which was 690pix wide went off the edge it wasn't reduced to the
    screen/form width? Which is why at present I have used a small logo.
  • Profile Image
    JotForm Support

    Answered by EltonCris on May 24, 2013 at 07:47 PM

    @ locodisplay 

    No, that won't affect your logo in any way. Which logo are you referring to, it is the "Order Form" image on top of your form? We can help you auto-resize it on mobile view if you like. It's just a few codes, I guess :)

    Just let us know here. Thanks!

  • Profile Image

    Answered by David Smith on May 28, 2013 at 11:13 PM

    Hi thanks the CSS code for the postage (mobile view) worked. - Thank you

    No its not the order form logo currently used, as I just used a temporary small logo as a temporary fix. until I could get the proper logo displayed correctly.

    The proper logo is 690 pix wide but as mentioned previous doesn't reduce in width and runs off the form when in mobile view.

    Hope you can help. David

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 29, 2013 at 02:07 AM

    Hi David,

    Thanks for your reply.

    Perhaps this one might help the form image mobile responsive. Simply inject it to your form.

    @media only screen and (max-device-width: 550px){

    .form-image{

    width: 100% !important;

    }

    }

    Feel free to change 100% to something that fits on your requirement. 

    Hope this helps. Thanks!