Account settings Form 

<div class="account-settings-form" data-module="accountSettingsForm" data-api-endpoint="http://ti-dev-web.hugoandcat.dev/api/sitecore/customform/subscribe" data-user-profile-endpoint=/data/user-profile.json>
    <h3 class="account-settings-form__title">Account settings</h3>
    <p class="account-settings-form__subtitle">Help us show you great ideas that are relevant to you and your travel time.</p>
    <form class="account-settings-form__form js-account-settings-form">
        <div class="account-settings-form__grid-container grid-container grid-layout__row">
            <div class="grid-x align-center grid-padding-x">
                <div class="cell small-6">
                    <div class="sitecore-form__field-wrapper sitecore-form__field-wrapper--locked">
                        <label for="firstName" class="sitecore-form__label">First name</label>
                        <input id="firstName" name="firstName" class="sitecore-form__input account-settings-form__input js-account-settings-first-name" type="text" readonly value="" maxlength="255" placeholder="">
                    </div>
                </div>
                <div class="cell small-6">
                    <div class="sitecore-form__field-wrapper sitecore-form__field-wrapper--locked">
                        <label for="firstName" class="sitecore-form__label">Last name</label>
                        <input id="lastName" name="lastName" class="sitecore-form__input account-settings-form__input  js-account-settings-last-name" type="text" readonly value="" maxlength="255" placeholder="">
                    </div>
                </div>
            </div>
            <div class="grid-x align-center grid-padding-x">
                <div class="cell medium-6">
                    <div class="sitecore-form__field-wrapper sitecore-form__field-wrapper--locked account-settings-form__email-address">
                        <label for="emailAddress" class="sitecore-form__label">Email address</label>
                        <input id="emailAddress" name="emailAddress" class="sitecore-form__input account-settings-form__input js-account-settings-email" type="email" readonly value="" maxlength="255" placeholder="">
                    </div>
                </div>
                <div class="cell medium-6"></div>
            </div>
        </div>
        <div class="account-settings-form__button">
            <a href="#" class="button-p2 button-p2--with-icon js-account-settings-submit">Update password</a>
        </div>
    </form>
</div>
 
<div class="account-settings-form" data-module="accountSettingsForm" data-api-endpoint="{{form.apiEndpoint}}" data-user-profile-endpoint={{userProfileEndpoint}}>
    <h3 class="account-settings-form__title">{{title}}</h3>
    <p class="account-settings-form__subtitle">{{subtitle}}</p>
    <form class="account-settings-form__form js-account-settings-form">
        <div class="account-settings-form__grid-container grid-container grid-layout__row">
            <div class="grid-x align-center grid-padding-x">
                <div class="cell small-6">
                    <div class="sitecore-form__field-wrapper sitecore-form__field-wrapper--locked">
                        <label for="firstName" class="sitecore-form__label">{{form.firstName.labelText}}</label>
                        <input id="firstName" name="firstName" class="sitecore-form__input account-settings-form__input js-account-settings-first-name" type="text" readonly value="" maxlength="255" placeholder="{{form.firstName.text}}">
                    </div>
                </div>
                <div class="cell small-6">
                    <div class="sitecore-form__field-wrapper sitecore-form__field-wrapper--locked">
                        <label for="firstName" class="sitecore-form__label">{{form.lastName.labelText}}</label>
                        <input id="lastName" name="lastName" class="sitecore-form__input account-settings-form__input  js-account-settings-last-name" type="text" readonly value="" maxlength="255" placeholder="{{form.lastName.text}}">
                    </div>
                </div>
            </div>
            <div class="grid-x align-center grid-padding-x">
                <div class="cell medium-6">
                    <div class="sitecore-form__field-wrapper sitecore-form__field-wrapper--locked account-settings-form__email-address">
                        <label for="emailAddress" class="sitecore-form__label">{{form.emailAddress.labelText}}</label>
                        <input id="emailAddress" name="emailAddress" class="sitecore-form__input account-settings-form__input js-account-settings-email" type="email" readonly value="" maxlength="255" placeholder="{{form.emailAddress.text}}">
                    </div>
                </div>
                <div class="cell medium-6"></div>
            </div>
        </div>
        <div class="account-settings-form__button">
            <a href="{{form.button.url}}" class="button-p2 button-p2--with-icon js-account-settings-submit">{{form.button.text}}</a>
        </div>
    </form>
</div>
 
{
  "title": "Account settings",
  "subtitle": "Help us show you great ideas that are relevant to you and your travel time.",
  "userProfileEndpoint": "/data/user-profile.json",
  "form": {
    "apiEndpoint": "http://ti-dev-web.hugoandcat.dev/api/sitecore/customform/subscribe",
    "firstName": {
      "labelText": "First name"
    },
    "lastName": {
      "labelText": "Last name"
    },
    "emailAddress": {
      "labelText": "Email address"
    },
    "errorMessage": "Email format incorrect",
    "apiErrorMessage": "Something went wrong...",
    "successMessage": "Success! Thank you for subscribing to our newsletter.",
    "button": {
      "text": "Update password",
      "url": "#"
    }
  }
}

There are no notes for this item.