# 웹플로우 입력폼에서 데이터받아오기 (응용가능)

**URL:** <https://www.nocodekorea.org/t/topic/857>\
**Category:** 정보 공유\
**Created:** [1월 19, 2023, 9:20오전 UTC](https://www.nocodekorea.org/t/topic/857 "2023-01-19T09:20:44Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Oucoder](https://yyz1.discourse-cdn.com/flex031/user_avatar/www.nocodekorea.org/oucoder/32/57_2.png) [@Oucoder](https://www.nocodekorea.org/u/Oucoder)\
**Post date:** [1월 19, 2023, 9:20오전 UTC](https://www.nocodekorea.org/t/topic/857/1 "2023-01-19T09:20:44Z")

</div>

아웃코드 데이터플로우의 웹훅트리거는 상당히 유용하게 사용될 수 있습니다. 특히 웹페이지에서 웹훅을 사용하는 방법은 상당히 까다로운데요, 다른 웹이나 앱에서도 응용가능한 범용적인 방법을 알려드리겠습니다.

아래는 웹플로우에 적용해본 가이드입니다.

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

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

‍

 ![](https://canada1.discourse-cdn.com/flex031/uploads/learnnocode/original/1X/c906f8a070aa3640b2141cc93bf10d27991ff59d.png)

‍

이제 웹플로우 입력폼이 있는 페이지로가서 Body에 아래의 샘플 코드를 아래와 같이 심어줍니다. (샘플코드는 [아웃코드 사용 가이드](https://docs.outcode.biz/main/start/welcome)에 있습니다.)

 ![](https://canada1.discourse-cdn.com/flex031/uploads/learnnocode/original/1X/41be9e877e2e46c2457aa7a1a55235c7c9893c9c.png)

‍

웹플로우의 입력폼 ID와 생성한 데이터플로우 트리거 URL로 대체해줍니다. 아래에서 찾을 수 있습니다. 폼 ID는 HTML 표준이라 쉽게 찾을 수 있습니다.

 ![](https://canada1.discourse-cdn.com/flex031/uploads/learnnocode/original/1X/639507ef140cdfffe74feab2140c7969dae4bee7.png)

‍

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

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

_“name”:”아웃코드”, ”Email-address”:” support@powertask.biz”_

‍

이제 데이터플로우로 돌아가서 데이터를 구글시트에 먼저 저장하고, 회신 이메일을 보내도록 설정합니다.

‍

 ![](https://canada1.discourse-cdn.com/flex031/uploads/learnnocode/original/1X/80905dc401004017c6aefeafdee760f45db41fc8.png)

‍

마지막으로 데이터플로우 저장하면, 웹플로우 페이지에서 입력시 자동으로 구글시트에 저장하고 응답 메일까지 자동으로 보내줍니다.

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