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:
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:
Use placeholders to show an example of each field.
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.