What are form field placeholders?
Placeholders are attributes certain form fields can have. They can provide an example of what kind of content you want the user to fill out. For example, check out the two text fields below. The first one does not have a placeholder while the second one does. It immediately disappears as soon as you start typing something and returns when the field is empty.
Contact Form 7 Placeholders
In Contact Form 7, you can check the box “Use this text as the placeholder of the field” in a form tag generator. That will convert a regular text form tag from this…
[text input_name "Hello world"]… to this…
[text input_name placeholder "Hello world"]And that is reflected on the frontend by changing your input’s HTML from this…
<input name="input_name" value="Hello world" />… to this…
<input name="input_name" placeholder="Hello world" />This is limiting since you can only define either a default value or a placeholder value, not both. This is the case even if you simply add the placeholder option to a dynamic text form tag.
Dynamic Placeholders in DTX
In version 3.1.0 of Contact Form 7 – Dynamic Text Extension, you can have the placeholder cake and eat it too! You can set a dynamic value and a dynamic (or static) placeholder using the updated form tag generator for the dynamic text field.
In the form tag generator for the dynamic text field, you’ll see that there is a text field for “Dynamic placeholder” where you can simply type some static text or use a shortcode like the dynamic value field.
To work with Contact Form 7’s form tag syntax, the value you type into the text field undergoes two changes: it converts apostrophes to their HTML entity code and encodes the whole thing like a URL. This is what will allow you to use apostrophes in static text or shortcodes with attributes for dynamic content. Though the output looks less-than friendly.
Example
For an example, let’s dynamically get the user’s first name for logged-in users but if a user is not logged in, they’ll see our static placeholder text instead. We would choose to use the DTX shortcode to get current user info with our key attribute set to user_firstname to start like this:
[dynamictext first_name "CF7_get_current_user key='user_firstname'"]If I just wanted to simply use my dynamic value as the placeholder text, I’d simply add the placeholder option in the form tag just like in Contact Form 7. But this isn’t what we want, so we’re not done yet.
[dynamictext first_name placeholder "CF7_get_current_user key='user_firstname'"]The final step is adding the value to the placeholder option in the form tag and using UTF-8 encoding (spaces are converted to %20) and HTML entity codes for single quotes like this, placeholder:First%20Name, so the final form tag for a static text placeholder would look like this:
[dynamictext first_name placeholder:First%20Name "CF7_get_current_user key='user_firstname'"]If using a shortcode, your single quotes should be converted to ', then the whole string URL encoded, so a dynamic placeholder value might look like this for getting the user’s first name:
CF7_get_current_user%20key%3D%26%2339%3Buser_firstname%26%2339%3BWhich would make a rather ugly but functional form field tag like this:
[dynamictext first_name placeholder:CF7_get_current_user%20key%3D%26%2339%3Buser_firstname%26%2339%3B "CF7_get_current_user key='user_firstname'"]Happy form-making!
