Contact Form 7 Templates

What should this form help you do?

Pick the smallest set of questions that lets you act on a request. Each example includes the complete Form tab markup, a field explanation and matching notification fields.

General contact form

Give visitors a short, clear way to ask a question. Choose this template when a name, reply address and message give you enough information to start a conversation.

<div class="cf7tb-template">
  <p><label>Your name (required)<br>
  [text* your-name autocomplete:name]</label></p>

  <p><label>Your email (required)<br>
  [email* your-email autocomplete:email]</label></p>

  <p><label>Subject (optional)<br>
  [text your-subject]</label></p>

  <p><label>Your message (required)<br>
  [textarea* your-message]</label></p>

  <p>[submit "Send message"]</p>
</div>

Name: [your-name]
Email: [your-email]
Subject: [your-subject]

Message:
[your-message]

Quote request form

Collect the context needed to prepare a quote: what the visitor wants, the scope of the request, and any timing or budget preferences. Use this for product, service or project inquiries.

<div class="cf7tb-template">
  <p><label>Your name (required)<br>
  [text* your-name autocomplete:name]</label></p>

  <p><label>Your email (required)<br>
  [email* your-email autocomplete:email]</label></p>

  <p><label>Company (optional)<br>
  [text company-name autocomplete:organization]</label></p>

  <p><label>Request type (required)<br>
  [select* request-type first_as_label "Choose a request type" "Product" "Service" "Project" "Not sure"]</label></p>

  <p><label>Requirements (required)<br>
  [textarea* project-details placeholder "Describe the product, quantity or project scope."]</label></p>

  <p><label>Preferred timing (optional)<br>
  [text preferred-timeline]</label></p>

  <p><label>Budget range and currency (optional)<br>
  [text budget-range]</label></p>

  <p>[submit "Request a quote"]</p>
</div>

Name: [your-name]
Email: [your-email]
Company: [company-name]
Request type: [request-type]
Preferred timing: [preferred-timeline]
Budget range: [budget-range]

Requirements:
[project-details]

Support request form

Ask for the affected product or service, a short issue summary and the details needed to investigate. Optional reference and environment fields help identify the context without blocking a new request.

<div class="cf7tb-template">
  <p><label>Your name (required)<br>
  [text* your-name autocomplete:name]</label></p>

  <p><label>Your email (required)<br>
  [email* your-email autocomplete:email]</label></p>

  <p><label>Product or service (required)<br>
  [text* product-service]</label></p>

  <p><label>Order or reference (optional)<br>
  [text order-reference]</label></p>

  <p><label>Website URL (optional)<br>
  [url website-url placeholder "https://example.com"]</label></p>

  <p><label>Issue summary (required)<br>
  [text* issue-summary]</label></p>

  <p>Do not include passwords, license keys or payment details.</p>

  <p><label>Issue details (required)<br>
  [textarea* issue-details placeholder "Describe the steps, what you expected and what happened."]</label></p>

  <p><label>Environment (optional)<br>
  [textarea environment-details placeholder "Add relevant software versions, browser or device details."]</label></p>

  <p>[submit "Send support request"]</p>
</div>

Name: [your-name]
Email: [your-email]
Product or service: [product-service]
Order or reference: [order-reference]
Website URL: [website-url]
Issue summary: [issue-summary]

Issue details:
[issue-details]

Environment:
[environment-details]

How to use these Contact Form 7 templates

These are copy-and-paste starters for the core Contact Form 7 plugin. You do not need a paid addon to use the fields. Keep a copy of any existing form before replacing its markup.

1. Open a new contact form

   Keep Contact Form 7 installed and active. In WordPress, open Contact and add a new contact form. Give it a clear name such as "Quote request".

2. Paste the Form code

   Replace the new form's default markup with one complete Form tab block above. Paste the code itself, without code fences. CF7 supplies the outer form element.

3. Adapt the questions

   Edit visible labels and select options for your business. An asterisk in a form-tag, such as text*, makes that field required. Keep field names unique within each form.

4. Connect the notification

   Use the matching Message body snippet. Set your recipient, sender, subject and reply header using the settings below. Update mail-tags if you rename or remove fields.

5. Save and embed

   Resolve configuration warnings and save. Copy the shortcode generated for this saved form. In Bricks, paste it into a Shortcode element on the destination page, then save the page.

6. Check the live result

   Load the shared sizing CSS below if needed. Test the actual page on desktop and mobile, then check validation and receipt of a test notification before using the form publicly.

.wpcf7 .cf7tb-template,
.wpcf7 .cf7tb-template * { box-sizing: border-box; }
.wpcf7 .cf7tb-template { width: 100%; min-width: 0; }
.wpcf7 .cf7tb-template p { margin: 0 0 18px; }
.wpcf7 .cf7tb-template label,
.wpcf7 .cf7tb-template .wpcf7-form-control-wrap { display: block; }
.wpcf7 .cf7tb-template :is(
  input[type="text"], input[type="email"],
  input[type="url"], select, textarea
) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 16px;
}
.wpcf7 .cf7tb-template textarea { resize: vertical; }
.wpcf7 .cf7tb-template .wpcf7-submit { max-width: 100%; }
.wpcf7 .cf7tb-template .wpcf7-not-valid-tip { overflow-wrap: anywhere; }

Finish the notification settings

Use the values below with the message-body block for your chosen form. Replace both example email addresses with addresses configured for your own website.

All three forms use the required email field your-email, so the same reply header works. If you change that field name, change the header too. An email-format check does not verify ownership of the address. For full mail configuration guidance, see Contact Form 7: setting up mail.

Before you put the form to work

• Submit with a required field missing and confirm that the field error is readable.
• Leave optional fields empty and confirm that the request can still be submitted.
• Send a test request on your own site. Check the received notification for every field, including select values and longer messages.
• Check that replying to the notification addresses the test visitor. A success message alone does not confirm inbox delivery.
• Review phone widths, keyboard focus and error messages on the actual page. Add any privacy notice or consent controls your use case requires.

Questions about using the templates

Give the form the right presentation