Sign Up

Explains the full flow for implementing a sign-up page, including the data fields, submission format, and response structure.
It also provides the identifiers and example code needed to connect the frontend and backend.

Data Identifier

{
  "dataID": "SIGN_UP"
}

HTML

<form id="frm_sign_up">
    <input type="hidden" name="return_url" id="return_url" value="/user/sign-in">
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
    <label for="cell_phone">Mobile phone</label>
    <input type="text" id="cell_phone" name="cell_phone">
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
    <label for="nickname">Nickname</label>
    <input type="text" id="nickname" name="nickname">
    <label for="avatar_1">Avatar1</label>
    <input type="radio" id="avatar_1" name="avatar_url" value="/avatar/avatar1.svg">
    <label for="birth_y">Birthday (year)</label>
    <select id="birth_y" name="birth_y">
        <option value="">Select year</option>
        <option value="2090">2090</option>
        <option value="2089">2089</option>
    </select>
    <label for="birth_m">Birthday (month)</label>
    <select id="birth_m" name="birth_m">
        <option value="">Select month</option>
        <option value="1">January</option>
        <option value="12">December</option>
    </select>
    <label for="birth_d">Birthday (day)</label>
    <select id="birth_d" name="birth_d">
        <option value="">Select day</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <label for="password">Password</label>
    <input type="password" id="password" name="password">
    <label for="password_re">Confirm password</label>
    <input type="password" id="password_re" name="password_re">
    <input type="checkbox" id="receive_message" name="receive_message" value="Y">
    <label for="receive_message">I agree to receive news and information.</label>
    <input type="checkbox" id="term_agree" name="term_agree" value="Y">
    <label for="term_agree">I agree to the Terms of Service and Privacy Policy.</label>
    <button type="submit">Sign up</button>
</form>
  • form
    <form id="frm_sign_up"></form>

    Sign-up form; the id frm_sign_up is required.

  • return_url
    <input type="hidden" name="return_url" id="return_url" value="/user/sign-in">

    URL to move to after sign-up is completed

  • email
    <input type="email" id="email" name="email">

    Email to use when signing in

  • cell_phone
    <input type="text" id="cell_phone" name="cell_phone">

    Member's mobile phone number

  • name
    <input type="text" id="name" name="name">

    Member's name

  • nickname
    <input type="text" id="nickname" name="nickname">

    Member's nickname

  • avatar_url
    <input type="radio" id="avatar_1" name="avatar_url" value="/avatar/avatar1.svg">

    URL of the avatar the member will use

  • birth_y
    <select id="birth_y" name="birth_y"></select>

    Member's birth year

  • birth_m
    <select id="birth_m" name="birth_m"></select>

    Member's birth month

  • birth_d
    <select id="birth_d" name="birth_d"></select>

    Member's birth day

  • password
    <input type="password" id="password" name="password">

    Member's password. Setting data-validation="password-8-32" allows input of 8-32 characters combining numbers, letters, and special characters (?=.*[~!@#$%^*()+-=[]{};:?.,_).

  • password_re
    <input type="password" id="password_re" name="password_re">

    Confirmation password to prevent mistyping the password

  • receive_message
    <input type="checkbox" id="receive_message" name="receive_message" value="Y">

    Consent to receive news and information: Y (agree) / N (disagree)

  • term_agree
    <input type="checkbox" id="term_agree" name="term_agree" value="Y">

    Whether the Terms of Service and Privacy Policy are agreed to: Y (agree) / N (disagree); sign-up is only possible when agreed

Response Result

  • When the sign-up button is clicked, the registration is processed and the user is redirected to return_url.

Example

<form id="frm_sign_up" class="col-12 col-lg-7 mx-auto mt-5 needs-validation form-signup">
    <input type="hidden" name="return_url" id="return_url" value="/user/sign-in">
    <div class="text-center">
        <h2 class="my-3">Sign up</h2>
    </div>
    <div class="my-4">
        <div class="form-group has-validation">
            <div class="form-check lh-base mt-3">
                <input class="form-check-input" type="checkbox" id="term_agree" name="term_agree" value="Y">
                <label class="form-check-label" for="term_agree">I agree to the Terms of Service and Privacy Policy.</label>
            </div>
            <div class="invalid-feedback">
                Please agree to the Terms of Service.
            </div>
        </div>
    </div>
    <div>
        <div class="row g-3">
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control" data-validation="email" data-validation-type="replace" id="email" name="email" placeholder="Enter your email" data-gtm-form-interact-field-id="0">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="cell_phone" class="form-label">Mobile phone</label>
                    <input type="text" class="form-control" data-validation="number" data-validation-type="replace" id="cell_phone" name="cell_phone" placeholder="Enter your mobile phone number">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="name" class="form-label">Name</label>
                    <input type="text" class="form-control" data-validation="not-empty" id="name" name="name" placeholder="Enter your name">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="nickname" class="form-label">Nickname</label>
                    <input type="text" class="form-control" data-validation="not-empty" id="nickname" name="nickname" placeholder="Enter your nickname">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation"><label for="email" class="form-label">Avatar</label>
                    <div class="row flex-wrap justify-content-start align-items-center">
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_1"><img src="/_images/face_icons_circle/face_icons-circle-01.svg"></label><input class="" type="radio" id="avatar_1" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-01.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_2"><img src="/_images/face_icons_circle/face_icons-circle-02.svg"></label><input class="" type="radio" id="avatar_2" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-02.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_3"><img src="/_images/face_icons_circle/face_icons-circle-03.svg"></label><input class="" type="radio" id="avatar_3" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-03.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_4"><img src="/_images/face_icons_circle/face_icons-circle-04.svg"></label><input class="" type="radio" id="avatar_4" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-04.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_5"><img src="/_images/face_icons_circle/face_icons-circle-05.svg"></label><input class="" type="radio" id="avatar_5" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-05.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_6"><img src="/_images/face_icons_circle/face_icons-circle-06.svg"></label><input class="" type="radio" id="avatar_6" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-06.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_7"><img src="/_images/face_icons_circle/face_icons-circle-07.svg"></label><input class="" type="radio" id="avatar_7" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-07.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_8"><img src="/_images/face_icons_circle/face_icons-circle-08.svg"></label><input class="" type="radio" id="avatar_8" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-08.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_9"><img src="/_images/face_icons_circle/face_icons-circle-09.svg"></label><input class="" type="radio" id="avatar_9" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-09.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_10"><img src="/_images/face_icons_circle/face_icons-circle-10.svg"></label><input class="" type="radio" id="avatar_10" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-10.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_11"><img src="/_images/face_icons_circle/face_icons-circle-11.svg"></label><input class="" type="radio" id="avatar_11" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-11.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_12"><img src="/_images/face_icons_circle/face_icons-circle-12.svg"></label><input class="" type="radio" id="avatar_12" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-12.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_13"><img src="/_images/face_icons_circle/face_icons-circle-13.svg"></label><input class="" type="radio" id="avatar_13" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-13.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_14"><img src="/_images/face_icons_circle/face_icons-circle-14.svg"></label><input class="" type="radio" id="avatar_14" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-14.svg"></div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <label for="birth_y" class="form-label">Birthday (year)</label>
                <select class="form-select" id="birth_y" name="birth_y" data-validation="not-empty">
                    <option value="">Select year</option>
                    <option value="2023">2023</option>
                    <option value="2022">2022</option>
                    <option value="1945">1945</option>
                    <option value="1944">1944</option>
                </select>
            </div>
            <div class="col-6">
                <label for="birth_m" class="form-label">Birthday (month)</label>
                <select class="form-select" id="birth_m" name="birth_m" data-validation="not-empty">
                    <option value="">Select month</option>
                    <option value="1">January</option>
                    <option value="12">December</option>
                </select>
            </div>
            <div class="col-6">
                <label for="birth_d" class="form-label">Birthday (day)</label>
                <select class="form-select" id="birth_d" name="birth_d" data-validation="not-empty">
                    <option value="">Select day</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="31">31</option>
                </select>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" data-validation="password-8-32" id="password" name="password" placeholder="Enter your password" data-gtm-form-interact-field-id="1">
                    <div class="invalid-feedback"> Please check your password.</div>
                    <small class="form-text">8 to 32 characters combining letters, numbers, and special characters</small>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="password_re" class="form-label">Confirm password</label>
                    <input type="password" class="form-control" data-validation="password-8-32" id="password_re" name="password_re" placeholder="Enter your password again">
                    <div class="invalid-feedback"> Please check your password.</div>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <div class="form-check lh-base mt-3">
                        <input class="form-check-input" type="checkbox" id="receive_message" name="receive_message" value="Y">
                        <label class="form-check-label" for="remember_me">I agree to receive news and information.</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="my-5 text-center">
        <button class="w-50 px-4 btn btn-warning border border-3 fw-bold" type="submit">Sign up</button>
        <p class="my-3"><a href="#">Sign in</a><span class="mx-2">|</span><a href="#">Find password</a></p>
    </div>
</form>

Related Links