appointments.html

---
layout: default
permalink: '/appointments/'
title: Appointments
head_title: ''
description: ''
amp_components:
- amp-carousel
- amp-fit-text
---

{% for _page in site.pages %}
{% if _page.settings %}
{% assign settings = _page %}
{% endif %}
{% endfor %}


<!-- Reserve Appointment Form Section -->
<section>
  <div class="bg-brand-primary-dark">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 p-0 h-100">

          <amp-img src="/assets/images/reserve-appointment-vertical.jpg" width="640" height="1200" layout="responsive"
            animate-in="fade-in" animate-in-duration=".5s" alt="a sample image"></amp-img>
          <div
            style="width: 80%; height: 80%; position:absolute; top:10%; left: 10%; background-color: rgba(0, 0, 0, 0.24);">
            <amp-fit-text class="text-light text-center font-weight-bold display-2 p-1" width="200" height="100"
              layout="responsive" style="text-shadow: 1px 1px 1px black;">
              RESERVE YOUR APPOINTMENT
            </amp-fit-text>

            <amp-fit-text class="text-light text-center font-weight-bold" width="200" height="200" layout="responsive"
              max-font-size="32">
              <div class="d-flex flex-column text-light text-center align-items-center">
                <p class="mb-1 font-weight-bold">Forest Family Dentistry</p>
                <p class="mb-1">2700 W Anderson LN #418</p>
                <p class="mb-1">Austin, TX 78757</p>
                <p class="mb-3">512.334.9894</p>
                <div class="mb-4" style="border-bottom: solid black 6px; width:50%;"></div>
              </div>
              
              <div class="d-flex flex-column text-light text-center align-items-center">
                <p class="mb-1 font-weight-bold">Forest Family Dentistry North</p>
                <p class="mb-1">10721 Research BLVD,  B180</p>
                <p class="mb-1">Austin, TX 78750</p>
                <p class="mb-3">512.358.4979</p>
                <div class="mb-4" style="border-bottom: solid black 6px; width:50%;"></div>
              </div>
              
              <div class="d-flex flex-column text-light text-center align-items-center">
                <p class="mb-1 font-weight-bold">Forest Family Dentistry & Orthodontics</p>
                <p class="mb-1">2681 Gattis School Rd #270</p>
                <p class="mb-3">Round Rock, TX 78664</p>
                <div class="mb-4" style="border-bottom: solid black 6px; width:50%;"></div>
              </div>
              
              <div class="d-flex flex-column text-light text-center align-items-center">
                <p class="mb-1 font-weight-bold">Forest Family Dentistry Burnet</p>
                <p class="mb-1">5531 Burnet Rd</p>
                <p class="mb-1">Austin, TX 78756</p>
                <p class="mb-1">512.898.9036</p>
              </div>
            </amp-fit-text>

          </div>
        </div>

        <div class="col col-md-6 p-4 pb-4 h-100">

          <div class="row pb-4">
            <div class="col p-4 text-center">
              <div class="d-flex justify-content-center">
                <h1 class="display-4 border border-white p-4 mb-4">APPOINTMENT REQUEST</h1>
              </div>
            </div>
          </div>

          <form method="post" action-xhr="/documentation/examples/api/submit-form-xhr" target="_top">

            <div class="row pb-4">

              <!-- LEFT COLUMN (LOCATION) -->
              <div class="col-sm-6">
                <h3>Preferred FFD location</h3>
                <input type="radio" id="anderson" name="location" value="anderson">
                <label for="anderson">Anderson LN (Austin)</label>
                <br/>
                <input type="radio" id="burnet" name="location" value="burnet">
                <label for="burnet">Burnet Rd (Austin)</label>
                <br/>
                <input type="radio" id="research" name="location" value="research">
                <label for="research">Research BLVD (Austin)</label>
                <br/>
                <input type="radio" id="gattis" name="location" value="gattis">
                <label for="gattis">Gattis School Rd (Round Rock)</label>
              </div>

              <!-- RIGHT COLUMN (NEW PATIENT) -->
              <div class="col-sm-6">
                <h3>Are you a NEW patient to FFD?</h3>
                <input type="radio" id="yes" name="patient" value="yes">
                <label for="yes" class="mr-4">Yes</label>
                <input type="radio" id="no" name="patient" value="no">
                <label for="no">No</label>
              </div>
            </div>

            <!-- NAME ADDRESS DOB PHONE -->
            <div class="row pb-4">

              <div class="col-md-6 form-group">
                <input type="text" class="form-control" name="first" placeholder="First Name..." size="30" required>
              </div>

              <div class="col-md-6 form-group">
                <input type="text" class="form-control" name="last" placeholder="Last Name..." size="30" required>
              </div>

              <div class="col-md-6 form-group">
                <input type="email" class="form-control" name="email" placeholder="Email Address..." size="40" required>
              </div>

              <div class="col-md-6 form-group">
                <input type="date" class="form-control" name="select-date" placeholder="Date of Birth..." required>
              </div>

              <div class="col-md-6 form-group">
                <input type="tel" class="form-control" name="tel" placeholder="Phone Number..." required>
              </div>

            </div>

            <!-- APPOINTMENT DAYS / TIMES -->

            <div class="row pb-4">

              <!-- LEFT COLUMN (DAYS) -->
              <div class="col-sm-6">
                <h3>Most convenient day(s) for your appointment:</h3>

                <div class="row">
                  <div class="col-sm-10">
                    <input type="checkbox" id="day1" name="day1" value="monday">
                    <label for="day1">Monday</label>
                  </div>

                  <div class="col-sm-10">
                    <input type="checkbox" id="day2" name="day2" value="tuesday">
                    <label for="day2">Tuesday</label>
                  </div>

                  <div class="col-sm-10">
                    <input type="checkbox" id="day3" name="day3" value="wednesday">
                    <label for="day3">Wednesday</label>
                  </div>

                  <div class="col-sm-10">
                    <input type="checkbox" id="day4" name="day4" value="thursday">
                    <label for="day4">Thursday</label>
                  </div>

                  <div class="col-sm-10">
                    <input type="checkbox" id="day5" name="day5" value="friday">
                    <label for="day5">Friday</label>
                  </div>

                  <div class="col-sm-10">
                    <input type="checkbox" id="day6" name="day6" value="saturday">
                    <label for="day6">Saturday</label>
                  </div>

                </div>
              </div>

              <!-- RIGHT COLUMN (TIMES) -->
              <div class="col-sm-5">
                <h3>Most convenient time(s) for your appointment:</h3>

                <div class="row">
                  <div class="col-sm-10">
                    <input type="checkbox" id="time1" name="time1" value="timeone">
                    <label for="time1">7:30am - 9:30am</label>
                  </div>

                  <div class="col-sm-10">
                    <input type="checkbox" id="time2" name="time2" value="timetwo">
                    <label for="time2">9:30am - noon</label>
                  </div>

                  <div class="col-sm-10">
                    <input type="checkbox" id="time3" name="time3" value="timethree">
                    <label for="time3">noon - 3pm
                    </label>
                  </div>

                  <div class="col-sm-10">
                    <input type="checkbox" id="time4" name="time4" value="timefour">
                    <label for="time4">3pm - 6pm</label>
                  </div>

                  <div class="col-sm-10">
                    <input type="checkbox" id="time5" name="time5" value="timefive">
                    <label for="time5">after 6pm</label>
                  </div>

                </div>
              </div>
            </div>

            <!-- REASON FOR APPOINTMENT -->

            <div class="row">
              <div class="col-md-10">
                <h3>Reason for your appointment:</h3>
              </div>
            </div>

            <div class="row">
              <div class="col-sm-3 col-md-4">
                <input type="radio" id="cleaning" name="reason" value="cleaning">
                <label for="cleaning">Cleaning & Exam</label>
              </div>

              <div class="col-sm-2">
                <input type="radio" id="pain" name="reason" value="pain">
                <label for="pain">In Pain</label>
              </div>

              <div class="col-sm-3">
                <input type="radio" id="invisalign" name="reason" value="invisalign">
                <label for="invisalign">Invisalign</label>
              </div>

              <div class="col-sm-2">
                <input type="radio" id="other" name="reason" value="other">
                <label for="other">Other</label>
              </div>
            </div>

            <div class="row pb-4">
              <div class="col-md-10">
                <input type="text" name="name" placeholder="If other, please explain..." size="50" required>
              </div>
            </div>

            <!-- FFD MEMBERSHIP / PPO INSURANCE -->

            <div class="row pb-4 pt-4">

              <!-- LEFT COLUMN (FFD MEMBERSHIP) -->
              <div class="col-sm-5">
                <h3>Do you have an FFD membership plan?</h3>

                <div class="row">
                  <div class="col-sm-10">
                    <input type="radio" id="yes" name="membership" value="yes">
                    <label for="yes">Yes</label>
                  </div>

                  <div class="col-sm-10">
                    <input type="radio" id="no" name="membership" value="no">
                    <label for="no">No</label>
                  </div>


                </div>
              </div>

              <!-- RIGHT COLUMN (PPO INSURANCE) -->
              <div class="col-sm-5">
                <h3>Do you have a Dental PPO insurance plan?</h3>

                <div class="row">
                  <div class="col-sm-10">
                    <input type="radio" id="yes" name="dental" value="yes">
                    <label for="yes">Yes</label>
                  </div>

                  <div class="col-sm-10">
                    <input type="radio" id="no" name="dental" value="no">
                    <label for="no">No</label>
                  </div>


                </div>
              </div>
            </div>

            <div class="row pb-4">
              <div class="col-sm-10">
                <input type="submit" value="Subscribe">
              </div>
            </div>


          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- END FORM -->
</section>