This is likely due to CSS styling applied to standard HTML form elements within your current WordPress theme.
You need to have theme that provides responsive CSS styling for standard HTML form elements. Unfortunately many WordPress themes do not do this.
Alternatively to change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.
See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.
I added the following code using the My Custom CSS plugin:
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea
{
background-color: #fff;
color: #000;
width: 50%;
}
The problem persists. I also tried recreating the contact form using a different plugin (Fast Secure Contact Form) and still had the same problem.
How can I solve this?
Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.
You can learn about these extremely useful developer tools at the following links:
https://getfirebug.com/wiki/
http://www.evotech.net/blog/2007/06/introduction-to-firebug/
http://www.youtube.com/watch?v=sHbYpl1XFiM
http://www.tipsandtricks-hq.com/debugging-javascript-code-with-firebug-1899
https://developers.google.com/chrome-developer-tools/
