WordPress Contact Form 7 Rest API endpoints

By
markettraders
-
0
3422
wordpress thumbnail
wordpress thumbnail

contact form 7 plugin 을 설치하고 컨텍폼을 생성하고 아래의 REST API endpoints 에 POST 로 메시지를 전송할 수 있습니다.

POST http://www.yourdomain.com/wp-json/contact-form-7/v1/contact-forms/{폼 아이디}/feedback

REST API Endpoint 테스트

insomnia 라는 api test 툴을 이용하여 위의 rest api endpoints 로 데이터를 전송해보겠습니다. insomnia 는 아래 주소를 이용하여 다운로드 받을 수 있습니다.
https://insomnia.rest/download

http 메서드를 POST 를 선택하고 rest api endpoints 를 입력하고 조금 전에 생성한 contact form 입력 필드 항목 키를 입력하고 value 도 입력합니다. 입력 후 send 버튼을 누르면 전송이 되고 아래 결과값을 확인할 수 있습니다.

{
“into”: “#”,
“status”: “mail_sent”,
“message”: “안내문를 보내주셔서 감사합니다. 발송을 완료했습니다.”,
“posted_data_hash”: “46f67f570217da837b87af3bf19c63ec”
}

이제 테스트를 완료했으니 Nuxt.js 를 통해서 입력 받은 데이터를 WordPress Contact Form 으로 전송해보겠습니다. 전송 관련 메소드만 정리해보았습니다. 

 async send() {
      const formData = new FormData()
      for (let key in this.formData) {
        if (this.formData.hasOwnProperty(key)) {
          formData.append(key, this.formData[key])
        }
      }
      const response = await axios.post(
        'https://markettraders.kr/wp-json/contact-form-7/v1/contact-forms/3421/feedback', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
      this.success(response.data)
      return response.data
 },
 success(res) {
      this.status = res
      this.dialog = true
      if (res.status === 'mail_sent') {
        this.clear()
      }
}
clear() {
      this.$refs.form.reset()
},