Use Contact Form 7 Placeholder as Example Text

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

Tip: In this article, we show you how to use placeholders as example text, which gives further information on the inputs required on each form field.

Placeholder as Example Text

You can use placeholders to show an example of each field on your Contact Form 7 forms by adding it 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	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

Copy the Placeholder as Example Text 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: Drag over the contents of this box to highlight all the included text and copy the code (Ctrl+C on Windows, Command+C on Mac).

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

Have questions or need help?

If you are using the free version of CF7 Skins, you can get help via the CF7 Skins community and also the Contact Form 7 Support forum.

If you are using any of our Add-ons, we provide Premium Email Support to help with your questions and problems.