폼 작성

회원정보 수정 페이지를 구현하기 위해 필요한 요청 데이터 식별자와 응답 결과 구조를 안내합니다.
각 필드의 설명과 사용 방식은 아래 설명을 참고하여 연동 시 참고하시기 바랍니다.

데이타 식별자

{
  "dataID": "GET_FORM",
  "form_code": "form-contact",
  "fail_url": "/web-form/fail"
}
KeyDescription
dataID데이터 고유값
form_code작성할 폼의 코드(콘솔의 폼 관리에서 확인 가능)
fail_url권한이 없는 경우 이동 URL(회원 전용 폼을 익명으로 접근 하는 경우 등)

HTML

<form id="frm_web_form">
    <input type="hidden" name="form_code" value="form_code">
    <input type="hidden" name="return_url" value="/form/success">
    <input type="text" class="h-validation" id="answerer_name" name="answerer_name" data-validation="not-empty">
    <input type="text" class="h-validation" id="answerer_email" name="answerer_email" data-validation="email" data-code="폼 등록 권한이 '익명'일 경우 작성인 이메일(권한이 회원 전용일 경우 필요 없음)">
    <input type="hidden" name="answer[1][label]" value="H:DEV+ 알게된 경로">
    <select name="answer[1][value]" id="answer_1_value">
        <option value="">선택</option>
        <option value="검색을 통해">검색을 통해</option>
        <option value="지인을 통해">지인을 통해</option>
        <option value="미디어 통해">미디어 통해</option>
        <option value="광고를 통해">광고를 통해</option>
    </select>
    <input type="hidden" name="answer[2][label]" value="자주 사용하는 기능">
    <div class="form-control" data-validation="check-limit" data-validation-limit="1-3">
        <label class="me-4">
            <input type="checkbox" name="answer[2][value][]" value="포펌"> 포럼 </label>
        <label class="me-4">
            <input type="checkbox" name="answer[2][value][]" value="회원"> 회원 </label>
        <label class="me-4">
            <input type="checkbox" name="answer[2][value][]" value="웹폼"> 웹폼 </label>
        <label class="me-4">
            <input type="checkbox" name="answer[2][value][]" value="기타"> 기타 </label>
    </div>
    <input type="hidden" name="answer[3][label]" value="가장 좋아하는 동물">
    <div data-validation="radio-check">
        <label class="me-4">
            <input type="radio" name="answer[3][value]" value="호랑이"> 호랑이 </label>
        <label class="me-4">
            <input type="radio" name="answer[3][value]" value="고양이"> 고양이 </label>
        <label class="me-4">
            <input type="radio" name="answer[3][value]" value="강아지"> 강아지 </label>
        <label class="me-4">
            <input type="radio" name="answer[3][value]" value="미꾸라지"> 미꾸라지 </label>
    </div>
    <button type="submit">저장</button>
</form>
  • form
    <form id="frm_web_form"></form>

    웹폼 전성을 위한 폼으로 id 속성의 값인 frm_web_form 필수

  • form_code
    <input type="hidden" name="form_code" value="form_code">

    작성할 폼 코드(콘속의 폼 관리에서 확인 가능)

  • return_url
    <input type="hidden" name="return_url" value="/form/success">

    폼 전송 후 Redirect URL

  • answerer_name
    <input type="text" class="h-validation" id="answerer_name" name="answerer_name" data-validation="not-empty">

    폼 등록 권한이 '익명'일 경우 작성인 이름(권한이 회원 전용일 경우 필요 없음)

  • answer[1][label]
    <input type="hidden" name="answer[1][label]" value="H:DEV+ 알게된 경로">

    폼의 1번 입력 항목 명

  • answer[1][value]
    <select name="answer[1][value]" id="answer_1_value"></select>

    폼의 1번 입력 항목에 대한 입력 값(checkbox의 경우 answer[1][value][])

  • answer[2][label]
    <input type="hidden" name="answer[2][label]" value="자주 사용하는 기능">

    폼의 2번 입력 항목 명

  • answer[2][value][]
    <input type="checkbox" name="answer[2][value][]" value="포펌">

    폼의 2번 입력 항목에 대한 입력 값(checkbox의 경우 answer[2][value][])

  • answer[3][label]
    <input type="hidden" name="answer[3][label]" value="가장 좋아하는 동물">

    폼의 3번 입력 항목 명

  • answer[3][value]
    <input type="radio" name="answer[3][value]" value="호랑이">

    폼의 3번 입력 항목에 대한 입력 값(checkbox의 경우 answer[3][value][])

Response Result

  • 폼제출 후 return_url로 이동합니다.
{
  "permission": "anonymous",
  "form_name": "상담신청",
  "form_key": "ksidjush7653",
  "description": "상담을 신청 받는 폼",
  "modify_date": "2025-01-02 00:00:01",
  "create_date": "2023-02-14 10:30:00"
}
KeyDescription
permission폼 등록 권한(member or anonymous)
form_name폼 이름
form_key폼 고유키
description폼 설명
modify_date폼 정보 수정 일시
create_date폼 정보 등록 일시

Example

테스트 웹 폼

이름을 입력하세요
이메일을 입력하세요
H:DEV+ 알게된 경로를 선택하세요
자주 사용하는 기능을 선택하세요 (최소 1개이사 3개까지)
가장 좋아하는 동물을 선택하세요
취소 
<main>
    <div class="row g-5">
        <div class="col-12">
            <div class="text-center">
                <h2 class="mt-5 mb-3">테스트 웹 폼</h2>
            </div>
            <form id="frm_web_form" data-validation-alert="no" data-complete-type="alert" data-complete-message="전송이 완료되었습니다.">
                <input type="hidden" name="form_code" value="form_code">
                <input type="hidden" name="return_url" value="/example/vue/web_form/completed.html">
                <div class="row">
                    <div class="col-12 col-lg-12 mb-3">
                        <label for="answerer_name" class="form-label">이름</label>
                        <input type="text" class="form-control h-validation" id="answerer_name" name="answerer_name" data-validation="not-empty" placeholder="이름을 입력하세요 입력하세요">
                        <small class="invalid-feedback"> 이름을 입력하세요 </small>
                    </div>
                    <div class="col-12 col-lg-12 mb-3">
                        <label for="answerer_email" class="form-label">이메일</label>
                        <input type="text" class="form-control h-validation" id="answerer_email" name="answerer_email" data-validation="email" placeholder="이메일을 입력하세요 입력하세요">
                        <small class="invalid-feedback"> 이메일을 입력하세요 </small>
                    </div>
                    <div class="col-12 col-lg-12 mb-3">
                        <label for="answer_1_value" class="form-label">H:DEV+ 알게된 경로</label>
                        <input type="hidden" name="answer[1][label]" value="H:DEV+ 알게된 경로">
                        <select name="answer[1][value]" id="answer_1_value" data-validation="not-empty" class="form-control">
                            <option value="">선택</option>
                            <option value="검색을 통해">검색을 통해</option>
                            <option value="지인을 통해">지인을 통해</option>
                            <option value="미디어 통해">미디어 통해</option>
                            <option value="광고를 통해">광고를 통해</option>
                        </select>
                        <small class="invalid-feedback"> H:DEV+ 알게된 경로를 선택하세요 </small>
                    </div>
                    <div class="col-12 col-lg-12 mb-3">
                        <label class="form-label">자주 사용하는 기능</label>
                        <input type="hidden" name="answer[2][label]" class="form-control" value="자주 사용하는 기능">
                        <div class="form-control" data-validation="check-limit" data-validation-limit="1-3">
                            <label class="me-4">
                                <input type="checkbox" class="form-check-input" name="answer[2][value][]" value="포펌"> 포럼 </label>
                            <label class="me-4">
                                <input type="checkbox" class="form-check-input" name="answer[2][value][]" value="회원"> 회원 </label>
                            <label class="me-4">
                                <input type="checkbox" class="form-check-input" name="answer[2][value][]" value="웹폼"> 웹폼 </label>
                            <label class="me-4">
                                <input type="checkbox" class="form-check-input" name="answer[2][value][]" value="기타"> 기타 </label>
                        </div>
                        <small class="invalid-feedback"> 자주 사용하는 기능을 선택하세요 (최소 1개이사 3개까지) </small>
                    </div>
                    <div class="col-12 col-lg-12 mb-3">
                        <label class="form-label">가장 좋아하는 동물</label>
                        <input type="hidden" name="answer[3][label]" value="가장 좋아하는 동물">
                        <div class="form-control" data-validation="radio-check">
                            <label class="me-4">
                                <input type="radio" class="form-check-input" name="answer[3][value]" value="호랑이"> 호랑이 </label>
                            <label class="me-4">
                                <input type="radio" class="form-check-input" name="answer[3][value]" value="고양이"> 고양이 </label>
                            <label class="me-4">
                                <input type="radio" class="form-check-input" name="answer[3][value]" value="강아지"> 강아지 </label>
                            <label class="me-4">
                                <input type="radio" class="form-check-input" name="answer[3][value]" value="미꾸라지"> 미꾸라지 </label>
                        </div>
                        <small class="invalid-feedback"> 가장 좋아하는 동물을 선택하세요 </small>
                    </div>
                    <div class="col-12 col-lg-12 mb-3" style="overflow: auto;">
                        <div class="my-4 text-center mb-5">
                            <button type="submit" class="mx-1 btn btn-dark px-4">저장</button>
                            <a href="./list.html" class="text-white mx-1 btn btn-dark px-4">취소</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</main>

관련 링크