Free Fieldset template for Contact Form 7

With our free Fieldset templateTemplate CF7 Skins Templates are the structure of your form, providing the content and layout. They act as an easy to follow guide that can be adjusted to your particular needs., you can create your own form with separate segments quickly. Contact Form 7 (CF7) includes a default form template, but it is minimal and doesn’t give much help or guidance to new users.

Contact Form 7 Skins, our free plugin available in the WordPress plugin directory has many free templates available such as an improved Fieldset template.

In this article, we aim to help you get a head start on creating a Fieldset Form for your own WordPress (WP) site using our freely available Fieldset template. You can use this template to start creating forms on your own quickly.

1. Copy the free Fieldset template code

Firstly, you need to copy the Fieldset template code below:

<fieldset>
	<legend>Your Details</legend>
	<ol>
		<li>Name [text text-440]</li>
		<li>Email [email* email-968]</li>
		<li>Phone [tel tel-427]</li>
		<li>Message [textarea textarea-219]</li>
	</ol>
	<p>
		Use paragraphs for text that is not a form field.
	</p>
	<fieldset>
		<legend>Your Requirements</legend>
		<ol>
			<li>Checkboxes [checkbox checkbox-157 "Option 1" "Option 2" "Option 3"]</li>
			<li>Radio Buttons  [radio radio-124 default:1 "Yes" "No"]</li>
			<li>Dropdown Select [select select-620 "Item 1" "Item 2" "Item 3"]</li>
		</ol>
	</fieldset>
	[submit "Submit"]
	<p>
		* Required
	</p>
</fieldset>
<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pharetra vehicula. Aliquam pellentesque mi non scelerisque placerat.
</p>

Tip: Just drag over the contents of this box to highlight all the included text. Then press Copy – Ctrl+C in Windows, Command+C on Mac.

Further Reading:

• Edit your CF7 Skins Form (Contact Form 7 Editor)

2. Paste into Contact Form 7

Secondly, you must paste the code directly in your Contact Form 7 tag editor. You can find the tag editor in the Form tab.

Further Reading:

• How do I preview what my form will look like?

3. Save & preview in WordPress

Lastly, once you save the form, you can use the shortcode to generate a basic Contact Form for your WP site as shown in the form below.

This form was also made using CF7 Skins. You can re-create this exact styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. by selecting Sunshine as your CF7 Skins Style, which is available in our CF7 Skins Pro Add-on.

Further Reading:

• CF7 Skins – Styles
• Where can I get more Templates or Styles?

Alternatively — use Contact Form 7 Skins

You can also use CF7 Skins to make the process of adding a template even easier. Contact Form 7 Skins, our free plugin is available in WordPress plugin directory.

The features of CF7 Skins are:

1. Drag and drop form fields using the CF7 Skins Visual Editor
2. Edit each form element easily
3. Replicate the field with just one click
4. All Contact Form 7 tags available
5. Many Templates and Styles to choose from

Using CF7 Skins, you can create your form quickly as shown above. You can also try different options suitable for your forms easily without having to write a single line of code.

Further Reading:

• Staying Updated
• Free General Use template for Contact Form 7
• Free Contact Form template for Contact Form 7

---

What’s next?: Take a look at tips & tricks on quickly editing your form.

Did you know you can get more free templates (and styles) right now? Download the free CF7 Skins plugin and use any of our Contact Form 7 form templates.