af/pages/contact.php

<?php
$bodyclasses = 'contact page';
$title = 'Contact me';
$tagline = '';
$description = 'Everything you need to know to get in touch with me.';
$keywords = 'music, learning, tabletop, research, the open university';
$twitter_image = 'images/colopic.jpg';

$js = array('H5F', 'contact');

session_start();
?>

<?=i('_header')?>

	<article class="body bottom_padding">
		<section class="links">
			<p>You can find me on these web sites…</p>
			<ul class="nobullets">
				<!-- <li><span class="fa fa-envelope-o fa-fw" style="color: #abc"></span> <a href="mailto:"></a> -->
				<li><span class="fa fa-linkedin-square fa-fw" style="color: #0077b5"></span> <a href="//www.linkedin.com/in/andreafranceschini" target="_blank">LinkedIn</a></li>
				<li><span class="fa fa-twitter-square fa-fw" style="color: #55acee"></span> @<a href="//www.twitter.com/morpheu5" target="_blank">morpheu5</a></li>
				<li><span class="fa fa-google-plus-square fa-fw" style="color: #dd4b39"></span> +<a href="//plus.google.com/+AndreaFranceschini" target="_blank">AndreaFranceschini</a></li>
				<li><span class="fa fa-github fa-fw" style="color: black"></span> <a href="//github.com/Morpheu5" target="_blank">Morpheu5</a></li>
			</ul>
		</section>
		<section class="form">
			<?php if((array_key_exists('contact_thanks', $_SESSION) && $_SESSION['contact_thanks'] == 1)) : ?>
				<p class="contact_thanks">Thanks for your message, I'll try to answer as soon as I can!</p>
				<p class="meanwhile">In the meanwhile, why don't you have a look at those links on the left?</p>
				<?php unset($_SESSION['contact_thanks']) ?>
			<?php else : ?>
				<p>&nbsp;… or you can drop me a line.</p>
				<p>&nbsp;</p>
				<form id="theContactForm" action="<?=$baseurl?>api/mailer" method="post">
					<div class="text field" id="senderName">
						<label for="senderNameBox">Name</label>
						<input id="senderNameBox" name="name" type="text" required autocomplete="name" />
					</div>
					<div class="text field" id="senderEmail">
						<label for="senderEmailBox">E-mail</label>
						<input id="senderEmailBox" name="email" type="email" required autocomplete="email" pattern="^.+@.+\..+"/>
					</div>
					<div class="textarea field" id="message">
						<label for="messageBox">Message</label>
						<textarea id="messageBox" name="message" required></textarea>
					</div>
					<div class="text field" id="captcha" style="display: none">
						<label for="captchaBox">If you are human, you'll leave this box alone</label>
						<input type="text" style="display: none" id="captchaBox" name="captcha" />
					</div>
					
					<div class="button" id="submit">
						<button type="submit" id="submitButton" disabled><span class="fa fa-paper-plane"></span> Send</button>
					</div>
				</form>
			<?php endif ?>
		</section>
	</article>
		
<?=i('_footer')?>