{% extends "base.html" %}
{% load static %}
{% block title %}Contact {{ SITE_NAME }} · Free estimate{% endblock %}
{% block og_title %}Contact {{ SITE_NAME }} · Free estimate{% endblock %}
{% block twitter_title %}Contact {{ SITE_NAME }} · Free estimate{% endblock %}
{% block meta_description %}Request a free painting estimate from College Craft in Wheaton. Call {{ CONTACT_PHONE }} or send a message. {{ CONTACT_ADDRESS }}.{% endblock %}
{% block og_description %}Request a free painting estimate from College Craft in Wheaton.{% endblock %}
{% block twitter_description %}Request a free painting estimate from College Craft in Wheaton.{% endblock %}
{% block structured_data %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ContactPage",
  "name": "Contact {{ SITE_NAME|escapejs }}",
  "url": "{{ PUBLIC_SITE_URL }}{% url 'public:contact' %}",
  "mainEntity": {
    "@type": "HousePainter",
    "name": "{{ SITE_NAME|escapejs }}",
    "telephone": "{{ CONTACT_PHONE|escapejs }}",
    "email": "{{ CONTACT_EMAIL|escapejs }}",
    {% if CONTACT_ADDRESS %}"address": "{{ CONTACT_ADDRESS|escapejs }}",{% endif %}
    "areaServed": "{{ CONTACT_SERVICE_AREA|escapejs }}"
  }
}
</script>
{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/address-autocomplete.css' %}">
{% endblock %}
{% block content %}
  {% include "public/_breadcrumbs.html" with title="Contact" subtitle="View our contacts or write us a message" bg_image="images/breadcrumbs-bg-7.jpg" %}
  <section class="section section-md bg-default">
    <div class="container">
      <div class="row row-40">
        <div class="col-sm-6 col-md-4">
          <div class="box-lined">
            <div class="box-lined-body">
              <h6 class="box-lined-title">Email &amp; telephone</h6>
              <ul class="box-lined-list">
                {% if CONTACT_EMAIL %}<li><a class="big contact-link" href="mailto:{{ CONTACT_EMAIL }}">{{ CONTACT_EMAIL }}</a></li>{% endif %}
                {% if CONTACT_PHONE %}<li><a class="big contact-link" href="tel:{{ CONTACT_PHONE_TEL }}">{{ CONTACT_PHONE }}</a></li>{% endif %}
              </ul>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="box-lined">
            <div class="box-lined-body">
              <h6 class="box-lined-title">Address</h6>
              <ul class="box-lined-list">
                <li class="big text-black">{% if CONTACT_ADDRESS %}{{ CONTACT_ADDRESS }}{% else %}{{ CONTACT_SERVICE_AREA }}{% endif %}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-sm-12 col-md-4">
          <div class="box-lined">
            <div class="box-lined-body">
              <h6 class="box-lined-title">Service area</h6>
              <ul class="box-lined-list">
                <li class="big text-black">Western suburbs of Chicago, including Wheaton, Glen Ellyn, Geneva, St. Charles, Batavia, Naperville, and neighboring towns.</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="section section-md bg-default contact-form-section">
    <div class="container">
      <h4>Get in touch with us</h4>
      <p class="big">Tell us about the rooms, the exterior, or the building. We will follow up with a free estimate.</p>
      <form class="rd-form form-boxed" method="post" action="{% url 'public:contact' %}">
        {% csrf_token %}
        <div class="row row-50">
          <div class="col-lg-4">
            <div class="form-wrap">
              <label class="form-label-outside" for="{{ form.first_name.id_for_label }}">First name</label>
              {{ form.first_name }}
              {{ form.first_name.errors }}
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-wrap">
              <label class="form-label-outside" for="{{ form.last_name.id_for_label }}">Last name</label>
              {{ form.last_name }}
              {{ form.last_name.errors }}
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-wrap">
              <label class="form-label-outside" for="{{ form.email.id_for_label }}">Email</label>
              {{ form.email }}
              {{ form.email.errors }}
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-wrap">
              <label class="form-label-outside" for="{{ form.phone.id_for_label }}">Phone</label>
              {{ form.phone }}
              {{ form.phone.errors }}
            </div>
          </div>
          <div class="col-lg-8">
            <div class="form-wrap">
              <label class="form-label-outside" for="{{ form.interest.id_for_label }}">I am interested in</label>
              {{ form.interest }}
              {{ form.interest.errors }}
            </div>
          </div>
          <div class="col-12">
            <p class="form-label-outside">Mailing address <span style="font-weight:400;color:#6b7280">(optional — for postcards)</span></p>
          </div>
          <div class="col-12" data-address-autocomplete data-suggest-url="{% url 'address_suggest' %}">
            <div class="form-wrap address-ac-wrap">
              <label class="form-label-outside" for="{{ form.address_line1.id_for_label }}">Street address</label>
              {{ form.address_line1 }}
              {{ form.address_line1.errors }}
            </div>
            <div class="row row-30">
              <div class="col-md-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.address_line2.id_for_label }}">Apt / suite</label>
                  {{ form.address_line2 }}
                  {{ form.address_line2.errors }}
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.address_city.id_for_label }}">City</label>
                  {{ form.address_city }}
                  {{ form.address_city.errors }}
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.address_state.id_for_label }}">State</label>
                  {{ form.address_state }}
                  {{ form.address_state.errors }}
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.address_zip.id_for_label }}">ZIP</label>
                  {{ form.address_zip }}
                  {{ form.address_zip.errors }}
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="form-wrap">
              <label class="form-label-outside" for="{{ form.message.id_for_label }}">Message</label>
              {{ form.message }}
              {{ form.message.errors }}
            </div>
          </div>
          {% if form.captcha %}
          <div class="col-12">{{ form.captcha }}{{ form.captcha.errors }}</div>
          {% endif %}
          <div class="col-md-12">
            <p style="font-size:13px;color:#6b7280;margin:0 0 20px;">By submitting, you agree we may contact you about your inquiry by email and SMS (if you provide a phone number). You can change preferences or unsubscribe anytime from links in messages, or reply STOP to SMS.{% if form.captcha %} Protected by reCAPTCHA.{% endif %}</p>
            <button class="button button-default" type="submit" data-tianji-event="contact_form_submit">Send</button>
          </div>
        </div>
      </form>
    </div>
  </section>
{% endblock %}
{% block tracking_events %}
{% if "sent" in request.GET %}
<script>
  if (window.aimlTrackWhenReady) {
    window.aimlTrackWhenReady('contact_form_success');
  }
</script>
{% endif %}
{% endblock %}
{% block extra_js %}
<script src="{% static 'js/address-autocomplete.js' %}"></script>
{% endblock %}