• Resolved nataliehoang91

    (@nataliehoang91)


    I use React and WordPress headless API, I install Contact Form 7 with the expectation to use it as REST API to submit my contact form. I just simply used posman to test API first, but it got error

    {
    “code”: “wpcf7_unsupported_media_type”,
    “message”: “The request payload format is not supported.”,
    “data”: {
    “status”: 415
    }
    }

    call API: https://api.ausk.vn/wp-json/contact-form-7/v1/contact-forms/25/feedback

    body:

    {
    “your-name”: “John Doe”,
    “your-email”: “[email protected]”,
    “your-message”: “This is a test message”
    }

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    As the error says, the request payload format is not supported. The feedback endpoint expects a FormData object as the request body.

    Thread Starter nataliehoang91

    (@nataliehoang91)

    Thank you for the reply.

    I changed to Form data and I got this error

    {

    “code”: “wpcf7_unit_tag_not_found”,

    “message”: “There is no valid unit tag.”,

    “data”: {

    “status”: 400

    }

    }

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    A unit tag is a code like this: wpcf7-f123-p456-o1

    A unit tag must be unique on the page and used for the id attribute value of the wrapper <div class="wpcf7">. It is also submitted through the _wpcf7_unit_tag form field.

    Hello Takayuki,

    I am using cf7 api endpoint in react but I’m facing this error

    {

    “code”: “wpcf7_unit_tag_not_found”,

    “message”: “There is no valid unit tag.”,

    “data”: {

    “status”: 400

    }

    }

    , how do I resolve the same in the API, like I can’t send, even I don’t know unit tag to display on react end.

    Pavas Dave

    (@pavasdave)

    Also, I have noticed that it is issue with latest version 5.8.7, I tried to rollback to previous versions, and it is working fine for me Please see the difference between V5.8.4 & V5.8.7 respectively.

    pesimeao7egend

    (@pesimeao7egend)

    I have the same problem using the API

    felipesczensny

    (@felipesczensny)

    I was facing this problem too using the API, so I add a form field with the name “_wpcf7_unit_tag” and the value “form_id”
    Like this in react:
    formData.append(“_wpcf7_unit_tag”, data.form_id);

    Hope it help.

    Thank You @felipesczensny. It is working fine in the postman, hope it works the same with the code LOL. Thanks for the help.

    Am running a headless WordPress site, and have the same REST API submit problems listed above; have been unable to successfully send forms in the last month or so.

    Last good version of CF7 for REST API form submittal: 5.8.5

    Have followed the advice in this thread and spent many hours back and forth between the WordPress side & the form data on the front end to try to match the payload which works on the WordPress side.

    This is the form submit from Vite dev server, which appears to match the payload from the WordPress embedded form page:

    Payload:  FormData {
      [Symbol(state)]: [
        { name: 'your-email', value: '[email protected]' },
        { name: 'newsletter', value: 'SUBSCRIBE' },
        { name: '_wpcf7', value: '2039' },
        { name: '_wpcf7_version', value: '5.9.2' },
        { name: '_wpcf7_container_post', value: '3653' },
        { name: '_wpcf7_posted_data_hash', value: '' },
        { name: '_wpcf7_locale', value: 'en_US' },
        { name: '_wpcf7_unit_tag', value: 'wpcf7-f2039-p3653-o1' }
      ]
    }
    MLX Form Success:  {
      id: '1qyk770',
      valid: true,
      posted: true,
      errors: {},
      data: {
        email: '[email protected]',
        newsletter: 'on',
        _wpcf7_unit_tag: undefined,
        _wpcf7: undefined,
        _wpcf7_version: undefined,
        _wpcf7_locale: undefined,
        _wpcf7_container_post: undefined,
        response: 200
      },
      constraints: {
        email: { required: true },
        newsletter: { required: true },
        _wpcf7_unit_tag: { required: true },
        _wpcf7: { required: true },
        _wpcf7_version: { required: true },
        _wpcf7_locale: { required: true },
        _wpcf7_container_post: { required: true }
      }
    }

    The same payload to the same endpoint in Postman gives a unit tag error, although that is the unit tag from the WordPress version of the form page which works:

    {"code":"wpcf7_unit_tag_not_found","message":"There is no valid unit tag.","data":{"status":400}}

    It appears that in order to protect against SPAM, it is no longer possible to submit from React/Vue/SvelteKit frontend?

    Any insight anyone has would be greatly appreciated. Would prefer not to stick at the older version, but it does still work.

    All the best,
    Morgan
    ??

    • This reply was modified 8 months, 1 week ago by trulycool. Reason: form submitted before done writing
    Thread Starter nataliehoang91

    (@nataliehoang91)

    hi everyone, I successfully submit the form, simply added extra params wpcf7_unit_tag: (thank you @takayukister and @trulycool)

    but I still have a question:

    I still cannot find Contact Form real Id. I just see this in shortcode column
    [contact-form-7 id=”a0b94c4″ title=”Contact form 1″]

    The id="a0b94c4" is not correct actually, the real id is 25 ( I got this id when I use extra plugin CF7 to api.

    @nataliehoang91 glad you’ve got form submit working; still a no go for me ??

    The only way I have found to get all the needed form data is:
    – embed the shortcode in a Post or Page
    – view the page (i.e. the WordPress version, not frontend rendered)
    – right click on first form field and ‘inspect element’
    – look for the <form> tag just above the first form field, and just below it there is a hidden <div> with all the CF7 ‘special fields’

    <div style="display: none;">
        <input type="hidden" name="_wpcf7" value="2039">
        <input type="hidden" name="_wpcf7_version" value="5.8.5">
        <input type="hidden" name="_wpcf7_locale" value="en_US">
        <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2039-p3653-o1">
        <input type="hidden" name="_wpcf7_container_post" value="3653">
        <input type="hidden" name="_wpcf7_posted_data_hash" value="">
    </div>

    The first hidden <input) is _wpcf7, and that is the Form ID. The rest of the input are named in a self explanatory way.

    All the best ??

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    You can find it in the contact form editor page‘s URL.

    http://example.com/wp-admin/admin.php?page=wpcf7&post=12345&action=edit

    In the above example, the contact form ID is 12345.

    wesgardner

    (@wesgardner)

    Just noting that you can also get the wpcf7_unit_tag_not_found error if the unit tag is not being picked up because your API call is not formatted properly.

    @trulycool it is worth testing it out in Postman first to isolate the problem and confirm it’s not your code. I eventually got mine working properly using Axios.

    @takayukister How can the unit tag be generated when using a headless WP site (i.e. when the HTML is not generated by contact-form-7)?

    • This reply was modified 7 months, 2 weeks ago by therealgilles.

    For those interested, you’ll need to add this to the request:

    $request->set_param( '_wpcf7_unit_tag', <some_value> );

    If you want to mimic what the plugin does, you can use this:

    static $global_count = 0;
    $global_count++;
    
    $unit_tag = sprintf( 'wpcf7-f%1$d-o%2$d', $form_id, $global_count );
    $request->set_param( '_wpcf7_unit_tag', $unit_tag );

    where $form_id is the contact form post type ID.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Please help with REST API not work’ is closed to new replies.