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

    Font color changes on mobile form

    Asked by AlperCayhan on October 15, 2014 at 11:11 AM

    Hi,

     

    My default font colour of my form is white, but in mobile view black, see screenshot. How can I change this?

     

    Kind regards,

     

    Alper

    Page URL:
    http://touwenblok.wix.com/touwenblok#!reserveren/c11o9

    Screenshot
    mobile form Mobile font colour
  • Profile Image

    Answered by AlperCayhan on October 15, 2014 at 12:29 PM

    Another question:

     

    When I use a date field, the calendar will not disappear when clicked on it in mobile view.

     

    Kind regards,

     

    Alper

  • Profile Image

    Answered by Shadae on October 15, 2014 at 01:08 PM

    Hi AlperCayhan,

    I do apologize for the issue that you are having with the mobile view of your website. I was able to replicate the issue that you are experiencing with the color changing when being viewing in mobile.

    Please inject this code into your form to resolve the issue that you are experiencing.

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    color:#FFFFFF !important;

    }

    }

    How to Inject CSS

    I hope this helps. I have moved your question regarding the calendar to another thread: http://www.jotform.com/answers/443511

    It will be addressed there. Please inform us if you need further assistance.

  • Profile Image

    Answered by AlperCayhan on October 16, 2014 at 04:59 AM

    Hi Shadae,

     

    I've injected the code, it still doesn't work. The mobile font is still black.

     

    Hope to hear from you soon.

     

    Kind regards,

     

    Alper

  • Profile Image

    Answered by Shadae on October 16, 2014 at 08:47 AM

    Hi AlperCayhan,

    I do apologize that this did not resolve the issue.

    Can you please replace the code provided above with this code:

    @media only screen and (max-width: 40em){

    * {

    color: #FFF !important;

    }}

    This should resolve the issue that you are experiencing, please inform us if you need further assistance.

  • Profile Image

    Answered by AlperCayhan on October 16, 2014 at 08:54 AM

    Thanks a lot, this works!

     

    Another question: how can I change the fontcolour of the "submit" button into #42c5be ?

     

    Kind regards,

     

    Alper

  • Profile Image

    Answered by Shadae on October 16, 2014 at 10:06 AM

    Hi AlperCayhan,

    You are most welcome! We are pleased to hear that the issue has been resolved.

    As your original inquiry regarding the font color changing on a mobile device has been resolved. I have moved your new question to a new thread: http://www.jotform.com/answers/444236 

    We ask that each question is asked in a new thread, so that all issues can be addressed accordingly. Your question will be answered on that thread.

    Thank you.

  • Profile Image

    Answered by AlperCayhan on October 16, 2014 at 11:11 AM

    The font colour has been changed into white. But the colour of the fill-in fonts are also white. How can change this into #42c5be ?

  • Profile Image

    Answered by Shadae on October 16, 2014 at 01:07 PM

    Hi AlperCayhan,

    You can change the font color for the text boxes using our new form designer.

    1. Access the Form designer from our Form builder

    2. Select the Text box

    3. Adjust it to your desired color

    You would need to change the CSS code provided to:

    @media only screen and (max-width: 40em){

    * .form-label .form-product-item {

    color: #FFF !important;

    }}

    I hope this helps. Please inform us if you need further assistance.

  • Profile Image

    Answered by Shadae on October 16, 2014 at 01:11 PM

    Hi,

    Correction regarding the code that should be entered:

    @media only screen and (max-width: 40em){

    * .form-label .form-input {

    color: #FFF !important;

    }}

    The one provided before would show the items as black on a mobile device. This code would correct that. Sorry about that.

  • Profile Image

    Answered by AlperCayhan on October 16, 2014 at 02:26 PM

    Thanks a lot, this works!

  • Profile Image

    Answered by AlperCayhan on October 16, 2014 at 03:35 PM

    I've got errors now... :-( Can you help me please?

    The label fonts have to be white, and the fill in fonts have to be #42c5be

    The form designer doesn't work at all.

  • Profile Image

    Answered by AlperCayhan on October 16, 2014 at 04:07 PM

    I've deleted all de CSS codes... :-(

  • Profile Image

    Answered by raul on October 16, 2014 at 05:55 PM

    Hi,

    Please try to inject the following CSS code:

    @media only screen and (max-width: 40em) {

    label {color: #FFF !important;}
    .form-product-details b, span {color: #FFF !important;}
    input {color: #42c5be !important;}

    }

    .form-submit-button {color: #42c5be;font-weight: bold;}

    Please let us know the results.

    Thanks.

  • Profile Image

    Answered by AlperCayhan on October 17, 2014 at 03:02 AM

    Great, this works! Thanks a lot!

  • Profile Image

    Answered by AlperCayhan on October 17, 2014 at 04:41 AM

    Last question:

     

    The font color for the fill in forms in non-mobile view is black, in mobile view this is #42c5be

     

    How can I change both into #42c5be ?

     

    Kind regards,

     

    Alper

  • Profile Image

    Answered by Shadae on October 17, 2014 at 08:33 AM

    Hi AlperCayhan,

    The code that was provided only added the input color, you would also to need to add the code below, at the end of the code that you currently have injected:

    input {color: #42c5be !important;}

    You can also make that change using the form designer. Please follow the steps below:

    1. Access the Form designer from our Form builder

    2. Select the Text box

    3. Adjust it to your desired color

    I hope the this helps! Please inform us if you need further assistance.

  • Profile Image

    Answered by AlperCayhan on October 17, 2014 at 08:39 AM

    Thanks, this works! But the font color in the comment field is still black:

  • Profile Image

    Answered by AlperCayhan on October 17, 2014 at 08:42 AM

    This is what I see when I use Form Designer, it doesn't work at all...

  • Profile Image

    Answered by raul on October 17, 2014 at 09:49 AM

    Hello,

    Please try to change the following part of your custom css.

    From this:

    input {color: #42c5be !important;}

    To this:

    input, textarea {color: #42c5be !important;}

    Please let us know if we can be of further assistance.

    Thanks.

  • Profile Image

    Answered by AlperCayhan on October 17, 2014 at 10:01 AM

    Yes, this works! Last question:

     

    I would like to have the fonts of the fill in form of the "DATUM EN TIJD" field in color #42c5be as well.

  • Profile Image

    Answered by Shadae on October 17, 2014 at 11:10 AM

    Hi AlperCayhan,

     

    You are using you are using a widget for your date and time field. Unfortunately, that widget does not allow for customization. As such it is not possible to change the input color.

    You can use the DateTime fields that is in the Quick Tools within form builder and you will be able to make the desired style changes.

    I hope this helps. Please inform us if you need further assistance.