How to add placeholder text in Contact Form 7

Contact Form 7 lets you put hint text inside an empty field, such as “Your name” or “+1 555 123 4567”, using the placeholder option. This guide shows the exact form tag for every field type that supports it, how select menus differ, how to style the text, how to handle Arabic and right-to-left forms, and what to check when a placeholder does not appear.

The examples were checked against Contact Form 7 version 6.2.

The short answer

Add the word placeholder to the form tag and put your text in straight double quotes:

[text your-name placeholder "Your name"]

Without the word placeholder, the quoted text would be a default value: real text sitting in the field that gets submitted unless the visitor deletes it. With placeholder, the same text becomes a hint that disappears when the visitor starts typing and is never submitted.

Placeholder text for each field type

Open Contact > Contact Forms, edit your form, and change the tags in the Form tab. The field name (for example your-name) can be anything, as long as it matches the mail template.

Text field

[text your-name placeholder "Your name"]

For a required field, add the asterisk to the type as usual. The placeholder works the same way:

[text* your-name placeholder "Your name"]

Email field

[email* your-email placeholder "[email protected]"]

An example address shows the expected format better than “Your email”.

Phone (tel) field

[tel your-phone placeholder "+971 50 123 4567"]

If you take enquiries from more than one country, showing the country code in the placeholder cuts down on numbers entered without it.

URL field

[url your-website placeholder "https://example.com"]

Number field

[number team-size min:1 max:500 placeholder "Number of people"]

Date field

[date start-date placeholder "Preferred start date"]

Contact Form 7 adds the placeholder to date fields, but most browsers draw their own date picker with a fixed format such as dd/mm/yyyy and do not show it. Put the hint in the label instead if it matters.

Textarea (message box)

[textarea your-message placeholder "Tell us what you need, and by when"]

Select menu (drop-down)

HTML select menus have no placeholder attribute, so Contact Form 7 uses two options instead:

[select* service first_as_label "Choose a service" "AI automation" "Online store" "Business website"]

first_as_label turns the first value into a prompt with an empty value. Combined with the asterisk, the visitor must pick a real option before the form will send.

[select service include_blank "AI automation" "Online store" "Business website"]

include_blank adds an empty first option with the plugin’s own wording, “Please choose an option”. Use first_as_label when you want to choose the wording yourself.

Fields without placeholders

Checkboxes, radio buttons, acceptance boxes and file uploads have nothing to type into, so there is no placeholder. Use the label or a short line of text above them.

A complete form template

Here is a full form using the tags above. Paste it into the Form tab and adjust the names to match your mail template:

<label> Your name
    [text* your-name autocomplete:name placeholder "Your name"] </label>

<label> Work email
    [email* your-email autocomplete:email placeholder "[email protected]"] </label>

<label> Phone or WhatsApp
    [tel your-phone autocomplete:tel placeholder "+966 5x xxx xxxx"] </label>

<label> Service
    [select* service first_as_label "Choose a service" "AI automation" "Online store" "Business website"] </label>

<label> Message
    [textarea* your-message placeholder "Tell us what you need, and by when"] </label>

[submit "Send message"]

The screenshot below is the form from the first version of this guide in the Contact Form 7 editor. It uses the same placeholder syntax without labels:

This is how the result looks on the page, with each hint shown in grey inside the empty fields:

Use labels as well as placeholders

Placeholder text vanishes the moment someone starts typing. On a long form, people forget which field they are in, and screen readers do not treat a placeholder as a reliable label. The Web Content Accessibility Guidelines (success criterion 3.3.2) ask for labels or instructions on every input, and a placeholder alone does not meet that reliably.

The template above keeps a <label> for each field and uses the placeholder for an example, not the field name. That gives you the tidy look of placeholder text without losing clarity.

Pre-filled values together with a placeholder

You can combine a placeholder with a default value that Contact Form 7 fills in from context. For example, logged-in users get their email address filled in, and everyone else sees the hint:

[email* your-email placeholder "[email protected]" default:user_email]

Style placeholder text with CSS

Placeholder color comes from the browser and your theme. To change it for Contact Form 7 forms only, add this to Appearance > Customize > Additional CSS (or your child theme stylesheet):

.wpcf7-form ::placeholder {
  color: #6b665d;
  opacity: 1; /* some browsers lower placeholder opacity by default */
}

.wpcf7-form input:focus::placeholder,
.wpcf7-form textarea:focus::placeholder {
  color: transparent; /* hide the hint once the field is focused */
}

Keep placeholder text readable: a mid grey on white with a contrast ratio of at least 4.5:1 is a safe target.

Placeholders in Arabic and right-to-left forms

On an Arabic page, write the placeholder in Arabic inside the same straight quotes. Replace the text below with your Arabic wording:

[text* your-name placeholder "Full name, written in Arabic"]

The form follows the page direction, so Arabic placeholders align to the right. Email addresses, phone numbers and URLs read better left to right even on an Arabic page. You can set that with CSS:

[dir="rtl"] .wpcf7-form input[type="email"],
[dir="rtl"] .wpcf7-form input[type="tel"],
[dir="rtl"] .wpcf7-form input[type="url"] {
  direction: ltr;
  text-align: right;
}

If your site runs in both languages, create a separate form for each language so labels, placeholders and validation messages all match the page.

Placeholder not showing? Check these

1. Curly quotes. Contact Form 7 reads only straight quotes (" or '). Text pasted from Word or Google Docs often brings in curly quotes, and the tag stops working. Retype the quotes in the form editor.
2. The word is missing or misspelled. Without placeholder, the text becomes a default value instead, so it appears as real text in the field.
3. A cached page. If you use a caching plugin or a CDN, clear the cache after saving the form.
4. Theme CSS. Some themes set placeholder color to match the background. Inspect the field in your browser and check the ::placeholder rule.
5. Date fields. As noted above, most browsers ignore placeholders on native date pickers.

Moving from Contact Form 7 to another form plugin

Contact Form 7 sends each submission by email and keeps no copy in WordPress. If you want every enquiry stored and searchable on your site, you do not have to rebuild your forms by hand. Some form plugins can read your Contact Form 7 forms and recreate them.

Neural Forms is a form plugin for WordPress made by Elicus, the company Anzum is part of. It saves every submission to a lead inbox inside WordPress and runs AI analysis on each one. The importer is included in the free version on WordPress.org:

1. Keep Contact Form 7 active, install Neural Forms and open Neural Forms > Import. The Import screen only appears while Contact Form 7 is active.
2. The list shows each Contact Form 7 form with its number of fields, the field types and whether it is compatible or only partly compatible.
3. Click Preview to see every field that will come across, with its type, label and whether it is required, plus any tags that will be skipped.
4. Click Import this form. Neural Forms creates a new form as a draft. Your Contact Form 7 form and your live pages stay as they are until you publish the new form and swap it in.

Text, email, URL, phone, number, date, textarea, select, checkbox, radio, acceptance, hidden and file fields are imported. The placeholder text you added with the tags above comes across on text, email, URL, phone, number and textarea fields.

Before you publish the imported form, check three things:

• Labels. They are built from the field names, so your-name becomes “Your Name”. Rename them to match your wording.
• Skipped tags. CAPTCHA, reCAPTCHA, Turnstile, Stripe and character count tags are not imported. Turn on spam protection in Neural Forms instead.
• Email notifications. The importer brings over your fields, not your Contact Form 7 mail settings. Set up the notification email on the new form and send a test before you switch.

Need a form that does more than send an email?

A contact form is often the start of a manual process: someone copies the details into a spreadsheet, a CRM or a WhatsApp chat. We build automations that take those enquiries and route them for you, with replies in your customers’ languages. If that sounds useful, talk to us.

Frequently asked questions

How do I add a placeholder in Contact Form 7?

Add the word placeholder to the form tag and put the text in straight double quotes, for example [text your-name placeholder "Your name"].

Which Contact Form 7 fields support placeholder text?

Text, email, tel, url, number, date and textarea fields. Select menus use first_as_label instead, and checkboxes, radio buttons and file uploads have no placeholder.

Why is my Contact Form 7 placeholder not showing?

The most common causes are curly quotes pasted from a word processor, a cached copy of the page, or theme CSS that makes placeholder text the same color as the background.

Can a field have both a placeholder and a default value?

Yes. The quoted text becomes the placeholder, and a default option such as default:user_email can still fill in a real value for logged-in users.

Should placeholder text replace the field label?

No. Placeholder text disappears as soon as someone starts typing and is often low contrast. Keep a visible label and use the placeholder for an example or a format hint.

What is the watermark option in Contact Form 7?

watermark is the older name for placeholder. Current versions still accept it and treat it the same way, but placeholder is the name to use in new forms.

How do I move my forms from Contact Form 7 to another plugin?

Use a form plugin with a Contact Form 7 importer. The free version of Neural Forms reads your Contact Form 7 forms, imports the fields and placeholders as a draft form, and leaves the original untouched. Check the labels, spam protection and email notifications before you publish.

Related

• On-page SEO task list for 2026

Print this page