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

    Can I make the borders of my fields appear on the mobile version of my form?

    Asked by simplysmiles on January 06, 2016 at 10:05 AM

    Currently the outlines on all form fields fields are not appearing in the mobile version of my form. I've changed the responsive settings in both the Preferences and Form Designer (mobile responsiveness is now turned off in the Form Designer), but the field outlines are not appearing either way.

    Here's how the form looks in the web version in Safari. It looks great and is very easy to use.

    Here's how it looks in Safari on an iPad. There are no field outlines, which makes the field labels appear as if they're floating, and it seems a little confusing as to where you're supposed to enter your information.

     

    And here's how it looks in Safari on iPhone:

     

    The lack of field outlines looks a little strange to me, especially in fields like our "nickname/preferred first name" field. How is someone supposed to know they can click there and enter their information?

    Is this just a feature of the Sleek theme I'm currently using? Can I add some CSS to make the field outlines appear in the mobile version?

    Thanks in advance for any help or suggestions!

    Page URL:
    https://form.jotform.com/simplysmiles/releaseform2016

    Mobile mobile version Make form designer name height ipad field outline
  • Profile Image
    JotForm Support

    Answered by EltonCris on January 06, 2016 at 12:57 PM

    Hi,

    Yes, that's right, it's only specific on that theme.

    Inject this CSS codes to your form, this atleast show borders and shadows when viewed on mobile.

    @media screen and (max-width:768px){

    .form-textbox, .form-textarea, .form-dropdown {

        border: 1px solid #B1B1B1 !important;

        box-shadow: 0px 1px 1px 1px rgba(171, 171, 171, 0.45) !important;

        -webkit-box-shadow: 0px 1px 1px 1px rgba(171, 171, 171, 0.45) !important;

    }    

    }

    Result:

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes (paste it at the bottom part if there are existing CSS codes)

    Let us know if you see any problems. Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 06, 2016 at 01:20 PM

    I have also applied this CSS code on Sleek Theme so feel free to re-apply the theme in your form.

  • Profile Image

    Answered by simplysmiles on January 06, 2016 at 02:09 PM

    That looks great, and reapplying the theme worked without a problem. Thank you!

    Is there any way for the field outline to remain intact when you're filling out the field like in the web version? In the screenshot below, you can see that the outline box goes away once you start to fill out a field.

    Not a huge problem, but I figured I'd ask. Thank you!

     

  • Profile Image

    Answered by victor on January 06, 2016 at 05:49 PM

    On behalf of my colleague, you are welcome.

    In regards to your order question. I have just cloned your form and noticed that you already added a yellow border to the text boxes.

    If you still require our assistance, please do no hesitate contacting us. We will be glad to help.

  • Profile Image

    Answered by simplysmiles on January 13, 2016 at 09:54 PM

    Hello again!

    To clarify my screenshot above: Is there a way to keep the outline of the text box from disappearing when you are filling it out? The yellow highlight around the field is less important to me than keeping the outline of the text box itself intact. As you can see in the nickname/preferred field, the cursor just appears to be floating, without the text box outline that appears in the fields above (first/middle/last names) and below (date of birth) the selected field.

     

     

    I don't know if I'm explaining myself well. Let me know if I can clarify more.

    Thank you,

    Zach

     

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 13, 2016 at 11:01 PM

    Hello Zach,

    Sorry to missed that out. I have just updated the theme. Please re-apply the sleek theme again on your form. It should not have that problem when you click on the fields anymore.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 13, 2016 at 11:07 PM

    Screenshot: