How to add and style text in Contact Form 7 fields for WordPress

Other Questions Wordpress
1

Hey folks! I’m working on a WordPress site and using Contact Form 7. I want to jazz up my form a bit. Does anyone know how to add text before the input fields? I figured out how to put text inside the fields using placeholders, like this:

[text your-name placeholder "Type your name"]

But now I’m wondering if there’s a way to change the color of that placeholder text. It would be great to make it match my site’s color scheme. Also, is it possible to add text before the field, not just inside it?

I’m pretty new to customizing forms, so any tips or code snippets would be super helpful. Thanks in advance for any advice!

2

Tom, here’s a solution for your Contact Form 7 styling needs. To add text before input fields, use the label tag as ClimbingLion suggested. For placeholder color, you’ll need to add some CSS to your theme or plugin. Here’s a more comprehensive approach:

  1. Add labels: [label your-name]Your Name:[/label] [text your-name]

  2. For placeholder color, add this CSS:

input::-webkit-input-placeholder {
color: #your-color;
}
input::-moz-placeholder {
color: #your-color;
}
input:-ms-input-placeholder {
color: #your-color;
}

Replace #your-color with your desired hex code. This covers most browsers. You might need to adjust specificity if it doesn’t work immediately. Let me know if you need further clarification!

3

As someone who’s been tinkering with Contact Form 7 for a while, I’ve found a neat trick for adding text before fields without using labels. You can use the ‘span’ tag like this:

[span class:before-field]Enter your name:[/span][text your-name]

This gives you more styling flexibility. For placeholder colors, I’ve had success with this CSS:

.wpcf7 ::-webkit-input-placeholder { color: #yourcolor; }
.wpcf7 ::-moz-placeholder { color: #yourcolor; }
.wpcf7 :-ms-input-placeholder { color: #yourcolor; }

Just add this to your theme’s custom CSS section. It targets Contact Form 7 specifically, so it won’t affect other forms on your site. Hope this helps you jazz up your form, Tom!

4

hey tom, try using a label before the input field: [label your-name]name:[/label] then the field. for colored placeholders, apply custom css on ::-webkit-input-placeholder selector (color: #yourhexcode:wink: hope that helps, let me know if u need more info