Project

Profile

Help

Download (1.83 KB)

Contact Forms with Planio » contact-us.html

Gregor Schmidt, 05/28/2018 04:10 PM

 
<!doctype html>
<html lang="en">
<head>
<title>Contact us!</title>

<style type="text/css">
body { font-family: sans-serif; margin: 2em; }
label, input, textarea {
width: 15em;
float: left;
margin-bottom: 1em;
font-size: 1.2em;
}
label, input[type=submit] {width: 10em; clear: left;}
#url, .thanks, .error { display:none; }
</style>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$.ajax({
url: $(this).attr('action') + '.json',
method: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function () {
$('form').hide();
$('.thanks').show();
},
error: function () {
$('.error').show();
}
});
return false;
});
});
</script>
</head>

<body>
<h1>Contact us!</h1>
<form action="https://example.plan.io/track" method="POST">
<p class="error">Something went wrong. Please try again.</p>
<label for="name">Your name:</label>
<input name="name" id="name" type="text" />

<label for="mail">Your email address:</label>
<input name="mail" id="mail" type="email" />

<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" />

<label for="description">Your message:</label>
<textarea name="description" id="description" rows="5"></textarea>

<input name="project" type="hidden" value="example-project" />
<input name="url" id="url" type="text" />

<input type="submit" value="Submit request" />
</form>
<p class="thanks">Thank you for getting in touch.</p>
</body>
</html>
(2-2/2)