<!-- Page Feature -->
<div class="page_feature">
<div class="page_header_bg">
<div class="page_header_bg_inner">
<div class="page_header_bg_group">
<div class="page_header_bg_media">
<div class="page_header_bg_media_inner">
<figure class="page_header_bg_figure">
<span class="lazy_image_wrapper page_header_bg_image_wrapper">
<img class="js-lazy js-lazyload page_header_bg_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/jtcc/500x214/10" data-srcset="//images.fastspot.com/jtcc/500x214/10 500w, //images.fastspot.com/jtcc/740x317/10 740w, //images.fastspot.com/jtcc/980x420/10 980w, //images.fastspot.com/jtcc/1220x523/10 1220w, //images.fastspot.com/jtcc/1440x617/10 1440w" alt="">
</span>
<noscript>
<img class="page_header_bg_image" src="https://images.fastspot.com/jtcc/1440x617/10" srcset="//images.fastspot.com/jtcc/1440x617/10 1440w, //images.fastspot.com/jtcc/1220x523/10 1220w, //images.fastspot.com/jtcc/980x420/10 980w, //images.fastspot.com/jtcc/740x317/10 740w, //images.fastspot.com/jtcc/500x214/10 500w" sizes="100vw" alt="" itemprop="primaryImageOfPage">
</noscript>
</figure>
</div>
</div>
<div class="page_header_bg_content">
<div class="page_intro">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-9">
<div class="page_intro_inner">
<div class="breadcrumb">
<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>
<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>
</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-bg--description" %}
</div>
<!-- END: Page Feature -->
<!-- Full Width Callouts -->
<div class="full_width_callouts">
{% render "@partial-form-builder" %}
</div>
<!-- END: Full Width Callouts -->
No notes defined.