Create a Form

This page describes the request data identifiers and response structure required to build a member information edit page.
Refer to the descriptions of each field and its usage below when integrating.

Data Identifier

{
  "dataID": "GET_FORM",
  "form_code": "form-contact",
  "fail_url": "/web-form/fail"
}
KeyDescription
dataIDUnique data identifier
form_codeCode of the form to submit (available in Form Management in the console)
fail_urlURL to redirect to when access is not permitted (e.g. accessing a member-only form anonymously)

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>

    The form used to submit the web form; the id attribute value frm_web_form is required

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

    The code of the form to create (can be found in Form Management in the console)

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

    Redirect URL after the form is submitted

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

    Submitter's name when the form registration permission is 'anonymous' (not required when the permission is members only)

  • answer[1][label]
    <input type="hidden" name="answer[1][label]" value="How you found H:DEV+">

    Label of the form's input item #1

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

    Input value for the form's input item #1 (for a checkbox, answer[1][value][])

  • answer[2][label]
    <input type="hidden" name="answer[2][label]" value="Frequently used features">

    Label of the form's input item #2

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

    Input value for the form's input item #2 (for a checkbox, answer[2][value][])

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

    Label of the form's input item #3

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

    Input value for the form's input item #3 (for a checkbox, answer[3][value][])

Response Result

  • After the form is submitted, the user is redirected to 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
permissionForm submission permission (member or anonymous)
form_nameForm name
form_keyForm unique key
descriptionForm description
modify_dateForm information last modified date
create_dateForm information created 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>

Related Links