mirror of
https://github.com/ipdb/website.git
synced 2024-11-13 16:54:50 +01:00
parent
468d9de51c
commit
d733c691cc
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
37
_src/_assets/js/page-contact.js
Normal file
37
_src/_assets/js/page-contact.js
Normal 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')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
@ -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;
|
||||
|
@ -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>
|
||||
We’ll 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>
|
||||
|
@ -6,6 +6,7 @@ subtitle: Get in touch with IPDB Foundation
|
||||
|
||||
narrow: true
|
||||
css: page-contact
|
||||
js: page-contact
|
||||
---
|
||||
|
||||
## Get in touch
|
||||
|
Loading…
Reference in New Issue
Block a user