title: How to send posts requests to contact form 7 from React.js
body: <p>I.m currently making a React front end website using Wordpress as a backend. I've managed to set <code>user authentication</code> using <strong>JWT</strong> and i'm now trying to send post requests to Contact Form 7 and i'm having trouble converting the form tags to <code>json</code> and don't really know where to start and i'm not entirely sure that this is the correct process to be following.</p>
  <p>I'm using <code>axios</code> to send posts requests and the websites are still running locally (i understand i might have <strong>CORS</strong> issues and trouble actually sending the form to an email but i want to get it to a point where all the data is getting sent over correctly).</p>
  <p>Below is the code to my <strong>Contact component</strong>.</p>
  <p>Current errors:
  <a href="https://i.stack.imgur.com/H1uei.png" rel="nofollow noreferrer">Console Errors</a></p>
  <p>React Geniuses Please Help :)....</p>
  <pre><code>import React, {Component} from 'react'
  import axios from 'axios'
  
  class Contact extends Component {
      constructor(props) {
          super(props) 
              this.state = {
                  yourName: '',
                  yourEmail: '',
                  subject: '',
                  message: '',
                  successMessage:'',
                  loading: false,
                  error: ''
              }
      }
  
      onFormSubmit = (event) =&gt; {
          event.preventDefault()
          const siteURL = 'http://localhost/wordpress'
          const formData = {
              yourName: this.state.yourName,
              yourEmail: this.state.yourEmail,
              subject: this.state.subject,
              message: this.state.message
          }
  
          this.setState({ loading:true}, () =&gt; {
              axios.post(`${siteURL}/wp-json/contact-form-7/v1/contact-forms/92/feedback`, formData)
              .then( res =&gt; {
                  this.setState({loading: false, successMessage: 'Yay your message was sent'})
                  console.warn( res.data)
              })
              .catch( err =&gt; {
                             this.setState({ error: err.response.data, loading: false})
                         })
          })
      }
  
      handleOnChange = (event) =&gt; {
          event.preventDefault()
          this.setState({ [event.target.name]: event.target.value})
      }
  
      render() {
          const { yourName, yourEmail, subject, message, successMessage} = this.state
          return(
              &lt;React.Fragment&gt;
              &lt;form onSubmit={this.onFormSubmit} style={{ margin: '20px'}}&gt;
                  &lt;label className='form-group'&gt;
                    Name:
                    &lt;input 
                     type='text'
                     className=&quot;form-control&quot;
                     name='yourName'
                     value={yourName}
                     onChange={this.handleOnChange}
                    &gt;&lt;/input&gt;
                  &lt;/label&gt;
                  &lt;br /&gt;
                  &lt;label className='form-group'&gt;
                  Email:
                  &lt;input 
                   type='text'
                   className=&quot;form-control&quot;
                   name='yourEmail'
                   value={yourEmail}
                   onChange={this.handleOnChange}
                  &gt;&lt;/input&gt;
                  &lt;/label&gt;
                  &lt;br /&gt;
                  &lt;label className='form-group'&gt;
                  Subject:
                  &lt;input 
                   type='text'
                   className=&quot;form-control&quot;
                   name='subject'
                   value={subject}
                   onChange={this.handleOnChange}
                  &gt;&lt;/input&gt;
                  &lt;/label&gt;
                  &lt;br /&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                  &lt;label className=&quot;form-group&quot;&gt; Message:&lt;/label&gt;
                  &lt;textarea 
                   type='textarea'
                   className=&quot;form-control&quot;
                   name='message'
                   value={message} 
                   onChange={this.handleOnChange}
                   rows=&quot;3&quot;
                  &gt;&lt;/textarea&gt;
                  &lt;/div&gt;
    &lt;br /&gt;
    &lt;button type='submit' className='btn btn-primary'&gt;Login&lt;/button&gt;
  &lt;h1&gt;{successMessage}&lt;/h1&gt;                
                  &lt;/form&gt;
              &lt;/React.Fragment&gt;
          )
      }
  }
  export default Contact
  </code></pre>
  <p>Contact Form 7 Layout:</p>
  <pre><code>&lt;label&gt; Your Name (required)
      [text* your-name] &lt;/label&gt;
  
  &lt;label&gt; Your Email (required)
      [email* your-email] &lt;/label&gt;
  
  &lt;label&gt; Subject
      [text your-subject] &lt;/label&gt;
  
  &lt;label&gt; Your Message
      [textarea your-message] &lt;/label&gt;
  
  [submit &quot;Send&quot;]
  </code></pre>
  <p>Ok so i've made a little progress with this, the below comment is true and the formatting needs to be in 'your-name': format.</p>
  <p>You also have to be authenticated to send a post request to the contact form which i found a little strange because aren't forms suppose to be used by everyone?</p>
  <p>I am now getting the post request to authenticate here's my code</p>
  <pre><code>import React, {Component} from 'react'
  import axios from 'axios'
  
  
  
  class Contact extends Component {
  
      constructor(props) {
          super(props) 
  
              this.state = {
                  yourName: '',
                  yourEmail: '',
                  subject: '',
                  message: '',
                  successMessage:'',
                  loading: false,
                  error: ''
              }
          
      }
  
      onFormSubmit = (event) =&gt; {
          event.preventDefault()
         
  
          const siteURL = 'https://cors-anywhere.herokuapp.com/https://thedigiweb.uk'
  
         
  
        const formData = {
          
                 'your-name':
               this.state.yourName,
               'your-email': 
              this.state.yourEmail,
               'your-subject':
               this.state.subject,
              'your-message' :
              this.state.message,
  
          
  
  
          }
  
       
          console.log(formData)
      
          const token = localStorage.getItem('token')
          this.setState({ loading: true}, () =&gt; {
              axios.post(`${siteURL}/wp-json/contact-form-7/v1/contact-forms/55/feedback`, 
              {formData}, {
                  headers: {
                      Authorization: `Bearer ${token}`
                  }
              })
              .then( res =&gt; {
                  this.setState({loading: false, successMessage: res.data.message})
                  console.warn( res.data)
              })
             
  
              .catch( err =&gt; {
                             this.setState({ error: 'you have an error', loading: false})
                             
                         })
          })
  
      }
  
  
      handleOnChange = (event) =&gt; {
          event.preventDefault()
  
          this.setState({ [event.target.name]: event.target.value})
  
         
  
      }
  
      render() {
         
          const { yourName, yourEmail, subject, message, successMessage} = this.state
          return(
              &lt;React.Fragment&gt;
  
              &lt;form onSubmit={this.onFormSubmit} style={{ margin: '20px'}}&gt;
     
                  &lt;label className='form-group'&gt;
                    Name:
                    &lt;input 
                    type='text'
                    className=&quot;form-control&quot;
                    name='yourName'
                    value={yourName}
                    onChange={this.handleOnChange}
                    
     
                    &gt;&lt;/input&gt;
                  
                  &lt;/label&gt;
                  &lt;br /&gt;
                  &lt;label className='form-group'&gt;
                  Email:
                  &lt;input 
                  type='text'
                  className=&quot;form-control&quot;
                  name='yourEmail'
                  value={yourEmail}
                  onChange={this.handleOnChange}
     
                  &gt;&lt;/input&gt;
                  
                  &lt;/label&gt;
                  &lt;br /&gt;
                  &lt;label className='form-group'&gt;
                  Subject:
                  &lt;input 
                  type='text'
                  className=&quot;form-control&quot;
                  name='subject'
                  value={subject}
                  onChange={this.handleOnChange}
     
                  &gt;&lt;/input&gt;
                  
                  &lt;/label&gt;
                  &lt;br /&gt;
                 
                  &lt;div className=&quot;form-group&quot;&gt;
                  &lt;label className=&quot;form-group&quot;&gt; Message:&lt;/label&gt;
                 
                  &lt;textarea 
                  type='textarea'
                  className=&quot;form-control&quot;
                  name='message'
                  value={message} 
                  onChange={this.handleOnChange}
                  rows=&quot;3&quot;
              
                  &gt;&lt;/textarea&gt;
  
                  
                  
                  
                  &lt;/div&gt;
    &lt;br /&gt;
    
    &lt;button type='submit' className='btn btn-primary'&gt;Submit&lt;/button&gt;
  
  
  &lt;h1&gt;{successMessage}&lt;/h1&gt;
                  
                  
                  &lt;/form&gt;
              
              
              
              &lt;/React.Fragment&gt;
          )
      }
  }
  
  
  export default Contact
  </code></pre>
  <p>The only thing now is that the email isn't getting sent, it's working fine through PostMan and i don't need any token to send the form either.</p>
  <p>if anyone feels like joining in on this it would be appreciated, i'm sure there's and easy fix to all this.</p>