contact.html

---
title: Contact
heading: Get in touch today
description: We'd love to help you make your space clean and safe.
---
<div class="contact-box">
	<div id="ThanksMessage" class="msg-block">
		Message Received! Thanks for emailing us! We will contact you ASAP. :D
	</div>
	<div id="ERRORMessage" class="msg-block">
		: C Ooops, something is wrong, failed to send message, please try it again later.
	</div>

	<div id="contact-form">
		<form method="POST" id="gform" class="form-contact">
			<div class="col-md-6" id="plp-label">
				<input id="input-name " type="text" name="name" placeholder="Your Name*" required="" data-error="Name is required." class="input-block input-md" value="">
			</div>
			<div class="col-md-6" id="company-label">
				<input id="input-company" type="company" name="companyName" placeholder="Your Company" class="input-block input-md" value="">
			</div>
			<div class="col-md-6" id="email-label">
				<input id="input-email" type="email" name="email"  placeholder="Your Email*" required="" data-error="Email is required." class="input-block input-md " value="">
			</div>
			<div class="col-md-6" id="tel-label">
				<input id="input-phone"  type="tel" name="phone"  placeholder="Your Phone" class="input-block input-md" value="">
			</div>

			<div class="col-md-12">
				<textarea id="input-message" placeholder="MESSAGE for me*" name="message" required="" data-error="Please,leave a message." class="input-md" value=""></textarea>
			</div>

			<div class="col-md-6">
				<div id="send-result"></div>
			</div>
			<div class="col-md-6">
				<button id="submit-message" type="submit" class="btn-sem" value="Send">Send message</button>
			</div>
		</form>
	</div>
</div>

<!-- jQuery -->
<script src="../vendor/jQuery/jquery-3.3.1.js"></script>
<!-- form automation -->
<script type="text/javascript">
	/*----------------------------------------------------*/
	/* Hidden greeting messages
	------------------------------------------------------ */
	$("#ThanksMessage").hide();
	$("#ERRORMessage").hide();

	/*----------------------------------------------------*/
	/* Google Form Server Hosts
	------------------------------------------------------ */

	// Variable to hold request
	var request;

	// Bind to the submit event of our form
	$("#gform").submit(function(event){

		// Prevent default posting of form - put here to work in case of errors
		event.preventDefault();

		// Abort any pending request
		if (request) {
			request.abort();
		}
		// setup some local variables
		var $form = $(this);

		// Let's select and cache all the fields
		var $inputs = $form.find("input, select, button, textarea");

		// Serialize the data in the form
		var serializedData = $form.serialize();

		// Note: we disable elements AFTER the form data has been serialized.
		$inputs.prop("disabled", true);

		// Fire off THE DATA TO THE GOOGLE FORM
		request = $.ajax({
			url: "https://script.google.com/macros/s/AKfycbzqklYlVuTdyAvXhLbI-SBo4D4yutrREcrbJaMqOxfqS3zq-YojcZTC/exec",
			type: "post",
			data: serializedData
		});

		// HANDLER - SUCCESS
		request.done(function (response, textStatus, jqXHR){
			// Log a message to the console
			$("#ThanksMessage").slideDown();
			setTimeout(function() {
				$("#ThanksMessage").slideUp();
			}, 5000);
			//clear text after 2s
			setTimeout( function() {$('#contact-form input').val('');
				$('#contact-form textarea').val('');},2000);
		});

		// HANDLER - FAILURE
		request.fail(function (jqXHR, textStatus, errorThrown){
			// Log the error to the console
			console.error(
				"The following error occurred: "+
				textStatus, errorThrown
			);

			$("#ERRORMessage").slideDown();
			setTimeout(function() {
				$("#ERRORMessage").slideUp();
			}, 5000);
		});

		// Callback handler that will be called regardless
		// if the request failed or succeeded
		request.always(function () {
			// Re-enable the inputs
			$inputs.prop("disabled", false);
		});

	});
</script>