Simple Way to Add Contact Form 7 Placeholder Text

Updated: December 20, 2020

I think no one will argue that people love contact forms. As you may have noticed, contact forms are everywhere. And while using contact forms, namely contact form 7 WordPress plugin, you have an option of using or not using placeholder text. Contact form 7 placeholder text is the text that already exists in your contact form fields when the page is loaded. It is meant to help your user understand what needs to be written inside the field and disappears or can be deleted when the user starts typing inside that field.

So, what if you already have a contact form, and want to add placeholder text?

It’s simple! In your WordPress dashboard go to Contact -> Contact Forms -> find the needed contact form and press the Edit button.

Find the code of the contact form in the From tab and add placeholder=”Whatever the placeholder text should say” for each filed, to which the placeholder needs to be added.

For example, I have this name filed here:

<p class="cols col-1">[text* your-name]</p>

If I want to add placeholder text to this field, I need to change it to this:

<p class="cols col-1">[text* your-name placeholder="Your Name"]</p>

Yes, it is that simple! Of course, if you are looking to remove Contact Form 7 placeholder text you need to do this procedure backward – remove the placeholder value from all the necessary form fields.

So, here’s the code of our sad contact form 7 without any placeholders:

<p class="cols col-1">[text* your-name]</p>
<p class="cols col-2">[email* your-email]</p>
<p class="cols col-wide">[text your-subject]</p>
<p class="cols col-wide">[textarea your-message]</p>
<p>[submit "SUBMIT"]</p>

Now, let’s add some placeholders so that it is not sad anymore:

<p class="cols col-1">[text* your-name placeholder="Your Name"]</p>
<p class="cols col-2">[email* your-email placeholder="Your Email"]</p>
<p class="cols col-wide">[text your-subject placeholder="Subject"]</p>
<p class="cols col-wide">[textarea your-message placeholder="Message"]</p>
<p>[submit "SUBMIT"]</p>

Look how beautiful the contact form looks now, once it has all the placeholders in place:

So, from this article, we learned how to add and removed placeholder text in Contact Form 7 WordPress plugin. I thank you all for visiting our site and how to see you again back here soon!