웹플로우 입력폼에서 데이터 받아오기

아웃코드 데이터플로우의 HTTP 요청 (웹훅)기능을 사용하여 방문자가 아웃코드 홈페이지의 입력폼을 작성했을 때 데이터를 받아서 구글시트로 바로 저장하고 자동회신까지 보내보겠습니다.

트리거: HTTP 요청

먼저 아웃코드 데이터플로우에서 트리거를 HTTP 요청으로 설정합니다. 이때 발생하는 URL 주소를 웹플로우에 간단한 코드와 함께 사용할 예정입니다.

웹플로우 설정

이제 웹플로우 입력폼이 있는 페이지로 가서 Before </body> tag 영역에 아래 코드를 복사 붙여넣습니다.

여기를 열고 코드를 복사하세요!

<script>
const form = document.querySelector('#wf-form-Contact-Form')
if (form) {
form.addEventListener('submit', (e) => {
    const target = e.target;
    if (target) {
        const formData = new FormData(target);
        const body = Array.from(formData.keys())
            .reduce((prev, cur) => {
                return {...prev, [cur]: formData.get(cur)}
            }, {});
        if (body) {
            console.log(JSON.stringify(body))
            fetch('https://core.outcode.biz/outcodeOp/b95fdd6ce40cee00274e58ae?key=40bd001563085fc35165329ea1ff5c5ecbdbbeef', {
                method: 'POST',
                headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
                body: JSON.stringify(body)
            })
            .then(async (res) => console.log(await res.json()))
        }
    }
})
}
</script>

오렌지 박스에 있는 부분들을 아래 내용으로 대체해줍니다.

1. ID: 웹플로우의 입력폼 ID를 복사 붙여넣습니다. 아래에서 찾을 수 있습니다.

2. 트리거: HTTP 요청 선택에서 가져온 URL을 붙여넣습니다.

이렇게 입력하면 사용자가 웹플로우 입력폼을 제출할때마다 데이터플로우를 호출하고 입력된 데이터를 넘겨줍니다. 이때 데이터는 아래의 형태로

“입력폼의 입력필드 ID”: “입력값” 의 보내줍니다.

“name”:”아웃코드”, ”Email-address”:” [e-mail]”

아웃코드 데이터플로우로 돌아갑니다.

구글시트: 웹플로우에서 받아온 데이터 추가

사용자가 입력한 데이터를 웹플로우에서 받아와서 원하는 구글시트에 저장합니다.

• 아래와 같이 원하는 구글시트와 시트를 정해주고 폼을 선택합니다.

• 아웃코드에서는 {{참조열.칼럼명}}으로 데이터를 참조할 수 있습니다. 보다 더 자세한 참조법은 이 문서에서 확인해주세요.

지메일: 데이터를 이용해서 고객에게 이메일 자동 발송

위에서 저장한 데이터를 활용하여 실시간으로 고객에게 응답 이메일을 발송합니다.

받는 사람, 제목, 내용에 위에서 불러온 데이터를 사용할 수 있습니다.

데이터플로우를 저장합니다!

이렇게 저장된 데이터플로우는 웹플로우 입력폼에 답변이 들어올 때마다 구글시트에 데이터를 저장하고 응답 이메일을 실시간으로 발송합니다.

데이터플로우는 다양하게 응용하면 다른 웹/앱 페이지는 물론 다양한 시나리오에 따라서 자동화할 수 있는 유용한 기능입니다. 따라하시다가 궁금하신 점은 아웃코드 커뮤니티에서 알려주세요.