Extra Fields: Star Ratings, Sliders, Phone Numbers and More

Q: How do I add a range slider?

Screen readers announce the new value as it changes. Use [cf7m-range* to make it required.

Q: How do I add a heading?

level sets the heading size, from 1 to 6. The default is 3. You can also set font_size:20px, font_family:"Inter" and color:#111827.

Q: How do I add a separator or a gap?

style can be solid, dashed, dotted or double. Use style:space for empty space with no line. margin is the space above and below, in pixels. The default is a thin solid grey line with 20 pixels of space.

Q: How do I add an image?

You can set src, alt, width and height. The browser loads the image from its address, so a file in your own media library keeps visitors from contacting another site.

Q: How do I add an icon?

name is any WordPress Dashicon, such as dashicons-phone or dashicons-calendar. size is in pixels, from 8 to 96. To use your own picture, set src to an image address instead of name.

Q: Why is my option ignored?

Options are written as name:value with no spaces around the colon. Put values that contain spaces in quotes where the option allows it, such as label:"Phone number".

Add star ratings, range sliders, international phone numbers, headings, separators, images and icons to a Contact Form 7 form, with the exact tags and options.

CF7 Mate adds the fields Contact Form 7 is missing. Ask for a rating, a budget or a phone number with a country code, and break the form up with headings, lines and images. Each field has a button above the Contact Form 7 form editor that writes its tag.

Turn on the fields you want under CF7Mate → Settings. Most of them start on.

How do I add a star rating?

<label>How did we do? [cf7m-star* rating max:5]</label>

Option	What it does
`max:5`	Number of stars, from 1 to 10. The default is 5.
`default:0`	Stars chosen when the form loads. 0 means none.
`color:#f59e0b`	Colour of the chosen stars.

Visitors can use the arrow keys, Home and End to pick a rating. Add * after the tag name to make it required: an empty rating is then rejected on the server.

How do I add a range slider?

<label>Budget [cf7m-range budget min:0 max:5000 step:100 default:1000 prefix:$]</label>

Option	What it does
`min:0` and `max:100`	Lowest and highest values. The defaults are 0 and 100.
`step:1`	How far each move goes. Decimals work, such as `step:0.5`.
`default:50`	Starting value. The default is 50.
`prefix:$` or `suffix:kg`	Text shown before or after the value.
`track:#e5e7eb` and `thumb:#2563eb`	Colours of the bar and the handle.

Screen readers announce the new value as it changes. Use [cf7m-range* to make it required.

How do I add a phone number with a country code?

[cf7m-phone* your-phone default:GB label:"Phone number"]

Option	What it does
`default:GB`	The country selected first, as a two-letter code. The default is US.
`placeholder:07700900000`	Example text inside the field.
`label:"Phone number"`	A label linked to the field.
`description:"We only call about your order"`	Help text under the field.

Visitors pick a country, and the full number arrives in your email. It still works when JavaScript is off.

How do I add a heading?

[cf7m-heading level:3]Your details[/cf7m-heading]

level sets the heading size, from 1 to 6. The default is 3. You can also set font_size:20px, font_family:"Inter" and color:#111827.

How do I add a separator or a gap?

[cf7m-separator style:dashed color:#e5e7eb margin:24 width:2px]

style can be solid, dashed, dotted or double. Use style:space for empty space with no line. margin is the space above and below, in pixels. The default is a thin solid grey line with 20 pixels of space.

How do I add an image?

[cf7m-image src:"https://example.com/logo.png" alt:"Company logo" width:200]

You can set src, alt, width and height. The browser loads the image from its address, so a file in your own media library keeps visitors from contacting another site.

How do I add an icon?

[cf7m-icon name:dashicons-email size:24]

name is any WordPress Dashicon, such as dashicons-phone or dashicons-calendar. size is in pixels, from 8 to 96. To use your own picture, set src to an image address instead of name.

FAQ

Do these fields appear in emails and responses?

Ratings, slider values and phone numbers are submitted like any other field. Use their names in the Mail tab, such as [rating]. Headings, separators, images and icons are only for layout.

Why is my option ignored?

Options are written as name:value with no spaces around the colon. Put values that contain spaces in quotes where the option allows it, such as label:"Phone number".

What should I do next?

Show fields only when they matter with conditional logic, then style the form.