diff --git a/README.md b/README.md index 9813501..38793ae 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/_config.yml b/_config.yml index caefc3e..e9c32f9 100644 --- a/_config.yml +++ b/_config.yml @@ -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 diff --git a/_src/_assets/js/page-contact.js b/_src/_assets/js/page-contact.js new file mode 100644 index 0000000..3b0d1cf --- /dev/null +++ b/_src/_assets/js/page-contact.js @@ -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') + } + }) + }) +}) diff --git a/_src/_assets/scss/page-contact.scss b/_src/_assets/scss/page-contact.scss index 9a310f0..65da8f0 100644 --- a/_src/_assets/scss/page-contact.scss +++ b/_src/_assets/scss/page-contact.scss @@ -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; diff --git a/_src/_includes/form-contact.html b/_src/_includes/form-contact.html index 4001bc0..3b35e2c 100644 --- a/_src/_includes/form-contact.html +++ b/_src/_includes/form-contact.html @@ -1,14 +1,14 @@
-
+
- +
@@ -20,6 +20,21 @@
+ +
+

+ Great to hear from you! + We’ll get in touch soon. +

+
+
+

+ Oops, there was an error + Would you mind trying again? +

+
+ +
diff --git a/_src/contact.md b/_src/contact.md index b821708..df28ef8 100644 --- a/_src/contact.md +++ b/_src/contact.md @@ -6,6 +6,7 @@ subtitle: Get in touch with IPDB Foundation narrow: true css: page-contact +js: page-contact --- ## Get in touch