폼 작성

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

데이타 식별자

{
  "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="Email of the submitter when the form registration permission is 'anonymous' (not required when the permission is members only)">
    <input type="hidden" name="answer[1][label]" value="How you found H:DEV+">
    <select name="answer[1][value]" id="answer_1_value">
        <option value="">Select</option>
        <option value="Through search">Through search</option>
        <option value="Through an acquaintance">Through an acquaintance</option>
        <option value="Through media">Through media</option>
        <option value="Through an advertisement">Through an advertisement</option>
    </select>
    <input type="hidden" name="answer[2][label]" value="Frequently used features">
    <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="Forum"> Forum </label>
        <label class="me-4">
            <input type="checkbox" name="answer[2][value][]" value="Member"> Member </label>
        <label class="me-4">
            <input type="checkbox" name="answer[2][value][]" value="Web Form"> Web Form </label>
        <label class="me-4">
            <input type="checkbox" name="answer[2][value][]" value="Other"> Other </label>
    </div>
    <input type="hidden" name="answer[3][label]" value="Favorite animal">
    <div data-validation="radio-check">
        <label class="me-4">
            <input type="radio" name="answer[3][value]" value="Tiger"> Tiger </label>
        <label class="me-4">
            <input type="radio" name="answer[3][value]" value="Cat"> Cat </label>
        <label class="me-4">
            <input type="radio" name="answer[3][value]" value="Dog"> Dog </label>
        <label class="me-4">
            <input type="radio" name="answer[3][value]" value="Loach"> Loach </label>
    </div>
    <button type="submit">Save</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="How you found 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="Frequently used features">

    폼의 2번 입력 항목 명

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

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

  • answer[3][label]
    <input type="hidden" name="answer[3][label]" value="Favorite animal">

    폼의 3번 입력 항목 명

  • answer[3][value]
    <input type="radio" name="answer[3][value]" value="Tiger">

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

Response Result

  • 폼제출 후 return_url로 이동합니다.
{
  "permission": "anonymous",
  "form_name": "Consultation Request",
  "form_key": "ksidjush7653",
  "description": "A form for receiving consultation requests",
  "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

Test Web Form

Please enter your name
Please enter your email
Please select how you found H:DEV+
Please select frequently used features (1 to 3 items)
Please select your favorite animal
Cancel 
<main>
    <div class="row g-5">
        <div class="col-12">
            <div class="text-center">
                <h2 class="mt-5 mb-3">Test Web Form</h2>
            </div>
            <form id="frm_web_form" data-validation-alert="no" data-complete-type="alert" data-complete-message="Submission completed.">
                <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">Name</label>
                        <input type="text" class="form-control h-validation" id="answerer_name" name="answerer_name" data-validation="not-empty" placeholder="Enter your name">
                        <small class="invalid-feedback"> Please enter your name </small>
                    </div>
                    <div class="col-12 col-lg-12 mb-3">
                        <label for="answerer_email" class="form-label">Email</label>
                        <input type="text" class="form-control h-validation" id="answerer_email" name="answerer_email" data-validation="email" placeholder="Enter your email">
                        <small class="invalid-feedback"> Please enter your email </small>
                    </div>
                    <div class="col-12 col-lg-12 mb-3">
                        <label for="answer_1_value" class="form-label">How you found H:DEV+</label>
                        <input type="hidden" name="answer[1][label]" value="How you found H:DEV+">
                        <select name="answer[1][value]" id="answer_1_value" data-validation="not-empty" class="form-control">
                            <option value="">Select</option>
                            <option value="Through search">Through search</option>
                            <option value="Through an acquaintance">Through an acquaintance</option>
                            <option value="Through media">Through media</option>
                            <option value="Through an advertisement">Through an advertisement</option>
                        </select>
                        <small class="invalid-feedback"> Please select how you found H:DEV+ </small>
                    </div>
                    <div class="col-12 col-lg-12 mb-3">
                        <label class="form-label">Frequently used features</label>
                        <input type="hidden" name="answer[2][label]" class="form-control" value="Frequently used features">
                        <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="Forum"> Forum </label>
                            <label class="me-4">
                                <input type="checkbox" class="form-check-input" name="answer[2][value][]" value="Member"> Member </label>
                            <label class="me-4">
                                <input type="checkbox" class="form-check-input" name="answer[2][value][]" value="Web Form"> Web Form </label>
                            <label class="me-4">
                                <input type="checkbox" class="form-check-input" name="answer[2][value][]" value="Other"> Other </label>
                        </div>
                        <small class="invalid-feedback"> Please select frequently used features (1 to 3 items) </small>
                    </div>
                    <div class="col-12 col-lg-12 mb-3">
                        <label class="form-label">Favorite animal</label>
                        <input type="hidden" name="answer[3][label]" value="Favorite animal">
                        <div class="form-control" data-validation="radio-check">
                            <label class="me-4">
                                <input type="radio" class="form-check-input" name="answer[3][value]" value="Tiger"> Tiger </label>
                            <label class="me-4">
                                <input type="radio" class="form-check-input" name="answer[3][value]" value="Cat"> Cat </label>
                            <label class="me-4">
                                <input type="radio" class="form-check-input" name="answer[3][value]" value="Dog"> Dog </label>
                            <label class="me-4">
                                <input type="radio" class="form-check-input" name="answer[3][value]" value="Loach"> Loach </label>
                        </div>
                        <small class="invalid-feedback"> Please select your favorite animal </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">Save</button>
                            <a href="./list.html" class="text-white mx-1 btn btn-dark px-4">Cancel</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</main>

관련 링크