A reflection widget reflects another control value. For example, when you change the value of the your-name field to “John Doe”, [reflection your-name] will reflect that and display “John Doe”. This will be useful when you want to let users confirm their input before submission.
Contact Form 7 provides two different form-tag types that represent this reflection widget: reflection and output. output is a lightweight variant of reflection; they both reflect user input value, but unlike reflection, output only reflects the first item of values. Also, while a reflection form-tag converts to a block-level element (fieldset), an output form-tag converts to an inline element. This means that you can use output form-tags embedded within a paragraph.
| Option | Examples | Description |
|---|---|---|
id:(id) | id:foo | id attribute value of the top level element. |
class:(class) | class:bar | class attribute value of the top level element. To set two or more classes, you can use multiple class: option, like [. |
Notice that reflection only occurs with fields that have been confirmed to have valid input values. Before validation, a reflection widget displays an empty string, or the default value you set for the form-tag.
Demo
This is a demonstration form; no email will be actually sent.
View the source of the above form:
Your country
[checkbox* your-country use_label_element "China" "India" "San Marino"]
[reflection your-country "(nothing selected)"]
<label> Choose number
[range* your-range min:10 max:99] </label>
You chose [output your-range "0"]