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

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!

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!

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

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!

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.

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

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!

Screenshot: