Flutter Form Submission to WordPress (Contact Form 7 / Custom Endpoint)

Flutter Form Submission to WordPress (Contact Form 7 / Custom Endpoint)

June 20, 2025
Flutter contact form

Integrating Flutter frontends with a WordPress backend opens up flexible options for form submission — from contact inquiries to registration and proposal requests. Whether you’re using Contact Form 7 (CF7) or building a custom REST endpoint, Flutter can handle the process smoothly and efficiently.

In this article, we’ll explore how you can submit form data from your Flutter app directly to WordPress and what you need to know about working with CF7 or custom PHP endpoints.

Why Submit Forms to WordPress from Flutter?

Using WordPress as a backend for Flutter offers several benefits:

  • Centralized data: All form submissions go directly to your WordPress site or email system.

  • No third-party services needed: No reliance on Google Forms, Airtable, or Firebase unless you want them.

  • Reuse WordPress plugins: Leverage existing tools like CF7 or backend handlers for processing.

Option 1: Submitting to Contact Form 7

Contact Form 7 is one of the most popular contact form plugins for WordPress, and while it’s mainly designed for browser use, it can work with mobile apps — if properly configured.

How it Works:

  • Flutter sends a POST request to the CF7 form URL (usually ends in /wp-json/contact-form-7/v1/contact-forms/<form-id>/feedback)

  • Form field names must match exactly with the CF7 configuration

  • CF7 processes the data and returns a response (success or validation errors)

Requirements:

  • Ensure the CF7 REST API is enabled (usually via the plugin itself or with REST extensions)

  • Use CORS headers on the WordPress site to allow requests from the mobile app

  • Map Flutter form fields to the corresponding CF7 inputs (your-name, your-email, your-message, etc.)

When to Use CF7:

  • You’re already using CF7 on your website

  • You want form submissions to trigger emails via CF7

  • You don’t need much customization in how data is processed or stored

Option 2: Submitting to a Custom WordPress Endpoint

For full control, you can create your own custom REST API endpoint in WordPress and send data to it from Flutter.

Benefits of a Custom Endpoint:

  • Define your own form structure

  • Save submissions to the database or send to email

  • Add validation, authentication, or spam filtering

  • Return custom JSON responses tailored to your app

Workflow:

  1. Create a custom endpoint in WordPress using register_rest_route() in a plugin or theme.

  2. Accept POST requests from Flutter.

  3. Validate and process the data server-side.

  4. Return a success/error message as JSON.

When to Use a Custom Endpoint:

  • You need complex form logic or multiple forms

  • You want to store data as custom post types or entries

  • You need authentication or user-specific behavior

  • You want full control over response formatting

Key Considerations for Both Approaches

  • CORS Configuration: Ensure your WordPress backend allows requests from the Flutter app (via headers or plugins like “WP REST API Controller”).

  • Field Matching: The Flutter side must send field names exactly as expected on the WordPress side.

  • Error Handling: Flutter should handle success, error, and validation states cleanly.

  • Security: Consider using CAPTCHA, nonce fields, or authentication if the form is sensitive.