Font color changes on mobile form

  • Profile Image
    AlperCayhan
    Asked 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

  • Profile Image
    AlperCayhan
    Answered 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
    Shadae
    Answered 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
    AlperCayhan
    Answered 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
    Shadae
    Answered 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
    AlperCayhan
    Answered 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
    Shadae
    Answered 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
    AlperCayhan
    Answered 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
    Shadae
    Answered 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
    Shadae
    Answered 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
    AlperCayhan
    Answered on October 16, 2014 at 02:26 PM

    Thanks a lot, this works!

  • Profile Image
    AlperCayhan
    Answered 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
    AlperCayhan
    Answered on October 16, 2014 at 04:07 PM

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

  • Profile Image
    raul
    Answered 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
    AlperCayhan
    Answered on October 17, 2014 at 03:02 AM

    Great, this works! Thanks a lot!

  • Profile Image
    AlperCayhan
    Answered 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
    Shadae
    Answered 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
    AlperCayhan
    Answered on October 17, 2014 at 08:39 AM

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

  • Profile Image
    AlperCayhan
    Answered 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
    raul
    Answered 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
    AlperCayhan
    Answered 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
    Shadae
    Answered 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.