This tutorial is about using the Contact Form 7 tag editor. To learn how to edit your form using the CF7 Skins visual editor, see Edit your CF7 Skins Form (CF7 Skins Visual Editor).
Starting a new form with Contact Form 7 gives you a default Contact Form within Contact Form 7’s form tag editor:
Select a Template
When you select a CF7 Skins Template, a form is automatically generated based on the template you chose. Each Template is like an easy to follow guide, which you can adjust by moving, adding, copying, and deleting fields.
Selecting a template will change default form provided by Contact Form 7. The form editor will be filled with the required HTML tags and Contact Form 7 tags.
Tip: If you are working on an existing form, we recommend making a backup copy of your Contact Form before continuing on with a new template.
Let’s say you select the CF7 Skins Contact Form Template:
The Contact Form 7 editor will now show your template’s form structure:
One thing you may notice is the brand new structure including a fieldset, legend, and lists. It is important to try and maintain this structure when editing your form. Read more about Why we use Fieldsets, Legend, and Lists.
Instead of learning HTML and tag syntax, many people find they can edit their form by copying and pasting fields and using the tag generator.
Edit existing field
If you want to edit the field label content, delete the existing text and enter your new text.
Going back to the Contact Form example, let’s change the form legend from ‘Contact Form’ to ‘Get in Touch’ and the ‘Your Name’ label to ‘First Name’.
First, delete the text ‘Contact Form’ and enter ‘Get in Touch’. Then, delete ‘Your Name (required)’ and enter ‘First Name’.
Remove a field
To remove a field you do not need, highlight the entire row and delete it.
For example, if you do not need the paragraph at the end of the form, highlight the entire paragraph and delete it.
Add a field
Re-use an existing field by:
- Copy and pasting the field or;
- Create a new field using the tag generator.
1. A copy and paste example is to add a new ‘Last Name’ field, copy and paste the ‘First Name’ row and change the label to ‘Last Name’. As best practice, you should also adjust the tag name from [text-967] to a different, relevant name such as [last-name].
Tip: If you want to copy a Fieldset section – be sure to grab everything between the
<fieldset></fieldset>tags.
2. To create a brand new field tag, click a tag name from the tag generator button area just above your form editor. Insert it into your form, then copy and paste it into the correct position.
For example, to add a field for a telephone number, click ‘tel’. This will open the edit options for this tag. Click Insert Tag and it will appear on your editor.
Tip: The tag will insert itself wherever your cursor was within the editor.
Highlight and copy your new [tel tel-425] tag and paste it where you want it to appear on your form. To maintain your form’s structure, don’t forget to enter the list <li></li> tags surrounding your new telephone tag.
To know which tags and fields you can add, take a look at Contact Form 7’s Tag Syntax Documentation. To check if you are changing the right field or label, try saving the form and previewing it after each change.
Important: If you select one template, edit it, then select another template, the form editor will overwrite any edits that you have made. Exit the page without saving to recover your form back to the last time you saved it.