Use Better Contact Form 7 Placeholders

Once you start to add placeholders in your Contact Form 7 (CF7) forms, learning some different ways to use them, helps you to enhance your forms and ultimately your user’s experience.

In this article, we teach you some different ways to use placeholders in your Contact Form 7 forms.

Before you begin

Before you start using placeholders in your forms, there are a few things you need to know:

1. How to set up a CF7 Skins form
2. How to add placeholders using the CF7 Skins Visual Editor

Tip: In Add Better Contact Form 7 Placeholders, we discuss what placeholders are and various ways to add them.

Ways to use a Contact Form 7 placeholder

There are several ways you can use placeholders in your Contact Form 7 forms:

1. Placeholder as example

Use placeholders to show an example of each field.

2. Placeholder as instruction

Use placeholders to provide instruction on how to fill in the form fields.

3. Placeholder as secondary text

Use placeholders to give extra help to form users that you can’t fit easily in your form field labels.

In this article, we show you how to use placeholders in each of these ways in your Contact Form 7 forms.

1. Placeholder as example

You can use placeholders to show an example of each field on your Contact Form 7 forms by adding it as a placeholder code.

Using CF7 Skins Visual Editor

Tip: See How to add placeholders using the CF7 Skins Visual Editor for detailed step by step instructions.

You can copy the placeholder values used in this example:

Field	Default Value
your-name	John Doe
your-email	johndoe@gmail.com
your-message	I would like to ask you...

Try it yourself

Once you are satisfied with your changes, click Save Visual – your form should look like this:

Tip: This is a working example form – use the form yourself to see the placeholders in this example in action.

Using Contact Form 7 tag editor

Firstly, you need to copy the Placeholder as Example code below:

<label> Your Name (required)
    [text* your-name placeholder "John Doe"] </label>

<label> Your Email (required)
    [email* your-email placeholder "johndoe@gmail.com"] </label>

<label> Your Message
    [textarea your-message placeholder "I would like to ask you..."] </label>

[submit "Send"]

Tip: Just drag over the contents of this box to highlight all the included text. Then press Copy – Ctrl+C in Windows, Command+C on Mac.

Paste the copied code into your Contact Form 7 tag editor and save to preview the form. You can also update the placeholders as you need.

2. Placeholder as instruction

Moreover, you can also use placeholders to provide instruction on how to fill in the form fields.

For example, if you want your users to enter their full name in the Name field, you can add Enter your First Name, Middle Name, and Last Name as a placeholder.

Using CF7 Skins Visual Editor

Tip: See How to add placeholders using the CF7 Skins Visual Editor for detailed step by step instructions.

You can copy the placeholder values used in this example:

Field	Default Value
your-name	Enter your First Name, Middle Name and Last Name
your-email	Enter a valid email address
your-message	The character limit for your message is 300 words

Try it yourself

Once you are satisfied with your changes, click Save Visual – your form should look like this:

Tip: You can re-create this exact styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. by selecting Cargo as your CF7 Skins Style.

Using Contact Form 7 tag editor

Firstly, you need to copy the Placeholder as Instruction code below:

<label> Your Name (required)
    [text* your-name placeholder "Enter your First Name, Middle Name and Last Name"] </label>

<label> Your Email (required)
    [email* your-email placeholder "Enter a valid email address"] </label>

<label> Your Message
    [textarea your-message placeholder "The character limit for your message is 300 words"] </label>

[submit "Send"]

Tip: Just drag over the contents of this box to highlight all the included text. Then press Copy – Ctrl+C in Windows, Command+C on Mac.

Paste the copied code into your Contact Form 7 tag editor and save to preview the form. You can also update the placeholders as you need.

3. Placeholder as secondary text

Sometimes it’s really hard to explain all in the information you need to give help to form users in your form field labels. If you do the label can get very long and much more difficult to read.

In this case, you can use placeholders as secondary texts on your Contact Form 7 forms. You can add what you expect your form users to fill in each of the input fields by adding the necessary placeholder code.

For example, if you want your users to enter their first name, middle name, and last name separately in the three input fields of Name field, then you can add placeholders in each field.

Tip: To learn more about how to add the fields side by side, refer to Contact Form 7 Fields Side by Side.

Using CF7 Skins Visual Editor

Tip: See How to add placeholders using the CF7 Skins Visual Editor for detailed step by step instructions.

You can copy the placeholder values used in this example:

Field	Default Value
your-first-name	First Name
your-middle-name	Middle Name
your-last-name	Last Name
your-city	City
your-state	State/Province/Region
your-country	Country
your-email	Email Address
your-message	Your Message

Try it yourself

Once you are satisfied with your changes, click Save Visual – your form should look like this:

Tip: This form uses CF7 Skins Ready to arrange related fields on a single line to make the form easier for users to complete.

Using Contact Form 7 Tag Editor

Firstly, you need to copy the Placeholder as Secondary Text code below:

<fieldset>
	<legend>Contact Us</legend>
	<ol class="singleline">
		<li>Name (required) [text* your-first-name placeholder "First Name"]</li>
		<li>. [text* your-middle-name placeholder "Middle Name"]</li>
		<li>. [text* your-last-name placeholder "Last Name"]</li>
	</ol>
	<ol class="singleline">
		<li>Address (required) [text* your-city placeholder "City"]</li>
		<li>. [text* your-state placeholder "State/Province/Region"]</li>
		<li>. [text* your-country placeholder "Country"]</li>
	</ol>
	<ol>
		<li>Email Address [email your-email]</li>
		<li>Message [textarea your-message]</li>
	</ol>
</fieldset>
[submit "Send"]

Tip: Just drag over the contents of this box to highlight all the included text. Then press Copy – Ctrl+C in Windows, Command+C on Mac.

Paste the copied code into your Contact Form 7 tag editor and save to preview the form. You can also update the placeholders as you need.

Further Reading

• Add Better Contact Form 7 Placeholders
• Better Contact Form 7 Checkboxes & Radio Buttons
• Contact Form 7 Fields Side by Side