Using Wordpress contact form 7 with react

Question

I'm using WordPress as a rest API for my site, meaning the frontend is purely react. But to fetch data and stuff, I'm using WordPress backend. Now I would like to implement contact form 7 with my react app but not too sure how I can achieve this, I have looked at a solution on SO but I'm still stuck.

In my app, I'm doing an axios post request:

const handleSend = ()=> {

axios.post('https://0xsociety.com/wp-json/contact-form-7/v1/contact-forms/258/feedback')
}

Where exactly do I put the options (email, name and message)? This is how my contact form 7 looks like: (default)

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

<label> Your message (optional)
    [textarea your-message] </label>

[submit "Submit"]

This one: Using Contact Form 7 with React Here are the errors i get:

into: "span.wpcf7-form-control-wrap.your-name"
message: "The field is required."
idref: null
error_id: "-ve-your-name"
into: "span.wpcf7-form-control-wrap.your-email"
message: "The field is required."
idref: null
error_id: "-ve-your-email"

score 0 · Answer 1 · answered Sep 23 '21 at 13:32

As @jules-coles correctly points out in his answer, the best way to solve this is to create your own end-point to load the form on your page.

The form is stored as HTML in the meta-field of the form post under the meta-key _form, however you will need to parse the form through the WPCF7_Contact_Form class functionalty to get convert the form tags into HTML inputs,

//retrieve your form you want to parse (form post ID)
if(function_exists('wpcf7_contact_form') ){//provided by CF7 plugin.
  $form = wpcf7_contact_form($post_id); //loads the form
  $html_form = $form->form_html($attr); //outputs form as html.
  //$attr is an array of name=>value attributes found in the cf7 shortcode.

  //you can now return you html for your rest request:
  return $html_form;
}

Using Wordpress contact form 7 with react

1 Answers1