mirror of
https://github.com/bigchaindb/site.git
synced 2025-02-14 21:10:28 +01:00
lots of CLA form interaction improvements, fixes #44
- disable submit button unless checkbox has been clicked - better account for multiple forms: after sending one form other form is still visible - add custom subject to differentiate between both forms - fix for parsley.js not validating checkbox - fix entity form elements not selectable - form spacing tweaks
This commit is contained in:
parent
031964817e
commit
c9cab37ee7
@ -6,36 +6,55 @@ var FormCla = (function(w, d, $) {
|
||||
var app, _private, _config;
|
||||
|
||||
_config = {
|
||||
form: $('.form-cla'),
|
||||
formBtn: $('.form-cla').find('.btn'),
|
||||
formURL: $('.form-cla').attr('action'),
|
||||
formMethod: $('.form-cla').attr('method')
|
||||
form: $('.form-cla'),
|
||||
formCheckbox: $('.form-cla').find('.agree'),
|
||||
formBtn: $('.form-cla').find('.btn'),
|
||||
formURL: $('.form-cla').attr('action'),
|
||||
formMethod: $('.form-cla').attr('method')
|
||||
};
|
||||
|
||||
_private = {
|
||||
formAgree: function() {
|
||||
|
||||
// disable submit button by default
|
||||
_config.formBtn.addClass('disabled').attr('disabled', 'disabled');
|
||||
|
||||
// toggle submit button state based on checkbox click
|
||||
_config.formCheckbox.on('click', function(){
|
||||
if ( $(this).is(':checked') ) {
|
||||
_config.formBtn.removeClass('disabled').removeAttr('disabled');
|
||||
} else {
|
||||
_config.formBtn.addClass('disabled').attr('disabled', 'disabled');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
formSubmit: function() {
|
||||
_config.form.submit(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if ( $(this).parsley().isValid() ) {
|
||||
var thisForm = $(this),
|
||||
thisButton = thisForm.find('.btn');
|
||||
|
||||
if ( thisForm.parsley().isValid() ) {
|
||||
$.ajax({
|
||||
url: _config.formURL,
|
||||
method: _config.formMethod,
|
||||
data: $(this).serialize(),
|
||||
data: thisForm.serialize(),
|
||||
dataType: 'json',
|
||||
beforeSend: function() {
|
||||
_config.formBtn
|
||||
thisButton
|
||||
.addClass('disabled')
|
||||
.attr('value', 'Sending...');
|
||||
},
|
||||
success: function(data) {
|
||||
_config.form.find('.form-group').addClass('hide');
|
||||
_config.form.find('.alert-success').removeClass('hide');
|
||||
_config.formBtn.removeClass('disabled');
|
||||
thisForm.find('.form-group').addClass('hide');
|
||||
thisForm.find('.alert-success').removeClass('hide');
|
||||
thisButton.removeClass('disabled');
|
||||
},
|
||||
error: function(err) {
|
||||
_config.form.find('.alert-danger').removeClass('hide');
|
||||
_config.formBtn
|
||||
thisForm.find('.alert-danger').removeClass('hide');
|
||||
thisButton
|
||||
.removeClass('disabled')
|
||||
.attr('value', 'Send');
|
||||
}
|
||||
@ -48,6 +67,7 @@ var FormCla = (function(w, d, $) {
|
||||
app = {
|
||||
init: function() {
|
||||
_private.formSubmit();
|
||||
_private.formAgree();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -34,9 +34,10 @@
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
cursor: disabled;
|
||||
opacity: 0.65;
|
||||
opacity: 0.45;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@ -84,9 +84,9 @@
|
||||
&:focus ~ .form-label,
|
||||
&:valid:not(.is-empty) ~ .form-label,
|
||||
&:invalid:not(.is-empty) ~ .form-label,
|
||||
&.parsley-error ~ .form-label,
|
||||
//&.parsley-error ~ .form-label,
|
||||
&.parsley-success ~ .form-label {
|
||||
transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.7);
|
||||
transform: translate3d(0, -(($spacer / 1.5) + $input-padding-x), 0) scale(.7);
|
||||
transform-origin: left;
|
||||
color: $input-border-focus;
|
||||
}
|
||||
@ -97,7 +97,7 @@
|
||||
// Form groups
|
||||
//
|
||||
.form-group {
|
||||
margin-bottom: ($spacer * 2);
|
||||
margin-bottom: $spacer;
|
||||
position: relative;
|
||||
// make room for floating labels
|
||||
margin-top: $spacer;
|
||||
@ -248,7 +248,7 @@ input[type="checkbox"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
font-size: $font-size-xs;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
&,
|
||||
li { color: $brand-danger; }
|
||||
|
||||
@ -32,12 +32,12 @@
|
||||
<input class="form-control" type="tel" id="phone" name="phone">
|
||||
<label class="form-label" for="phone">Your Phone Number</label>
|
||||
</p>
|
||||
<p class="text-dimmed">
|
||||
<p class="form-group text-dimmed">
|
||||
Agreed and accepted: By clicking and accepting this Agreement, I represent and warrant that I have authority to bind the entity named above (if applicable) to the terms and conditions of this Agreement.
|
||||
</p>
|
||||
<div class="checkbox">
|
||||
<div class="form-group checkbox">
|
||||
<label class="text-dimmed">
|
||||
<input type="checkbox" value="agreement" required>
|
||||
<input class="agree" type="checkbox" value="agreement" name="agreement" required>
|
||||
I have read and agree to the terms of this Agreement
|
||||
</label>
|
||||
</div>
|
||||
@ -63,33 +63,35 @@
|
||||
Would you mind trying again?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="_subject" value="New CLA submission (Individual)" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="entity" role="tabpanel">
|
||||
<form id="form-cla-entities" class="form-cla js-parsley" action="//formspree.io/{{ site.email.cla }}" method="POST" accept-charset="UTF-8">
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="text" id="org" name="org" required>
|
||||
<label class="form-label" for="org">Name of organization, foundation, company or other entity</label>
|
||||
<input class="form-control" type="text" id="org-entity" name="org" required>
|
||||
<label class="form-label" for="org-entity">Name of organization, foundation, company or other entity</label>
|
||||
</p>
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="text" id="name" name="name" required>
|
||||
<label class="form-label" for="name">Contact Person</label>
|
||||
<input class="form-control" type="text" id="name-entity" name="name" required>
|
||||
<label class="form-label" for="name-entity">Contact Person</label>
|
||||
</p>
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="email" id="email" name="_replyto" required>
|
||||
<label class="form-label" for="email">Contact Email Address</label>
|
||||
<input class="form-control" type="email" id="email-entity" name="_replyto" required>
|
||||
<label class="form-label" for="email-entity">Contact Email Address</label>
|
||||
</p>
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="tel" id="phone" name="phone">
|
||||
<label class="form-label" for="phone">Contact Phone Number</label>
|
||||
<input class="form-control" type="tel" id="phone-entity" name="phone">
|
||||
<label class="form-label" for="phone-entity">Contact Phone Number</label>
|
||||
</p>
|
||||
<p class="text-dimmed">
|
||||
<p class="form-group text-dimmed">
|
||||
Agreed and accepted: By clicking and accepting this Agreement, I represent and warrant that I have authority to bind the entity named above (if applicable) to the terms and conditions of this Agreement.
|
||||
</p>
|
||||
<div class="checkbox">
|
||||
<div class="form-group checkbox">
|
||||
<label class="text-dimmed">
|
||||
<input type="checkbox" value="agreement" required>
|
||||
<input class="agree" type="checkbox" value="agreement" name="agreement" required>
|
||||
I have read and agree to the terms of this Agreement
|
||||
</label>
|
||||
</div>
|
||||
@ -115,6 +117,8 @@
|
||||
Would you mind trying again?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="_subject" value="New CLA submission (Organization)" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
@ -34,4 +34,6 @@
|
||||
Would you mind trying again?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="_subject" value="New contact form submission" />
|
||||
</form>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user