CF7 Mate Ultimate Guide: The Complete Contact Form 7 Extension

What is CF7 Mate?

CF7 Mate is a WordPress plugin that extends Contact Form 7 with 19 features across styling, advanced fields, form management, and automation.

The name: Also called “Styler Mate for Contact Form 7.”

What it adds to Contact Form 7:

• Visual styling inside Divi, Elementor, and Bricks Builder
• Advanced field types (star ratings, sliders, phone numbers, headings, images, icons, separators)
• Multi-step forms with progress indicators
• Conditional logic to show/hide fields
• Database storage for all submissions (view, filter, export to CSV)
• Live calculators and price estimators
• Webhook integrations to Zapier, Make, CRMs, and custom APIs
• AI-powered form generation
• One-click design presets

Free vs. Pro:

• Free: 9 features (3 builder integrations, grid layout, 5 field types)
• Pro: 10 additional features (multi-step, conditional logic, entries, webhooks, calculator, and more)

---

Who is CF7 Mate for?

Site owners & businesses:

• Collecting leads, quotes, or customer feedback
• Running surveys or applications
• Need forms that look professional without hiring a developer

Designers & agencies:

• Building client sites in Divi, Elementor, or Bricks
• Want visual control over form styling
• Need advanced features (multi-step, conditional logic) without custom code

Non-technical users:

• Want to style forms without learning CSS
• Need to save form data without setting up external services
• Want simple automation (send submissions to Google Sheets, CRM, etc.)

Developers:

• Need a faster way to build complex forms
• Want webhook integrations for custom workflows
• Prefer working in a visual builder for forms

---

Why Use CF7 Mate?

Problems It Solves

Problem 1: Contact Form 7 forms look generic and don’t match your site design

• Solution: CF7 Mate adds native modules for Divi, Elementor, and Bricks so you can style forms visually (colors, spacing, typography, borders, buttons) without writing CSS.

Problem 2: CF7 only offers basic field types

• Solution: CF7 Mate adds star ratings, range sliders, phone number fields with country codes, separators, headings, images, and icons.

Problem 3: Long forms overwhelm visitors and reduce completion rates

• Solution: Multi-step forms (Pro) split one form into several screens with Next/Back buttons and a progress indicator.

Problem 4: You only get submissions via email (no backup, no searchable database)

• Solution: Form Entries (Pro) saves every submission to your WordPress database. View, filter, mark as read/spam, and export to CSV.

Problem 5: You need to show/hide fields based on user choices

• Solution: Conditional Logic (Pro) shows or hides fields dynamically (e.g., show “Company name” only if “Are you a business?” is Yes).

Problem 6: You want to integrate forms with Zapier, CRMs, or your own API

• Solution: Webhook (Pro) sends each submission as JSON to any URL in the background.

Problem 7: Building forms from scratch is time-consuming

• Solution: AI Form Generator (Pro) creates CF7 form markup from a natural language description (e.g., “contact form with name, email, phone, and message”).

Problem 8: You need live calculations (quotes, price estimators)

• Solution: Calculator (Pro) updates totals in real time as users type or select options.

---

1. Divi Styler Module (Free)

What it does: Places Contact Form 7 forms inside the Divi Builder and gives you visual control over all styling (colors, spacing, typography, borders, buttons, validation messages).

Why it matters:

• No CSS required
• Forms look like part of your Divi-built pages
• Works in both Divi 4 and Divi 5

Example use case: You’re building a landing page in Divi and want the contact form to match your brand colors, fonts, and button styles.

How to use:

1. Edit a page with Divi Builder.
2. Add the “CF7 Styler” (or “CF7 Mate”) module from the Divi module list.
3. In the module settings, choose your Contact Form 7 form from the dropdown.
4. Use the Design and Content tabs to customize layout, spacing, colors, and field styles.
5. Save and view the page.

Requirements:

• Contact Form 7 plugin installed and active
• Divi Theme installed and active

---

2. Bricks Styler Element (Free)

What it does: Places Contact Form 7 forms inside Bricks Builder with full visual styling control.

Why it matters:

• Bricks users get a native element for CF7
• Design forms without leaving the builder
• Consistent styling workflow

Example use case: You’re using Bricks to build a portfolio site and want a styled contact form on your contact page.

How to use:

1. Edit a page with Bricks Builder.
2. Search for “CF7 Mate” or “CF7 Styler” in the element panel and add it.
3. In the element settings, choose your Contact Form 7 form.
4. Use the style controls to customize fields, labels, buttons, spacing, colors, and typography.
5. Save and preview the page.

Requirements:

• Contact Form 7 plugin installed and active
• Bricks Builder installed and active

---

3. Elementor Styler Widget (Free)

What it does: Places Contact Form 7 forms inside Elementor with visual styling options.

Why it matters:

• Elementor users get a dedicated widget for CF7
• Style forms using Elementor’s familiar interface
• No need for separate form styling plugins

Example use case: You’re building a service page in Elementor and want the inquiry form to match your section design.

How to use:

1. Edit a page with Elementor.
2. Search for “CF7 Mate” or “CF7 Styler” in the widget panel and drag it onto your page.
3. In the widget settings, choose your Contact Form 7 form.
4. Use the Content and Style tabs to customize fields, labels, buttons, spacing, colors, and typography.
5. Save and preview the page.

Requirements:

• Contact Form 7 plugin installed and active
• Elementor installed and active

---

Enhanced Form Fields (Free)

These features add new field types to Contact Form 7.

---

4. Grid Layout (Free)

What it does: Arranges form fields in a responsive grid (e.g., 2–3 columns) instead of a single column.

Why it matters:

• Forms with many short fields look cleaner
• Better use of screen space
• Stacks automatically on smaller screens

Example use case: A registration form with first name, last name, email, and phone can show two fields per row on desktop.

How to use:

1. Add the CF7 Styler module (Divi, Bricks, or Elementor) to your page.
2. Select your Contact Form 7 form.
3. In the module’s Design or Layout settings, find grid/column options.
4. Set how many columns you want on desktop (usually 2 or 3).
5. Save. The layout stacks on mobile automatically.

Best for: Forms with many short fields (name, email, phone, city, etc.).

---

5. Star Rating Field (Free)

What it does: Adds a star rating input (e.g., 1–5 stars) for reviews and feedback.

Why it matters:

• Clearer than text input for ratings
• Better mobile experience
• Less prone to invalid input

Example use case: A customer feedback form asks “How satisfied were you with our service?” with a 5-star rating.

How to use:

1. In WordPress admin, go to Contact → Contact Forms and edit a form.
2. Click the “CF7 Mate” or “Star Rating” tag button to open the tag generator.
3. Add a star rating field: set name, number of stars, and optional default.
4. Insert the tag into the form and save.
5. Add the form to a page with the CF7 Styler module. Style the stars in the module’s design options if needed.

Submitted value: The selected number (e.g., 4 for 4 stars).

---

6. Range Slider Field (Free)

What it does: Adds a slider control for picking a value within a range (e.g., 0–100).

Why it matters:

• Intuitive for numeric input
• No typing needed
• Good for mobile

Example use case: A quote request form asks “What’s your budget?” with a slider from $500 to $10,000.

How to use:

1. Edit a Contact Form 7 form (Contact → Contact Forms).
2. Open the CF7 Mate / Range Slider tag generator.
3. Add a slider: set name, min, max, default, and step.
4. Insert the generated tag into the form and save.
5. Place the form on a page with the CF7 Styler module. Style the slider in the module’s design settings if needed.

Use for: Satisfaction (0–10), budget range, quantity, or any numeric choice where a slider is clearer than a number input.

---

7. Separator Field (Free)

What it does: Adds a horizontal line (divider) between parts of the form.

Why it matters:

• Long forms are easier to scan
• Sections are visually separated
• No input; display only

Example use case: A job application form has a separator between “Personal information” and “Work experience.”

How to use:

1. Edit your Contact Form 7 form (Contact → Contact Forms).
2. Use the CF7 Mate Separator tag generator to insert a separator tag where you want the line.
3. Save the form.
4. Add the form to a page with the CF7 Styler module. Style the line (thickness, color) in the module’s design options.

Helps with: Organizing long forms and improving readability.

---

8. Image Field (Free)

What it does: Inserts an image inside the form (e.g., product photo, diagram, instruction graphic).

Why it matters:

• Show what you’re asking about
• Break up long forms
• Add branding or context

Example use case: A product inquiry form shows a photo of the product above the message field.

How to use:

1. Edit your Contact Form 7 form (Contact → Contact Forms).
2. Use the CF7 Mate Image tag generator: choose or upload an image, set size/alignment if available.
3. Insert the tag and save the form.
4. Place the form with the CF7 Styler module on a page. Adjust image size or spacing in the module’s design options.

Note: Display only; no data is submitted.

---

9. Icon Field (Free)

What it does: Adds an icon (e.g., checkmark, info, warning) next to or above form content.

Why it matters:

• Highlights important notes or steps
• Makes forms look more polished
• Helps with visual hierarchy

Example use case: A newsletter signup form has an info icon next to “We’ll never share your email.”

How to use:

1. Edit your Contact Form 7 form (Contact → Contact Forms).
2. Open the CF7 Mate Icon tag generator, pick an icon and optional size/position.
3. Insert the tag into the form and save.
4. Add the form to a page with the CF7 Styler module. Style the icon in the module’s design options if needed.

Note: Display only; no data is submitted.

---

Advanced Layout & Design (Pro)

These Pro features give you more control over form layout and appearance.

10. Multi Column (Pro)

What it does: Advanced multi-column layouts with control over breakpoints (e.g., 3 columns on desktop, 2 on tablet, 1 on mobile).

Why it matters:

• Finer control than the free grid layout
• Complex forms stay readable on all devices
• Custom column counts per screen size

Example use case: A long application form shows 3 fields per row on desktop, 2 on tablet, and 1 on mobile.

How to use:

1. Enable “Multi Column” in CF7 Mate → Modules (Pro).
2. Add the CF7 Styler module to a page and select your form.
3. In the module’s layout/design settings, use the column and breakpoint options to set how many columns show at each width.
4. Save. The form follows your column rules on different devices.

Best for: Long applications, multi-part surveys, or any form needing precise responsive control.

---

11. Design Presets (Pro)

What it does: One-click styling presets (e.g., Minimal, Dark, Bordered) that apply colors, spacing, and field styles instantly.

Why it matters:

• Consistent, professional looks in seconds
• Good starting point for customization
• Try different styles quickly

Example use case: You want a clean, minimal contact form. Apply the “Minimal” preset, then tweak colors to match your brand.

How to use:

1. Enable “Presets” in CF7 Mate → Modules (Pro).
2. Add the CF7 Styler module to a page and select your form.
3. In the module’s design or content settings, find the Preset option.
4. Choose a preset (e.g., Minimal, Rounded, Dark).
5. Save. You can still adjust individual options after applying.

Use for: Quick styling or exploring design options before customizing.

---

Form Management & Data (Pro)

These Pro features help you manage submissions and build smarter forms.

---

12. Form Entries / Database Entries (Pro)

What it does: Saves every form submission to your WordPress database so you can view, search, filter, mark as read, and export to CSV.

Why it matters:

• No dependency on email only
• One place for all form data
• Easy backup and reporting
• No need for a separate forms-entries plugin

Example use case: You run a lead generation site and want to view all submissions in one place, mark them as contacted, and export to a spreadsheet.

How to use:

1. Enable “Form Entries (Database Entries)” in CF7 Mate → Modules (Pro).
2. Submissions are saved automatically.
3. Go to CF7 Mate → Entries to see them.
4. Filter by form, date, or status; open a submission to view all fields; mark as read or spam; delete single or bulk; export to CSV.

Access: Only admins (or users you allow) can see the Entries screen. Entries are stored as a custom post type.

---

13. Multi Step Forms (Pro)

What it does: Splits one form into several steps (screens) with Next/Back buttons and an optional progress indicator.

Why it matters:

• Long forms feel shorter and less overwhelming
• Completion rates often improve
• All data is submitted together at the end

Example use case: A job application form has 3 steps: Step 1 (Personal info), Step 2 (Experience), Step 3 (References).

How to use:

1. Enable “Multi Step Forms” in CF7 Mate → Modules (Pro).
2. In your Contact Form 7 form, add step tags (e.g., [step 1], [step 2]) where each step should start. Use the CF7 Mate tag generator or shortcode as documented.
3. Save the form.
4. Add the form to a page with the CF7 Styler module. The module shows one step at a time with Next/Back; you can style the progress indicator in the module settings.

Best for: Surveys, applications, registrations, or any form with more than 5–7 fields.

---

14. Conditional Logic (Pro)

What it does: Shows or hides form fields based on what the user chose in another field.

Why it matters:

• Shorter, more relevant forms
• Less clutter
• Higher completion rates

Example use case: A contact form asks “Are you a business?” If Yes, a “Company name” field appears. If No, it stays hidden.

How to use:

1. Enable “Conditional Logic” in CF7 Mate → Modules (Pro).
2. In your Contact Form 7 form, add the fields that will control visibility (e.g., dropdown or radio) and the fields that should show only in certain cases.
3. Use the conditional logic tag or shortcode to define rules: “Show field X when field Y equals Z.”
4. Save the form and add it with the CF7 Styler module. Conditional fields appear or disappear as the user changes the controlling field.

Reduces: Clutter and makes long forms feel shorter by showing only relevant questions.

---

15. Calculator / Price Estimator (Pro)

What it does: Shows live calculations (e.g., quote total, order total) based on form field values.

Why it matters:

• Interactive quotes and price estimators
• Users see the result before submitting
• The calculated value can be included in the submission

Example use case: A service quote form: user enters quantity and selects options. The total updates as they type.

How to use:

1. Enable “Calculator / Price Estimator” in CF7 Mate → Modules (Pro).
2. Edit your Contact Form 7 form. Add the calculator/price tag via the CF7 Mate tag generator: define which fields are inputs and how to compute the result (formula or rules).
3. Insert the tag and save the form.
4. Add the form with the CF7 Styler module. The calculated value updates in real time; style the output in the module if needed.

Use for: Quotes, order totals, or any form where you want an instant total from user inputs.

---

Automation & Integrations (Pro)

These Pro features connect your forms to external services and workflows.

---

16. Webhook (Pro)

What it does: Sends each form submission to one or more URLs you choose. The payload is JSON (form ID, title, submitted time, all field data, IP, user agent).

Why it matters:

• Automation without extra plugins
• Real-time sync to Zapier, Make, CRMs, Google Sheets, or custom APIs
• No need for email parsing

Example use case: Every contact form submission is sent to Zapier, which adds a row to Google Sheets and creates a task in Asana.

How to use:

1. Enable “Webhook” in CF7 Mate → Modules (Pro).
2. Go to CF7 Mate → Webhook. Add the URL(s) that should receive the data (e.g., from Zapier, Make, or your server). Click Save URLs.
3. When someone submits any CF7 form on your site, a POST request is sent to each URL with the submission data in the body. Requests are sent in the background so the user isn’t delayed.
4. To test: use a service like webhook.site, add its URL in Webhook settings, submit a form, then check the request on webhook.site.

Requirements: Your endpoint should accept POST and JSON. You can filter by form_id in the payload if you only want to handle certain forms.

---

17. Phone Number Field (Pro)

What it does: A phone input with country selector (and often flags). Users pick country code and type their number; the value is sent in a consistent format.

Why it matters:

• Correct format and country code
• Better for international contacts
• Works with CRM/automation tools

Example use case: A support form collects phone numbers from customers worldwide. The phone field validates the format and includes the country code.

How to use:

1. Enable “Phone Number Field” in CF7 Mate → Modules (Pro).
2. Edit a Contact Form 7 form (Contact → Contact Forms). Use the CF7 Mate Phone Number tag generator: set the field name and any default country.
3. Insert the tag and save the form.
4. Add the form with the CF7 Styler module. Style the phone field in the module’s design options if needed.

Use anywhere: You collect phone numbers to get the country code + number without extra plugins.

---

18. AI Form Generator (Pro)

What it does: Creates a Contact Form 7 form from a short description (e.g., “contact form with name, email, subject, message”).

Why it matters:

• Faster form creation
• Useful for non-technical users
• Quick iterations

Example use case: You need a survey form. You describe it: “Survey with name, email, rating 1-5, and a message.” The AI generates the CF7 form markup.

How to use:

1. Enable “AI Form Generator” in CF7 Mate → Modules (Pro).
2. Go to CF7 Mate → AI Settings. Add your API key for the provider you want (e.g., OpenAI, Anthropic). Save.
3. Open the form generator: from the dashboard or when adding/editing a form, use the AI generate option. Enter a prompt like “Contact form with name, email, phone, and message.”
4. Review the generated form and fields. Edit in Contact Form 7 if needed, then save.
5. Add the form to a page with the CF7 Styler module and style as usual.

Best for: Quickly starting new forms. You still control the final form and styling.

---

19. Heading Field (Pro)

What it does: Inserts a heading (H1–H6) inside the form to label sections.

Why it matters:

• Clear sections
• Better accessibility
• Forms are easier to read and navigate

Example use case: A registration form has an H3 heading “Your details” above the name/email fields, then “Additional info” above the message field.

How to use:

1. Enable “Heading Field” in CF7 Mate → Modules (Pro).
2. Edit your Contact Form 7 form. Use the CF7 Mate Heading tag generator: choose level (H1–H6) and type the heading text.
3. Insert the tag and save the form.
4. Place the form with the CF7 Styler module. Style headings in the module’s design (font size, color, spacing).

Note: Display only; no data is submitted.

---

FAQ

1. What is CF7 Mate?

CF7 Mate (also called Styler Mate for Contact Form 7) is a WordPress plugin that extends Contact Form 7 with 19 features: visual styling in Divi/Elementor/Bricks, advanced field types, multi-step forms, conditional logic, database storage, webhooks, and more.

2. Do I need Contact Form 7?

Yes. CF7 Mate is an extension for Contact Form 7. You need to install and activate Contact Form 7 (free plugin) first.

3. Do I need a page builder?

Not required, but recommended. CF7 Mate includes native modules for Divi, Elementor, and Bricks Builder.

4. What’s the difference between free and Pro?

Free (9 features): 3 builder integrations (Divi, Bricks, Elementor), grid layout, 5 field types (star rating, slider, separator, image, icon).

Pro (10 features): Multi-step forms, conditional logic, form entries (database), phone number field, heading field, calculator, AI form generator, presets, webhook, multi-column.

5. How do multi-step forms work?

You add step tags (e.g., [step 1], [step 2]) in your Contact Form 7 form. The module shows one step at a time with Next/Back buttons. All data is submitted together at the end.

6. Where are form submissions saved?

If you enable Form Entries (Pro), submissions are saved to your WordPress database. You can view them in CF7 Mate → Entries. Otherwise, submissions are sent via email only (Contact Form 7 default).

7. Can I export form submissions?

Yes, if you enable Form Entries (Pro). Go to CF7 Mate → Entries and export to CSV.

8. What is the Webhook feature?

Webhook (Pro) sends each form submission as JSON to one or more URLs you choose. Use it to integrate with Zapier, Make, CRMs, Google Sheets, or your own API.

9. How does the AI Form Generator work?

You describe the form you want (e.g., “contact form with name, email, phone, and message”). The AI generates Contact Form 7 markup. You paste or adapt it in your form editor.

10. Can I use conditional logic?

Yes, with CF7 Mate Pro. Define rules to show or hide fields based on other field values (e.g., show “Company name” only if “Are you a business?” is Yes).

11. Does it work with [builder name]?

CF7 Mate includes native integrations for:

• Divi (Divi 4 and Divi 5)
• Elementor
• Bricks Builder

12. Can I style forms without a builder?

Yes, with presets

14. What happens if I deactivate CF7 Mate?

Forms revert to the default Contact Form 7 appearance. Form Entries (Pro) data remains in your database but won’t be accessible from the Entries screen.

15. Can I use it on multiple sites?

Licensing — we have a 1-10-100 site license.