Customize form fields with Contact Form 7

[kmatan]

I’d like to remove the input box from each field.

I’m’ trying to recreate something similar to Contact

This example doesn’t show boxes - it has an underline where the content goes. It makes the whole form appearance much cleaner - although I can’t seem to find documentation that points out how you could remove the ‘box’ around each field?

Is there CSS that could get close?

My contact form is: http://bluepill.commandcreative.net/contact/

[christopher]

Hi @kmatan,

The customization request is outside of our support scope, unfortunately, but I will do my best to describe the method that you can use to achieve the look and feel you want.

The first step is to select the appropriate input boxes. Contact form 7 has the wpcf7 class as a wrapper for the form, and as you have three input boxes and one text area you will have a selector of CSS like:

.wpcf7 input[type="text"], .wpcf7 textarea {}

The code above says, select all the input boxes which are of type text and all text area elements within the container that has wpcf7 class. I used the Chrome Developer Toolbar to find out the class in question:
https://www.youtube.com/watch?v=wcFnnxfA70g

The trick to achieving the view in question is to set the border of the input boxes and text area to none on top, right and left and keep the border for the bottom section and change the color of the border to black. Please kindly here for more information about the CSS borders.

The last part is to change the background color of the input boxes and text area to transparent. Please click here for more information about CSS background colors.

All the CSS code should go to Pro > Theme Options > CSS.

I also did a Google Search that might help with your research to implement the customization.

Thank you.