Change Color Form




Can you help me to get the shortcodes for change colors in contact form.



image

Comments

  • Link to this page please.
  • The color for all those fields, can be changed with one css only:
    input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, select:focus, textarea:focus { background-color: #000 !important; color: #FFF !important; }
  • 1. Try to change the text color "name" , " email" , " telephone" in contact form . When I put the same gray colored background and not the text visible . What code use to change the text color that is not reached in the next imagen.

    2. Code to change only in select background popup_contact to #FFF.



    I use the next code in CSS:

    input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, select:focus, textarea:focus { background-color: #000 !important; color: #FFF !important; }

    input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], select, textarea, .woocommerce .quantity input.qty {
    background-color: #b0b0b0;
    border-width: 1px;
    border-color: #777777;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    color: #000000;
    }

    #popup_contact > a.button i { color: #000000 !important; }
    #popup_contact > a.button { background: #b0b0b0 !important; }
    #popup_contact .popup_contact_wrapper { background: #b0b0b0 !important; }


    image
  • 1. To change text color inside this form only, it is necessary to set CSS CLASS name for the section or column where this form is. Otherwise, colors would change for all forms (in popup on the right as well)

    2. This can be done with:
    .popup_contact_wrapper select { background-color: #FFF !important; }
  • edited January 2016

    I not find the way to do it . I am using Contact Form 7 , I send the code:

    <div class="column one-second">[text* your-nombre placeholder "Nombre"]</div>
    <div class="column one-second">[text* your-telefono placeholder "Teléfono"]</div>
    <div class="column one-second">[email* your-correo placeholder "Correo"]</div>
    <div class="column one-second">[select* your-producto placeholder "Interesado en..." "Comprar nuestros productos" "Vender algún material" "Agendar una recolección" "Más información"]</div>
    <div class="column one">[textarea your-mensaje x6 placeholder "Mensaje"]</div>
    <div class="column one">[submit "Enviar mensaje"]</div>

    Help me, please!!! =)
  • What way you did not found? Can you explain what you mean exactly? Above we gave you all necessary details so we don't understand what is not clear enough.

  • How to change the text color inside in contact form? What code use in CSS CLASS to change only color text "Nombre", "Teléfono", "Correo", "Interesado en..." & "Mensaje" in black.


    The background color es gray and the text color too. I´m trying to change this color text in black so do not confused with the background in contact form.



  • To change this text color, please use:
    input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], select, textarea, .woocommerce .quantity input.qty { color: #FFF !important; }

  • That code use to change text color typed or typing. I´m interested in change color by default (placeholder) in contact form 7. For example:

    In contact form 7 the text in color GRAY "Your name" or "Your e-mail" change for Yellow. (The word "Your name" display in color yellow) 




  • Placeholders are rendered by browsers themselves and you can not change that default grey color.
Sign In or Register to comment.