在react中使用Wordpress contact form 7

Question

我使用WordPress作为我的站点的rest API，这意味着前端是纯粹的react。但是为了获取数据和东西，我使用的是WordPress后端。现在我想用我的react应用程序实现contact form 7，但我不太确定如何实现这一点，我已经在SO上寻找了解决方案，但我仍然卡住了。

在我的应用程序中，我执行了一个axios post请求：

const handleSend = ()=> {

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

我到底应该把选项放在哪里(电子邮件、姓名和消息)？这是我的联系人表单7的外观：(默认)

<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"]

这个：Using Contact Form 7 with React下面是我得到的错误：

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"

Answer 1

正如@jules-coles在他的answer中正确指出的那样，解决这个问题的最好方法是使用create your own end-point将表单加载到页面上。

表单作为HTML语言存储在表单post的元字段中的元键_form下，但是您需要通过WPCF7_Contact_Form类函数解析表单才能将表单标签转换为HTML输入。

//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;
}