1
0
mirror of https://github.com/ipdb/website.git synced 2024-11-13 16:54:50 +01:00

make contact form work

* closes #17
This commit is contained in:
Matthias Kretschmann 2017-09-07 10:54:42 +02:00
parent 468d9de51c
commit d733c691cc
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 64 additions and 5 deletions

View File

@ -183,9 +183,9 @@ Follows [stylelint-config-bigchaindb](https://github.com/bigchaindb/stylelint-co
Follows [ascribe/javascript](https://github.com/ascribe/javascript) which itself extends [airbnb/javascript](https://github.com/airbnb/javascript).
Try to not use any jQuery, always prefer vanilla JavaScript.
Try to not use any jQuery, always prefer vanilla JavaScript.
At the moment, jQuery is only used for the newsletter subscription for its simple `$.ajax` functionality, and neither `XMLHttpRequest` or `fetch` seem to work with MailChimp.
At the moment, jQuery is only used for the form submissions for its simple `$.ajax` functionality, and neither `XMLHttpRequest` or `fetch` seem to work with MailChimp.
# Authors & Contributors

View File

@ -18,7 +18,7 @@ login:
# Form actions
forms:
contact: '#'
contact: '//formspree.io/contact@ipdb.io'
newsletter: "//foundation.us15.list-manage.com/subscribe/post?u=036bac2d4e3a3ea3de876a8dd&id=8a21e3e9ca"
# Urls

View File

@ -0,0 +1,37 @@
/* global jQuery */
jQuery(($) => {
const _config = {
form: $('#form-contact'),
formBtn: $('#form-contact').find('.button'),
formURL: $('#form-contact').attr('action'),
formMethod: $('#form-contact').attr('method')
}
_config.form.submit((e) => {
e.preventDefault()
$.ajax({
url: _config.formURL,
method: _config.formMethod,
data: $(this).serialize(),
dataType: 'json',
beforeSend() {
_config.formBtn
.addClass('disabled')
.attr('value', 'Sending...')
},
success(data) {
_config.form.find('.form__group').hide()
_config.form.find('.alert--success').removeClass('hide')
_config.formBtn.removeClass('disabled')
},
error(err) {
_config.form.find('.alert--danger').removeClass('hide')
_config.formBtn
.removeClass('disabled')
.attr('value', 'Send')
}
})
})
})

View File

@ -1,5 +1,11 @@
@import 'variables';
.page--contact {
.row--narrow {
max-width: ($screen-md-min / 1.25);
}
}
.company__name {
font-size: $font-size-large;
margin-bottom: $spacer / 4;

View File

@ -1,14 +1,14 @@
<div class="grid grid--full grid-medium--columns grid--gutters">
<div class="grid__col grid__col--4">
<form class="form" action="{{ config.site.forms.contact }}">
<form class="form form--contact" id="form-contact" action="{{ config.site.forms.contact }}" method="POST" accept-charset="UTF-8">
<div class="form__group required">
<label class="form__label" for="name">Your Name</label>
<input class="form__control" type="text" id="name" name="name" required placeholder=" ">
</div>
<div class="form__group required">
<label class="form__label" for="email">Your Email</label>
<input class="form__control" type="email" id="email" name="email" required placeholder=" ">
<input class="form__control" type="email" id="email" name="_replyto" required placeholder=" ">
</div>
<div class="form__group required">
<label class="form__label" for="comment">Your message</label>
@ -20,6 +20,21 @@
<div class="form__group">
<input class="button button-primary" type="submit" value="Submit">
</div>
<div class="alert alert--success hide">
<p>
<strong class="alert__title">Great to hear from you!</strong>
Well get in touch soon.
</p>
</div>
<div class="alert alert--danger hide">
<p>
<strong class="alert__title">Oops, there was an error</strong>
Would you mind trying again?
</p>
</div>
<input type="hidden" name="_subject" value="New contact form submission" />
</form>
</div>

View File

@ -6,6 +6,7 @@ subtitle: Get in touch with IPDB Foundation
narrow: true
css: page-contact
js: page-contact
---
## Get in touch