<!-- Page Feature -->
<div class="page_feature">
<div class="page_header">
<div class="page_header_inner">
<div class="page_header_body">
<div class="breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="breadcrumb_inner">
<nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
<div class="breadcrumb_nav_header">
<h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
</div>
<ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
<li class="breadcrumb_item breadcrumb_item_home">
<a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Home</span>
<span class="breadcrumb_pill_icon">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Navigation Level</span>
<span class="breadcrumb_pill_icon">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Parent Level</span>
<span class="breadcrumb_pill_icon">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Page Title</span>
</span>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<div class="page_intro">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-9">
<div class="page_intro_inner">
<h1 class="page_title" itemprop="name">Contact Us</h1>
<p class="page_description" itemprop="description">Keeping connected to the JTCC community is an important way that we can provide student support, and we are always here to help – whether you are looking to get involved or looking to visit us. Just reach out!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page_nav">
<div class="fs-row">
<div class="fs-cell">
<div class="page_nav_inner">
<div class="js-sub-nav-group sub_nav_group">
<button class="js-sub-nav-toggle js-swap sub_nav_toggle " data-swap-target=".js-sub-nav-group">
<span class="sub_nav_toggle_inner_default sub_nav_toggle_inner">
<span class="sub_nav_toggle_label_default sub_nav_toggle_label">Explore This Section</span>
<span class="sub_nav_toggle_icon_default sub_nav_toggle_icon" aria-hidden="true">
<span class="sub_nav_toggle_icon_inner_default sub_nav_toggle_icon_inner">
<span class="sub_nav_toggle_icon_space"></span>
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</span>
<span class="sub_nav_toggle_inner_active sub_nav_toggle_inner">
<span class="sub_nav_toggle_label_active sub_nav_toggle_label">Close</span>
<span class="sub_nav_toggle_icon_active sub_nav_toggle_icon" aria-hidden="true">
<span class="sub_nav_toggle_icon_inner_active sub_nav_toggle_icon_inner">
<span class="sub_nav_toggle_icon_space"></span>
<svg class="icon icon_caret_up">
<use href="/images/icons.svg#caret_up" />
</svg>
</span>
</span>
</span>
</button>
<nav class="js-sub-nav sub_nav" aria-labelledby="sub_nav_title">
<div class="sub_nav_header">
<h2 class="sub_nav_title" id="sub_nav_title">Sub Nav Title</h2>
</div>
<div class="js-sub-nav-body sub_nav_body">
<div class="js-sub-nav-body-inner sub_nav_body_inner">
<ul class="js-sub-nav-list sub_nav_list" aria-labelledby="sub_nav_title">
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<span class="sub_nav_link_label">Chester Campus</span>
<span class="sub_nav_link_icon">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<span class="sub_nav_link_label">Midlothian Campus</span>
<span class="sub_nav_link_icon">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<span class="sub_nav_link_label">Tyler a-z</span>
<span class="sub_nav_link_icon">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</a>
</li>
<li class="sub_nav_item">
<a class="sub_nav_link" href="#">
<span class="sub_nav_link_label">Get Involved</span>
<span class="sub_nav_link_icon">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Page Feature -->
<!-- Full Width Callouts -->
<div class="full_width_callouts">
<form method="post" action="https://moore.dev.fastspot.com/fastspot-test-pages/forms/all-fields/process/" enctype="multipart/form-data" class="form_builder">
<div class="fs-row">
<div class="fs-cell">
<div class="form_builder_required_message">
<p>
<span class="form_builder_required_star">*</span> = required field
</p>
</div>
<div class="form_builder_section_header">
<h2>Section Break</h2>
<p>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor. Aenean lacinia bibendum nulla sed consectetur. Sed posuere
consectetur est at lobortis. Integer posuere erat a ante venenatis
dapibus posuere velit aliquet.
</p>
</div>
<fieldset id="form_builder_data_2">
<label for="form_builder_field_2">
Single Line Text w/ Max Length
<span class="form_builder_required_star">*</span>
</label>
<input type="text" id="form_builder_field_2" name="form_builder_data_2" class="form_builder_text form_builder_required" value="" placeholder="With a placeholder" maxlength="125" required="" />
</fieldset>
<fieldset id="form_builder_data_3">
<label for="form_builder_field_3">
Paragraph Text <span class="form_builder_required_star">*</span>
</label>
<textarea id="form_builder_field_3" name="form_builder_data_3" class="form_builder_required" placeholder="Placeholder Text" required=""></textarea>
</fieldset>
<fieldset id="form_builder_data_17">
<label for="form_builder_field_13"> File Upload</label>
<input type="file" id="form_builder_field_13" name="form_builder_data_17" class="form_builder_upload" value="">
<div class="form_builder_sublabel"><span id="form_builder_file_size_error_13">Maximum File Size: 1 KB</span></div>
</fieldset>
<fieldset id="form_builder_data_17">
<label for="form_builder_field_13"> File Upload - Required</label>
<input type="file" id="form_builder_field_13" name="form_builder_data_17" class="form_builder_upload form_builder_required" value="">
<div class="form_builder_sublabel"><span id="form_builder_file_size_error_13">Maximum File Size: 1 KB</span></div>
</fieldset>
<fieldset id="form_builder_data_4">
<legend>
Checkboxes
</legend>
<div class="form_builder_checkbox">
<input type="checkbox" id="form_builder_field_4" name="form_builder_data_4[]" value="val1" data-price="0" />
<span class="form_builder_checkbox_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_4">Option 1</label>
</div>
<div class="form_builder_checkbox">
<input type="checkbox" id="form_builder_field_5" name="form_builder_data_4[]" value="val2" data-price="0" />
<span class="form_builder_checkbox_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_5">Option 2</label>
</div>
<div class="form_builder_checkbox">
<input type="checkbox" id="form_builder_field_6" name="form_builder_data_4[]" value="val3" data-price="0" />
<span class="form_builder_checkbox_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_6">Option 3</label>
</div>
</fieldset>
<fieldset id="form_builder_data_4">
<legend>
Checkboxes - Required
</legend>
<div class="form_builder_checkbox">
<input type="checkbox" class="form_builder_required" id="form_builder_field_4" name="form_builder_data_4[]" value="val1" data-price="0" />
<span class="form_builder_checkbox_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_4">Option 1</label>
</div>
<div class="form_builder_checkbox">
<input type="checkbox" class="form_builder_required" id="form_builder_field_5" name="form_builder_data_4[]" value="val2" data-price="0" />
<span class="form_builder_checkbox_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_5">Option 2</label>
</div>
<div class="form_builder_checkbox">
<input type="checkbox" class="form_builder_required" id="form_builder_field_6" name="form_builder_data_4[]" value="val3" data-price="0" />
<span class="form_builder_checkbox_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_6">Option 3</label>
</div>
</fieldset>
<fieldset id="form_builder_data_5">
<legend>
Radio Buttons
</legend>
<div class="form_builder_radio">
<input type="radio" id="form_builder_field_8" name="form_builder_data_5" value="val1" data-price="0" />
<span class="form_builder_radio_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_8">Option 1</label>
</div>
<div class="form_builder_radio">
<input type="radio" id="form_builder_field_9" name="form_builder_data_5" value="val2" data-price="0" />
<span class="form_builder_radio_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_9">Option 2</label>
</div>
<div class="form_builder_radio">
<input type="radio" id="form_builder_field_10" name="form_builder_data_5" value="val3" data-price="0" />
<span class="form_builder_radio_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_10">Option 3</label>
</div>
</fieldset>
<fieldset id="form_builder_data_5">
<legend>
Radio Buttons - Required
</legend>
<div class="form_builder_radio">
<input type="radio" class="form_builder_required" id="form_builder_field_8" name="form_builder_data_5" value="val1" data-price="0" />
<span class="form_builder_radio_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_8">Option 1</label>
</div>
<div class="form_builder_radio">
<input type="radio" class="form_builder_required" id="form_builder_field_9" name="form_builder_data_5" value="val2" data-price="0" />
<span class="form_builder_radio_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_9">Option 2</label>
</div>
<div class="form_builder_radio">
<input type="radio" class="form_builder_required" id="form_builder_field_10" name="form_builder_data_5" value="val3" data-price="0" />
<span class="form_builder_radio_indicator"></span>
<label class="form_builder_for_checkbox" for="form_builder_field_10">Option 3</label>
</div>
</fieldset>
<fieldset id="form_builder_data_6">
<label for="form_builder_field_12"> Dropdown List</label>
<div class="form_builder_select">
<select id="form_builder_field_12" name="form_builder_data_6">
<option value="val1" data-price="0">Option 1</option>
<option value="val2" data-price="0">Option 2</option>
<option value="val3" data-price="0">Option 3</option>
</select>
</div>
</fieldset>
<fieldset id="form_builder_data_6">
<label for="form_builder_field_12"> Dropdown List - Required</label>
<div class="form_builder_select">
<select id="form_builder_field_12" class="form_builder_required" name="form_builder_data_6">
<option value="val1" data-price="0">Option 1</option>
<option value="val2" data-price="0">Option 2</option>
<option value="val3" data-price="0">Option 3</option>
</select>
</div>
</fieldset>
<script>
document.getElementById(
"form_builder_field_13"
).onchange = function() {
if (this.files[0].size > 1500000) {
this.className =
this.className.replace("form_builder_error", "") +
" form_builder_error";
this.value = "";
document.getElementById(
"form_builder_file_size_error_13"
).className = "form_builder_file_size_error";
} else {
this.className = this.className.replace(
"form_builder_error",
""
);
document.getElementById(
"form_builder_file_size_error_13"
).className = "";
}
};
</script>
<fieldset id="form_builder_data_8">
<legend for="form_builder_field_14">
Name
</legend>
<div class="form_builder_wrap">
<div class="form_builder_firstname">
<input type="text" name="form_builder_data_8[first]" id="form_builder_field_14" class="form_builder_text" value="" autocomplete="section-name given-name" />
<label for="form_builder_field_14" class="form_builder_sublabel">First</label>
</div>
<div class="form_builder_lastname">
<input type="text" name="form_builder_data_8[last]" id="form_builder_field_15" class="form_builder_text" value="" autocomplete="section-name family-name" />
<label for="form_builder_field_15" class="form_builder_sublabel">Last</label>
</div>
</div>
</fieldset>
<fieldset id="form_builder_data_9">
<legend for="form_builder_field_16">
Date
</legend>
<div class="form_builder_date_2">
<input type="text" maxlength="2" name="form_builder_data_9[month]" id="form_builder_field_16" class="form_builder_text" value="" />
<label for="form_builder_field_16" class="form_builder_sublabel form_builder_centered">MM</label>
</div>
<div class="form_builder_date_2">
<input type="text" maxlength="2" name="form_builder_data_9[day]" id="form_builder_field_17" class="form_builder_text" value="" />
<label for="form_builder_field_17" class="form_builder_sublabel form_builder_centered">DD</label>
</div>
<div class="form_builder_date_4">
<input type="text" maxlength="4" name="form_builder_data_9[year]" id="form_builder_field_18" class="form_builder_text" value="" />
<label for="form_builder_field_18" class="form_builder_sublabel form_builder_centered">YYYY</label>
</div>
</fieldset>
<fieldset class="form_builder_address" id="form_builder_data_10">
<legend for="form_builder_field_19">
Address
</legend>
<div class="form_builder_full">
<input type="text" name="form_builder_data_10[street]" id="form_builder_field_19" class="form_builder_text" value="" autocomplete="section-address address-line1" />
<label for="form_builder_field_19" class="form_builder_sublabel">Street Address</label>
</div>
<div class="form_builder_full">
<input type="text" name="form_builder_data_10[street2]" id="form_builder_field_20" class="form_builder_text" value="" autocomplete="section-address address-line2" />
<label for="form_builder_field_20" class="form_builder_sublabel">Street Address Line 2</label>
</div>
<div class="form_builder_split">
<input type="text" name="form_builder_data_10[city]" id="form_builder_field_21" class="form_builder_text" value="" autocomplete="section-address address-level2" />
<label for="form_builder_field_21" class="form_builder_sublabel">City</label>
</div>
<div class="form_builder_split form_builder_split_last_col">
<input type="text" name="form_builder_data_10[state]" id="form_builder_field_22" class="form_builder_text" value="" autocomplete="section-address address-level1" />
<label for="form_builder_field_22" class="form_builder_sublabel">State / Province / Region</label>
</div>
<div class="form_builder_split form_builder_split_last_row">
<input type="text" name="form_builder_data_10[zip]" id="form_builder_field_23" class="form_builder_text" value="" autocomplete="section-address postal-code" />
<label for="form_builder_field_23" class="form_builder_sublabel">Postal / Zip Code</label>
</div>
<div class="form_builder_split form_builder_split_last_row form_builder_split_last_col">
<input type="text" name="form_builder_data_10[country]" id="form_builder_field_24" class="form_builder_text" value="United States" autocomplete="section-address country-name" />
<label for="form_builder_field_24" class="form_builder_sublabel">Country</label>
</div>
</fieldset>
<fieldset id="form_builder_data_11">
<label for="form_builder_field_25"> Email Address </label>
<input type="email" id="form_builder_field_25" name="form_builder_data_11" class="form_builder_text form_builder_email" value="" autocomplete="section-email-address email" />
</fieldset>
<fieldset id="form_builder_data_12">
<label for="form_builder_field_26"> Website </label>
<input type="url" id="form_builder_field_26" name="form_builder_data_12" class="form_builder_text form_builder_url" value="" autocomplete="section-website url" />
</fieldset>
<fieldset id="form_builder_data_13">
<legend for="form_builder_field_27">
Phone Number
</legend>
<div class="form_builder_wrap">
<div class="form_builder_phone_3">
<input type="text" maxlength="3" name="form_builder_data_13[first]" id="form_builder_field_27" class="form_builder_text" value="" autocomplete="section-phone-number tel-area-code" />
<label for="form_builder_field_27" class="form_builder_sublabel form_builder_centered">###</label>
</div>
<div class="form_builder_phone_3">
<input type="text" maxlength="3" name="form_builder_data_13[second]" id="form_builder_field_28" class="form_builder_text" value="" autocomplete="section-phone-number tel-local-prefix" />
<label for="form_builder_field_28" class="form_builder_sublabel form_builder_centered">###</label>
</div>
<div class="form_builder_phone_4">
<input type="text" maxlength="4" name="form_builder_data_13[third]" id="form_builder_field_29" class="form_builder_text" value="" autocomplete="section-phone-number tel-local-suffix" />
<label for="form_builder_field_29" class="form_builder_sublabel form_builder_centered">####</label>
</div>
</div>
</fieldset>
<div class="form_builder_submit_wrapper">
<div class="form_builder_submit_pill">
<input type="submit" class="form_builder_submit" value="Submit Form" />
<span class="form_builder_submit_icon">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</div>
</div>
<div class="form_builder_reset_wrapper">
<div class="form_builder_reset_pill">
<input type="reset" class="form_builder_reset" value="Reset Form" />
<span class="form_builder_reset_icon">
<svg class="icon icon_reset">
<use href="/images/icons.svg#reset" />
</svg>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- END: Full Width Callouts -->
<!-- Page Feature -->
<div class="page_feature">
{% render "@partial-page-header--description" %}
{% render "@partial-page-nav" %}
</div>
<!-- END: Page Feature -->
<!-- Full Width Callouts -->
<div class="full_width_callouts">
{% render "@partial-form-builder" %}
</div>
<!-- END: Full Width Callouts -->
No notes defined.