form data collection via formkeep.com, ref #2

This commit is contained in:
Matthias Kretschmann 2015-12-21 18:12:55 +01:00
parent b9de463f56
commit a776516770
3 changed files with 54 additions and 47 deletions

View File

@ -8,7 +8,8 @@ var FormEarlyAccess = (function(w, d, $) {
_config = {
form: $('#form-earlyaccess'),
formBtn: $('#form-earlyaccess').find('.btn'),
formURL: $('#form-earlyaccess').attr('action')
formURL: $('#form-earlyaccess').attr('action'),
formMethod: $('#form-earlyaccess').attr('method')
};
_private = {
@ -18,17 +19,19 @@ var FormEarlyAccess = (function(w, d, $) {
if ( $(this).parsley().isValid() ) {
var data = {};
var dataArray = _config.form.serializeArray();
$.each(dataArray, function (index, item) {
data[item.name] = item.value;
});
// var data = {};
// var dataArray = _config.form.serializeArray();
// $.each(dataArray, function (index, item) {
// data[item.name] = item.value;
// });
$.ajax({
url: _config.formURL.replace('/post?', '/post-json?').concat('&c=?'),
data: data,
dataType: 'jsonp',
contentType: 'application/json; charset=utf-8',
url: _config.formURL,
type: _config.formMethod,
accept: {
javascript: 'application/javascript'
},
data: _config.form.serialize(),
crossDomain: true,
beforeSend: function() {
_config.formBtn
@ -45,7 +48,9 @@ var FormEarlyAccess = (function(w, d, $) {
},
error: function(err) {
_config.form.find('.alert-danger').removeClass('hide');
_config.formBtn.removeClass('disabled');
_config.formBtn
.removeClass('disabled')
.attr('value', 'Send');
// send GA event
GoogleAnalytics.gaEventEarlyAccessError();

View File

@ -0,0 +1,37 @@
<form id="form-earlyaccess" class="js-parsley" action="https://formkeep.com/f/60ff48ad894b" method="POST">
<p class="form-group">
<input class="form-control" type="text" id="name" name="name" required>
<label class="form-label" for="name">Your Name</label>
</p>
<p class="form-group">
<input class="form-control" type="email" id="email" name="email" required>
<label class="form-label" for="email">Your Email</label>
</p>
<p class="form-group">
<textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
<label class="form-label" for="comment">Your Comment (optional)</label>
</p>
<p class="form-group">
<input class="btn btn-primary" type="submit" value="Send">
</p>
<div class="alert alert-success animation-slide-in-from-bottom hide">
<svg class="alert__icon icon icon-success">
<use xlink:href="/assets/img/sprite.svg#icon-success"></use>
</svg>
<p>
<strong class="alert__title">Great to hear youre interested!</strong>
Well get in touch soon to discuss how we can work together.
</p>
</div>
<div class="alert alert-danger hide">
<svg class="alert__icon icon icon-fail">
<use xlink:href="/assets/img/sprite.svg#icon-fail"></use>
</svg>
<p>
<strong class="alert__title">Ops, there was an error</strong>
Would you mind trying again?
</p>
</div>
</form>

View File

@ -61,41 +61,6 @@ front_page: true
<p class="section-description">For early access and inquiries, enter your contact information below</p>
</header>
<form id="form-earlyaccess" class="js-parsley" action="http://mkretschmann.us4.list-manage1.com/subscribe/post?u=96b695f2a4b06978eaf714c27&id=3fbe27c491" method="POST">
<p class="form-group">
<input class="form-control" type="text" id="name" name="name" required>
<label class="form-label" for="name">Your Name</label>
</p>
<p class="form-group">
<input class="form-control" type="email" id="EMAIL" name="EMAIL" required>
<label class="form-label" for="EMAIL">Your Email</label>
</p>
<p class="form-group">
<textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
<label class="form-label" for="comment">Your Comment (optional)</label>
</p>
<p class="form-group">
<input class="btn btn-primary" type="submit" value="Send">
</p>
<div class="alert alert-success animation-slide-in-from-bottom hide">
<svg class="alert__icon icon icon-success">
<use xlink:href="/assets/img/sprite.svg#icon-success"></use>
</svg>
<p>
<strong class="alert__title">Great to hear youre interested!</strong>
Well get in touch soon to discuss how we can work together.
</p>
</div>
<div class="alert alert-danger hide">
<svg class="alert__icon icon icon-fail">
<use xlink:href="/assets/img/sprite.svg#icon-fail"></use>
</svg>
<p>
<strong class="alert__title">Ops, there was an error</strong>
Would you mind trying again?
</p>
</div>
</form>
{% include/form-earlyaccess.html %}
</div>
</section>