/**
Font - Figtree is loaded from Google Fonts
*/
/**
Css variables
*/
html {
--primary-color: rgba(35, 153, 240);
--text-primary: rgba(0, 14, 36, 0.87);
--text-caption: rgba(0, 27, 72, 0.54);
--text-red-50: rgba(230, 54, 85);
--controls-border-color: rgba(0, 27, 72, 0.32);
--controls-border-radius: 8px;
--input-focus-box-shadow: 0px 0px 0px 2px rgba(35, 153, 240, 0.5);
--input-focus-border-color: var(--primary-color);
--card-box-shadow: 0px 2px 8px rgba(0, 27, 72, 0.13);
--st-color-white: #FFF;
--st-color-primary: rgba(35, 153, 240);
--st-color-text-disabled: rgba(0, 27, 72, 0.32);
}
/*
* ST Signup Forms styles
*/
body {
margin: 0;
padding: 0;
height: 100%;
font-size: 14px;
line-height: 14px;
font-family: 'Figtree', Arial, sans-serif;
font-weight: 400;
color: var(--text-primary);
}
/* Fonts and helpers */
.st-title {
font-size: 1.25em;
font-weight: 700;
line-height: 1.5em;
color: var(--text-primary);
margin-bottom: 8px;
}
.st-general-error {
font-size: 1.25em;
line-height: 1.5em;
color: var(--text-red-50);
margin-bottom: 8px;
text-align: center;
}
/* Error icon */
.st-general-error img {
width: 1.25em;
height: 1.25em;
margin-bottom: -0.2em;
}
.st-font-caption {
font-size: 12px;
color: var(--text-caption);
line-height: 14px;
}
.st-font-caption a {
color: var(--text-caption);
}
.st-hidden {
display: none;
}
/* Sign-Up form */
@media (max-width: 246px) {
.st-signupform {
justify-content: flex-start;
}
}
.st-signupform {
display: flex;
justify-content: center;
}
.st-signupform-content {
max-width: 540px;
box-sizing: border-box;
padding: 32px;
color: var(--text-primary);
line-height: 1.5;
background: white;
box-shadow: var(--card-box-shadow);
border-radius: var(--controls-border-radius);
}
.st-signupform__label {
color: var(--text-primary);
font-weight: bold;
font-size: 14px;
line-height: 2em;
word-break: break-word;
}
.st-signupform__label .required-mark {
color: var(--text-red-50);
}
.st-signupform input:focus,
.st-signupform select:focus,
.st-signupform textarea:focus,
.st-signupform button:focus {
outline: none;
}
.st-signupform .st-error-message {
margin-bottom: 4px;
color: var(--text-red-50);
}
.st-checkbox-list {
margin-bottom: 4px;
}
.st-checkbox {
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 16px;
line-height: 18px;
}
.st-field-option {
margin-bottom: 8px;
}
.st-field-option:last-child {
margin-bottom: 0;
}
.st-checkbox label {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.st-signupform input[type="text"],textarea {
width: 100%;
background-color: white;
border: 1px solid var(--controls-border-color);
border-radius: var(--controls-border-radius);
box-sizing: border-box;
padding: 8px;
font-size: 14px;
margin: 4px 0;
outline: none;
-webkit-transition: .3s all;
transition: .3s all;
}
.st-signupform input[type="text"]:focus,
textarea:focus,
.st-signupform input[type="checkbox"]:focus,
button:focus
{
border-color: var(--input-focus-border-color);
box-shadow: var(--input-focus-box-shadow);
-webkit-transition: .3s all;
transition: .3s all;
}
.st-signupform input[type="checkbox"] {
appearance: none;
width: 18px;
height: 18px;
border-radius: 4px;
background-color: var(--st-color-white);
border: 1px solid var(--st-color-text-disabled);
box-shadow: inset 0 0 3px rgb(0 0 0 / 15%);
position: relative;
transition: .3s all;
cursor: pointer;
box-sizing: border-box;
}
.st-signupform input[type="checkbox"]:disabled {
cursor: default;
}
.st-signupform input[type="checkbox"]:before {
content: '';
background-image: url('../join-web-form/st-checkbox.svg');
background-size: 8px;
display: block;
position: absolute;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
left: 0;
right: 0;
bottom: 0;
top: 0;
transition: .3s all;
}
.st-signupform input[type="checkbox"]:after {
content: '';
position: absolute;
width: 10px;
height: 2px;
border-radius: 2px;
background-color: var(--st-color-white);
opacity: 0;
transition: .3s all;
top: 7px;
left: 3px;
}
.st-signupform input[type="checkbox"]:checked {
background-color: var(--st-color-primary);
border-color: var(--st-color-primary);
}
.st-signupform input[type="checkbox"]:checked:before {
opacity: 1;
background-size: 12px;
}
.st-signupform input[type="checkbox"]:indeterminate {
background-color: var(--st-color-primary);
border-color: var(--st-color-primary);
}
.st-signupform input[type="checkbox"]:indeterminate:after {
opacity: 1;
}
.st-signupform button[type="submit"] {
display: block;
width: 100%;
border-radius: var(--controls-border-radius);
box-sizing: border-box;
padding: 8px 16px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
text-align: center;
cursor: pointer;
line-height: 20px;
background-color: var(--primary-color);
border: 0 none;
color: white;
margin: 30px 0 24px;
}
.st-signupform button[type="submit"]:disabled {
cursor: default;
background-color: var(--st-color-text-disabled);
color: white;
}
.st-signupform input.st-signupform-validation-error, textarea.st-signupform-validation-error,
.st-signupform input.st-signupform-validation-error:focus, textarea.st-signupform-validation-error:focus {
border-color: #F44336;
}
.st-signupform textarea {
padding-right: 24px;
resize: vertical;
min-height: 80px;
max-height: 200px;
}
.terms-checkbox {
margin-bottom: 4px;
}
.st-signupform .st-terms-and-conditions {
margin-top: 22px;
}
.st-signupform .st-terms-and-conditions-text {
color: var(--text-primary);
font-size: 16px;
line-height: 18px;
}
.st-signupform .st-terms-and-conditions-caption {
margin-left: 24px;
}
.st-signupform-terms-agreed-error {
margin: 4px 0 0 24px;
color: var(--text-red-50);
}
.st-signupform-server-error-message {
color: var(--text-red-50);
}
.st-signupform footer {
font-size: 14px;
color: var(--text-primary);
text-align: center;
}
.st-signupform footer a {
color: var(--primary-color);
}
Join Text Messaging List
(function joinWebForm(
win, doc, webFormId, formFields,
DUPLICATE_EMAIL_EXCEPTION, DUPLICATE_PHONE_EXCEPTION,CUSTOM_FIELDS_VALIDATION_EXCEPTION,
) {
const XHR = ('onload' in new win.XMLHttpRequest()) ? win.XMLHttpRequest : win.XDomainRequest;
const fieldErrorClassName = 'st-signupform-validation-error';
function getFormServerErrorMessage(form) {
return form.querySelector('.st-signupform-server-error-message');
}
function getFormTermsAgreedError(form) {
return form.querySelector('.st-signupform-terms-agreed-error');
}
function getSubmitButton(form) {
return form.querySelector('#subscribeNow');
}
function setServerErrorMessage(form, message) {
const formServerErrorMessage = getFormServerErrorMessage(form);
formServerErrorMessage.innerText = message;
if (message) {
formServerErrorMessage.classList.add("st-hidden");
} else {
formServerErrorMessage.classList.remove("st-hidden");
}
}
function isTermsAgreedAccepted(form) {
return form.querySelector('input[name="terms-agreed"]').checked;
}
function showTermsAgreedError(form) {
const submitButton = getSubmitButton(form);
const formTermsAgreedError = getFormTermsAgreedError(form);
submitButton.disabled = false;
formTermsAgreedError.classList.remove("st-hidden");
}
function hideTermsAgreedError(form) {
const formTermsAgreedError = getFormTermsAgreedError(form);
formTermsAgreedError.classList.add("st-hidden");
}
function clearFormErrors(form) {
const fields = form.querySelectorAll(`.${fieldErrorClassName}`);
fields.forEach(function (field) {
field.classList.remove(fieldErrorClassName);
const fieldError = form.querySelector(`#js-error-${field.name}`);
fieldError.innerText = '';
});
setServerErrorMessage(form, '');
hideTermsAgreedError(form);
}
function collectFormData(form) {
const formData = new FormData(form);
const data = {
webFormId,
fieldValues: {},
listIds: [],
};
formData.forEach(function (value, name) {
if (name === 'list') {
data.listIds.push(value);
} else if (name === 'phone') {
data.fieldValues[name] = value.replace(/\D/g, '');
} else if (!['terms-agreed', 'webFormId'].includes(name)) {
data.fieldValues[name] = value;
}
});
return data;
}
function convertServerErrorMessage(fieldName, errorMessage) {
const field = formFields.find(formField => formField.name === fieldName);
if (errorMessage === 'Required field value is empty') {
return `${field.label} is required`;
} else {
if (field.type === 'phone') {
return `${field.label} is required in (XXX) XXX-XXXX format`;
} else if (field.type === 'date') {
return `${field.label} is required in MM/DD/YYYY format`;
} else if (field.type === 'zipCode') {
if (field.format === 'US') {
return `${field.label} is required in XXXXX format`;
} else {
return `${field.label} is required in XXX-XXX format`;
}
} else if (field.type === 'url') {
return `${field.label} is required in http(s)://xxxxxx.xx format`;
} else if (field.type === 'gender') {
return `${field.label} is required in M, m, F, f, Male, Female, male, female format`;
} else if (field.type === 'number') {
return `${field.label} is required in number format`;
} else if (field.name === 'birthday') {
return `${field.label} is required in MM/DD/YYYY format`;
}
return errorMessage;
}
}
function parseServerValidationError(response) {
let results;
try {
const error = win.JSON.parse(response);
if (error.code === DUPLICATE_PHONE_EXCEPTION) {
results = [
{
fieldName: 'phone',
errorMessage: 'Phone number already exists.'
}
];
} else if (error.code === DUPLICATE_EMAIL_EXCEPTION) {
results = [
{
fieldName: 'email',
errorMessage: 'Email already exists.'
}
];
} else if (error.code === CUSTOM_FIELDS_VALIDATION_EXCEPTION) {
results = Object.entries(error.reasons).map(([key, value]) => ({
fieldName: key,
errorMessage: convertServerErrorMessage(key, value)
}));
} else {
results = [
{
fieldName: error.invalidValueName,
errorMessage: convertServerErrorMessage(key, error.reason)
}
];
}
} catch (error) {
results = [
{
fieldName: '',
errorMessage: 'Validation error.'
}
];
}
return results;
}
function handleLoadForm(form) {
const submitButton = getSubmitButton(form);
if (this.status === 200) {
const formData = new FormData(form);
const confirmationTextEl = form.querySelector('.step2-confirmationText');
confirmationTextEl.innerText = confirmationTextEl.innerText.replace('%%phone%%', formData.get('phone'));
form.querySelector('.step1-form').style.display = 'none';
confirmationTextEl.style.display = 'block';
form.reset();
} else if (this.status === 418) {
submitButton.disabled = false;
const validations = parseServerValidationError(this.responseText);
if (validations.length > 0) {
if (validations[0].fieldName) {
validations.forEach((validation) => {
const fields =
form.querySelectorAll(
`input[name="${validation.fieldName}"], textarea[name="${validation.fieldName}"]`
);
fields.forEach((field) => {
field.classList.add(fieldErrorClassName);
});
const fieldError =
form.querySelector(`#js-error-${validation.fieldName}`);
fieldError.innerText = validation.errorMessage;
});
} else {
setServerErrorMessage(form, validations[0].errorMessage);
}
} else {
setServerErrorMessage(form, 'Internal Error. Please, try later.');
}
} else {
submitButton.disabled = false;
setServerErrorMessage(form, 'Internal Error. Please, try later.');
}
}
function handleErrorForm(form) {
const submitButton = getSubmitButton(form);
submitButton.disabled = false;
setServerErrorMessage(form, 'Internal Error. Please, try later.');
}
function sendForm(form) {
const data = collectFormData(form);
const url = `${form.action}?r=${Date.now()}`;
const request = new XHR();
request.open(form.method, url);
request.onload = function () { handleLoadForm.call(this, form) };
request.onerror = function () { handleErrorForm.call(this, form) };
request.ontimeout = function () { handleErrorForm.call(this, form) };
try {
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
} catch (_) { /* ignore if we can't set headers */
}
request.send(win.JSON.stringify(data));
}
function handleSubmitForm(event) {
event.preventDefault();
const form = event.target;
const submitButton = getSubmitButton(form);
try {
submitButton.disabled = true;
clearFormErrors(form);
if (!isTermsAgreedAccepted(form)) {
showTermsAgreedError(form);
} else {
sendForm(form);
}
} catch (e) {
console.error(e);
setServerErrorMessage(form, 'Internal Error. Please, try later.');
submitButton.disabled = false;
}
}
function formatPhone(value) {
const numbers = value.replace(/\D/g, '');
const firstPart = numbers.substring(0, 3);
const secondPart = numbers.substring(3, 6);
const thirdPart = numbers.substring(6, 10);
let result = '';
if (firstPart) {
result += `(${firstPart}`;
}
if (secondPart) {
result += `) ${secondPart}`;
}
if (thirdPart) {
result += `-${thirdPart}`;
}
return result;
}
function handleChangePhoneField(event) {
const field = event.currentTarget;
field.value = formatPhone(field.value);
}
function handleChangeDateField(event) {
const field = event.currentTarget;
const numbers = field.value.replace(/\D/g, '');
const month = numbers.substr(0, 2);
const day = numbers.substr(2, 2);
const year = numbers.substr(4, 4);
field.value = `${month}${day ? `/${day}` : ''}${year ? `/${year}` : ''}`;
}
function handleChangeZipCodeField(event) {
const field = event.currentTarget;
field.value = field.value.replace(/\D/g, '').substr(0, 5);
}
function handleChangePostalCodeField(event) {
const field = event.currentTarget;
const numbers = field.value.replace(/([^a-zA-Z0-9])/g, '');
const code1 = numbers.substr(0, 3);
const code2 = numbers.substr(3, 3);
field.value = `${code1}${code2 ? `-${code2}` : ''}`;
}
function handleChangeNumberField(event) {
const field = event.currentTarget;
field.value = field.value.replace(/[^0-9,.]/g, '');
}
function handleLoad() {
const forms = doc.querySelectorAll(`#st-join-web-form-${webFormId}`);
for(let i=0; i<forms.length; i++) {
const form = forms[i];
if (!form.hasAttribute('data-form-initialized')) {
form.setAttribute('data-form-initialized', true);
form.addEventListener('submit', handleSubmitForm);
const phoneFields = form.querySelectorAll('input[data-type="phone"]');
phoneFields.forEach(function (field) {
field.addEventListener('input', handleChangePhoneField);
});
const dateFields = form.querySelectorAll('input[data-type="date"]');
dateFields.forEach(function (field) {
field.addEventListener('input', handleChangeDateField);
});
const postalCodeFields = form.querySelectorAll('input[data-type="zipCode"][data-format="CA"]');
postalCodeFields.forEach(function (field) {
field.addEventListener('input', handleChangePostalCodeField);
});
const zipCodeFields = form.querySelectorAll('input[data-type="zipCode"][data-format="US"]');
zipCodeFields.forEach(function (field) {
field.addEventListener('input', handleChangeZipCodeField);
});
const numberFields = form.querySelectorAll('input[data-type="number"]');
numberFields.forEach(function (field) {
field.addEventListener('input', handleChangeNumberField);
});
const agreedFields = form.querySelector(`#terms-agreed-checkbox-${webFormId}`);
agreedFields.id += `-${i.toString(10)}`;
const agreedTerms = form.querySelector('.st-terms-and-conditions-text');
agreedTerms.setAttribute('for', agreedFields.id);
}
}
}
win.addEventListener('load', handleLoad);
}
)(
window, document, '69f38a3fbf898f24b24d932d', [{"name":"phone","label":"Phone","placeholder":"(XXX) XXX-XXXX","type":"phone","value":"","required":true},{"name":"list","options":[{"value":"69eb92b2e651ce21c5765f4f","label":"General Club Notifications"},{"value":"69efd8ce9d66a7542b7d9b57","label":"Group Ex"},{"value":"69f21449bfdb750ebe525378","label":"Aqua"},{"value":"69f38ce5bf898f24b24f5e3a","label":"Tennis"},{"value":"69f38cf23507d221b0453f0f","label":"After School"},{"value":"69f38d093507d221b0454ec0","label":"Camp"}],"label":"List","type":"select","value":"","required":true},{"name":"firstname","label":"Contact first name","placeholder":"John","type":"text","value":"","required":true},{"name":"lastname","label":"Contact last name","placeholder":"Smith","type":"text","value":"","required":true},{"name":"email","label":"Contact email","placeholder":"[email protected]","type":"text","value":"","required":false}],
'DuplicateContactEmailException', 'DuplicateContactPhoneException', 'CustomFieldsValidationException'
);
I agree to receive promotional messages from Premier Athletic Club up to 10 Msgs/Month.
This agreement isn't a condition of any purchase.
I also agree to the
Terms of Service and
Privacy Policy.
Msg & Data rates may apply.
By submitting this form, I agree that my mobile information will not be shared
with third parties/affiliates for marketing/promotional purposes.
All the above categories exclude my text messaging originator opt-in data and consent;
this information will not be shared with any third parties, except for the
necessary opt-in data required to facilitate the SMS service.
Text STOP to opt-out. Text HELP for assistance. [email protected].
You have to agree on terms in order to proceed to the subscription.
Thank you for signing up! You will receive messages from Premier Athletic Club.
