Transparent Text Fields

Hi, I have a contact form which is overtop of an image, I would like to make the input fields transparent so the image is visible through the fields. This will require a boarder to be colored as well as the text itself so the entry will be visible. The form has a captcha box and a submit button,
Thank you in advance
scott

Do you have the form online already with the image background? If so, can you please share the URL where we can see the form on your site? Thank you.

Yes thank you
https://gordonwebsolutions.com

Hi Scott. You have quite a bit of CSS already that is targeting the fields in this form:

body #gform_wrapper_2 .gform_footer .gform_button,
body #gform_wrapper_2 .gform_page_footer .gform_button,
body #gform_wrapper_2 .gform_page_footer .gform_previous_button,
body #gform_wrapper_2 .gform_page_footer .gform_next_button,
body #gform_wrapper_2 .gfield#field_submit .gform-button {
 border-style: solid;
 color:#ffffff;
 background-color:#000000;
 border-color:#ffffff;
 border-width: 0px;
}
body #gform_wrapper_2 .gform_footer .gform_button:hover,
body #gform_wrapper_2 .gform_page_footer .gform_button:hover,
body #gform_wrapper_2 .gform_page_footer .gform_previous_button:hover,
body #gform_wrapper_2 .gform_page_footer .gform_next_button:hover,
body #gform_wrapper_2 .gfield#field_submit .gform-button:hover {
 border-style: solid;
 background-color:#1e73be;
}
body #gform_wrapper_2 .gform_footer button.mdc-button {
 color:#ffffff;
 background-color:#000000;
 border-color:#ffffff;
 border-width: 0px;
}
body #gform_wrapper_2 .gform_footer button.mdc-button:hover {
 border-style: none;
 background-color:#1e73be;
}
body #gform_wrapper_2 .gform_footer,
body #gform_wrapper_2 .gform_page_footer,
body #gform_wrapper_2 #field_submit.gfield {
}
body #gform_wrapper_2 .gform_body .gform_fields .gfield input[type=text],
body #gform_wrapper_2 .gform_body .gform_fields .gfield input[type=email],
body #gform_wrapper_2 .gform_body .gform_fields .gfield input[type=tel],
body #gform_wrapper_2 .gform_body .gform_fields .gfield input[type=url],
body #gform_wrapper_2 .gform_body .gform_fields .gfield input[type=password],
body #gform_wrapper_2 .gform_body .gform_fields .gfield input[type=number] {
 background-color:#000000;
 color:#ffffff;
 border-color:#ffffff;
 max-width:100%;
 border-width: 1px;
}
body #gform_wrapper_2 .gform_body .gform_fields .gfield textarea {
 border-width: 1px;
 background:#000000;
 border-color:#ffffff;
 color:#ffffff;
}
body #gform_wrapper_2 .gform_body .gform_fields .gfield .gfield_label {
 display:none ;
}

Rather than background-color:#000000; use background:transparent; - that will take care of letting the image show through your form fields. You already have color: #FFFFFF; which will make the text white.

You have already applied some styles to the submit button as well. Those will need to be tweaked, but you’re already on the right path with targeting the elements for form 2.

If you have any other questions, please let us know.

Chris, thank you, this worked perfectly. The one sticky part, which is not a dealbreaker, is the captcha box, the settings seams to be pushed from google, unless they can be overridden I am at a loss for how to edit the background.
Thank you,
Scott

That is pushed from Google - the reCAPTCHA is in an iFrame. You have the option for light or dark theme (this is in the field settings) but other than that, you’re stuck with what Google sends.

Try this CSS:

/* Change the background color */
.rc-anchor-dark {
    background: #f00 !important;
}

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.