Home IT/WEB WordPress Contact Form 7 Rest API endpoints

WordPress Contact Form 7 Rest API endpoints

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

inline ad

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()
},

RECENT POSTS

[javscript]API 응답에서 키 값들을 검증하는 방법

API 응답에서 다수의 키 값들을 검증할 때 코드의 중복을 줄이는 것은 유지보수성을 향상시키고, 가독성을 높이는 데 중요합니다. 이를 위해 몇 가지 접근 방법을 사용할...

[javscript]특정 키를 제외하고 두 객체를 비교하는 방법

특정 키를 제외하고 두 객체를 비교하는 작업은 데이터의 동등성을 평가하고 싶을 때 유용합니다. Lodash 라이브러리를 통해서 처리할 수 있는 방법에 대해서 살펴보겠습니다. Lodash를 사용한 특정...

[javscript]배열을 특정 키의 값에 따라 정렬하는 방법, _.orderBy

Lodash의 _.orderBy 메소드를 사용하면 배열을 특정 키의 값에 따라 정렬할 수 있습니다. 이 메소드는 배열의 각 항목을 정렬할 기준이 되는 하나 이상의 속성 이름과...

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...