<div class="reveal" id="make-appointment" data-reveal>

  <form action="/submissions/engage" method="post" data-abide novalidate>
	  <div class="grid-x grid-padding-x">

		<div class="small-12 cell">
			<h2>Make an Appointment</h2>
		</div>
		
		<div class="small-12 cell">
            <label><strong>Name</strong>
              <input type="text" name="name" id="name" required>
			  <span class="form-error">The name does not appear to be correct</span>
            </label>
		</div>
		
		
		<div class="small-12 cell">
            <label><strong>E-mail</strong>
              <input type="text" name="email" id="email" required pattern="email">
			  <span class="form-error">The e-mail address does not appear to be correct</span>
            </label>
		</div>
		
		
		<div class="small-12 cell">
            <label><strong>Subject</strong>
              <input type="text" name="subject" id="subject" required>
			  <span class="form-error">The subject does not appear to be correct</span>
            </label>
		</div>
		
		
		<div class="small-12 cell">
            <label><strong>Additional information</strong>
				 <textarea placeholder="" style="height:6rem" name="information" id="information" required></textarea>
				 <span class="form-error">The additional information does not appear to be correct</span>
            </label>
		</div>
		
		<div class="small-12 cell">
			<input type="hidden" name="return" value="">
			<input type="hidden" name="deliver" value="{{ page.form_response }}">
			<input type="hidden" name="logo" value="{{ page.logo[0] }}">
			<input type="hidden" name="uid" value="{{ page.uid }}">
			<input type="submit" class="button expanded" value="Submit">
		</div>
	 </div>
  </form>

  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  
</div>

<div class="reveal" id="send-email" data-reveal>

  <form action="/submissions/engage" method="post" data-abide novalidate>
	  <div class="grid-x grid-padding-x">

		<div class="small-12 cell">
			<h2>Send us an e-mail</h2>
		</div>
		
		<div class="small-12 cell">
            <label><strong>Name</strong>
              <input type="text" name="name" id="name" required>
			  <span class="form-error">The name does not appear to be correct</span>
            </label>
		</div>
		
		
		<div class="small-12 cell">
            <label><strong>E-mail</strong>
              <input type="text" name="email" id="email" required pattern="email">
			  <span class="form-error">The e-mail address does not appear to be correct</span>
            </label>
		</div>
		
		
		<div class="small-12 cell">
            <label><strong>Subject</strong>
              <input type="text" name="subject" id="subject" required>
			  <span class="form-error">The subject does not appear to be correct</span>
            </label>
		</div>
		
		
		<div class="small-12 cell">
            <label><strong>Additional information</strong>
				 <textarea placeholder="" style="height:6rem" name="information" id="information" required></textarea>
				 <span class="form-error">The additional information does not appear to be correct</span>
            </label>
		</div>
		
		<div class="small-12 cell">
			<input type="hidden" name="return" value="">
			<input type="hidden" name="deliver" value="{{ page.form_response }}">
			<input type="submit" class="button expanded" value="Submit">
		</div>
	 </div>
  </form>

  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  
</div>

<div class="reveal" id="thank-you" data-reveal data-deep-link="true">

  <div class="grid-x grid-padding-x">
	<div class="small-12 cell">
		<h2>Form successfully sent</h2>
	</div>		
 </div>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  
</div>