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 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-0">
		<section class="links">
			<p>You can find me on these web sites…</p>
			<div class="text-center">
				<a href="https://blog.morpheu5.net"><i class="fas fa-blog text-3xl mr-3" alt="MorphLog" style="color: black"></i></a>
				<a href="https://orcid.org/0000-0001-8665-6147"><i class="fab fa-orcid text-3xl mr-3" alt="ORCID" style="color: #a6cf39"></i></a>
				<a href="https://www.linkedin.com/in/andreafranceschini"><i class="fab fa-linkedin text-3xl mr-3" alt="LinkedIn" style="color: #0077b5"></i></a>
				<a href="https://github.com/Morpheu5"><i class="fab fa-github text-3xl mr-3" alt="GitHub" style="color: black"></i></a>
				<a href="https://apps.apple.com/it/developer/andrea-franceschini/id454062630"><i class="fab fa-app-store-ios text-3xl mr-3" alt="App Store" style="color: #2296f3"></i></a>
				<a href="http://play.google.com/store/apps/developer?id=Andrea+Franceschini&hl=it_IT"><i class="fab fa-google-play text-3xl mr-3" alt="Google Play" style="color: #3BCCFF"></i></a>
			</div>
			<div class="mt-2 text-center">
				<a href="https://twitter.com/morpheu5"><i class="fab fa-twitter text-3xl mr-2" alt="Twitter" style="color: #55acee"></i></a>
				<a href="https://instagram.com/ilmoppe"><i class="fab fa-instagram text-3xl mr-3" alt="Instagram" style="color: #E1306C"></i></a>
				<a href="https://www.flickr.com/photos/morpheu5"><i class="fab fa-flickr text-3xl mr-3" alt="Flickr" style="color: #0062DD"></i></a>
				<a href="https://soundcloud.com/ilmoppe"><i class="fab fa-soundcloud text-3xl mr-3" alt="SoundClound" style="color: #FE5000"></i></a>
				<a href="https://www.youtube.com/user/therealmorpheu5"><i class="fab fa-youtube text-3xl mr-3" alt="YouTube" style="color: #FF0000"></i></a>
				<a href="https://morpheu5.deviantart.com"><i class="fab fa-deviantart text-3xl mr-3" alt="DeviantArt" style="color: #4DC47D"></i></a>
			</div>
		</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>
				<form id="theContactForm" action="<?=$baseurl?>api/mailer" method="post">
					<div class="text field flex flex-col mb-4" id="senderName">
						<label for="senderNameBox" class="w-full pl-2">Name</label>
						<input id="senderNameBox" class="w-full rounded border shadow-inner px-2" name="name" type="text" required autocomplete="name" placeholder="Charlie Doe" />
					</div>
					<div class="text field flex flex-col mb-4" id="senderEmail">
						<label for="senderEmailBox" class="w-full pl-2">E-mail</label>
						<input id="senderEmailBox" class="w-full rounded border shadow-inner px-2" name="email" type="email" required autocomplete="email" pattern="^.+@.+\..+" placeholder="charlie.doe@gmail.com"/>
					</div>
					<div class="textarea field flex-col mb-4" id="message">
						<label for="messageBox" class="w-full pl-2">Message</label>
						<textarea id="messageBox" class="w-full rounded border shadow-inner px-2" name="message" rows="5" required placeholder="Dear Evan Hansen, …"></textarea>
					</div>
					<div class="text field flex mb-4 hidden" id="captcha">
						<label for="captchaBox">If you are human, you'll leave this box alone</label>
						<input type="text" class="w-full rounded border shadow-inner px-2" id="captchaBox" name="captcha" placeholder="Dude…" />
					</div>
					
					<div class="button" id="submit">
						<button type="submit" id="submitButton" disabled><span class="fa fa-paper-plane mr-2"></span>Send</button>
					</div>
				</form>
			<?php endif ?>
		</section>
	</article>
		
<?=i('_footer')?>