I cannot figure out how to change some of the font in my form.

  • motaj51
    Asked on February 18, 2021 at 10:46 AM

    Thefishermansdock.com/homedelivery

    I cannot figure out how to change some of the font color in my current form, even in advanced designer.

    Here is the font that i cannot change the color for:
    1613662878 602e8a9f000de  Screenshot 101613662914 602e8ac2e9ee6  Screenshot 211613662985 602e8b09792ee  Screenshot 32I am mostly worried about it because my customers cannot see the lighter text on a phone screen inside the drop-down menu and others cannot find the coupon code. It is almost like a secondary color that the form will not let me change.

  • David JotForm Support Manager
    Replied on February 18, 2021 at 1:36 PM

    Good day, we can change the color with CSS code, however, I have checked your form, and I see you have deleted the fields you highlighted in your screenshot: https://www.jotform.com/form/210327046350141

    1613673250 602eb322ec7de form Screenshot 10

    Note: please be aware that when you delete form fields, the data that they collected is also deleted.

    Let us know if you still need help.

  • motaj51
    Replied on February 18, 2021 at 1:41 PM

    My apologies, the link is thefishermansdock.com/homedelivery2


    I have that link set to transfer to the “/homedelivery2” option when the 1st question is selected as “home delivery (32258 and 32259 zip codes”


    I did see that I could custom Ccs that on another forum response but tried that method and it didn't work for me?

  • David JotForm Support Manager
    Replied on February 18, 2021 at 3:35 PM

    Hi, please inject the following CSS code: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    /*Coupon, categories dropdown, and search box*/
    .filter-container #productSearch-input::placeholder, .form-line[data-payment=true] #coupon-input::placeholder, .selected-values::placeholder, .dropdown-hint {
      color: black;
    }
    /*Subheader*/
    div.form-header-group .form-subHeader, span.form-sub-label, label.form-sub-label {
      color: black;
    }
    /*Product price*/
    .form-line[data-payment=true].card-2col .form-product-details, .form-line[data-payment=true].card-3col .form-product-details {
      color: black;
    }
    /*Sub-total*/
    .form-line[data-payment=true] .form-special-subtotal {
      color: black;
    }
    /*Dropdown*/
    .form-dropdown:required:invalid {
      color: black;
    }

    Result: https://form.jotform.com/210485881433963

    1613680450 602ecf42f2d75 result Screenshot 10

    Let us know if you need more help.