submit-blog.html

---
layout: default
title: Submit Your Work
stylesheet: contact.css
permalink: /submit-blog/
ogImage: BlogsubmissionHEADER.jpg
---

<!-- events.html -->
{% include pageHeader.html img="BlogsubmissionHEADER.jpg" %}

<section class="header">
	<div class="row">
		<div class="col-sm-6">
			<h4 class="submitBlog">Want to see your work featured on our website? <a href="https://weteachblockchain.org/blog/">Our blog</a> is open to all community members so, get your fingers to the keyboard and get writing! Tell us what you love about blockchain, where you think it's heading, and the fascinating projects that everyone should know.</h4>
		</div>
		<div class="col-sm-6 contactUsForm">
			<h1>Submit Your Work</h1>
			<span class="errorField"></span>
			<input type="text" placeholder="Name" id="contactUsName">
			<input type="text" placeholder="Email" id="contactUsEmail">
			<input type="text" placeholder="Blog Topic" id="contactUsSubject">
			<textarea placeholder="Leave a short message and share a link to the blog post you would like to submit" id="contactUsMessageBody"></textarea>
			<!-- <div class="g-recaptcha" data-callback="recaptchaVerify" data-sitekey="6LdlEHkUAAAAAHpHvXxmG1mbtKGq1Pz3T0CbuP2N"></div> -->
			<div class="h-captcha" data-sitekey="3fe93b4a-9521-4c22-a75e-7a573781f75f"></div>
			<button onclick="submitContactUsForm()">Submit</button>
		</div>
	</div>
</section>

<script src="https://hcaptcha.com/1/api.js" async defer></script>

<script>
	function submitContactUsForm() {
		var formDetails = {
			name: document.getElementById('contactUsName').value,
			email: document.getElementById('contactUsEmail').value,
			subject: document.getElementById('contactUsSubject').value,
			message: document.getElementById('contactUsMessageBody').value,
			token: hcaptcha.getResponse(),
			ambassador: false
		}

		// console.log('formDetails', formDetails)
		if ((formDetails.name == "") || (formDetails.email == "") || (formDetails.subject == "") || (formDetails.message == "")) return handleError('You must fill all fields to submit the form.')
		if (!validateEmail(formDetails.email)) return handleError('You must submit a valid email.')
		if ((!formDetails.token) || ("" == formDetails.token)) return handleError('You must verify you are not a robot by clicking the reCaptcha.')

		var xhr = new XMLHttpRequest();
		xhr.open("POST", 'https://app.weteachblockchain.org/contact/', true);
		// xhr.open("POST", "http://localhost:8888/contact/", true);
		xhr.onreadystatechange = function () {
			if (xhr.readyState == 4 && xhr.status == 200)
				// console.log('xhr response:', xhr.responseText)
				var response = JSON.parse(xhr.responseText)
			if (response.success) {
				handleSuccess("Your Message has been submitted!");
				setTimeout(function () {
					window.location = "/"
				}, 3000)
			} else {
				handleError("Error: " + JSON.stringify(response));
			}
		}
		xhr.setRequestHeader('Content-Type', 'application/json');
		xhr.setRequestHeader('access-control-allow-origin', '*');
		xhr.send(JSON.stringify(formDetails));

	}
	function validateEmail(email) {
		var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return re.test(String(email).toLowerCase());
	}
	function handleError(error) {
		var errorContainer = document.getElementsByClassName('errorField')[0];
		errorContainer.textContent = error;
	}
	function handleSuccess(successMessage) {
		var fieldContainer = document.getElementsByClassName('contactUsForm')[0]

		var container = document.createElement('div')
		container.className = 'successMessage'

		var span = document.createElement('span')
		span.textContent = successMessage

		var icon = document.createElement('i')
		icon.className = "fas fa-check-circle"

		container.appendChild(icon)
		container.appendChild(span)

		do {
			fieldContainer.children[0].remove()
		} while (fieldContainer.children.length > 0)

		fieldContainer.appendChild(container)

	}

</script>

{% include getInvolved.html %}