The jQuery script below will allow you to control forms more efficiently by adding classes, IDs, and other features to forms built in the SeedLogix CMS.
// I haven't had the chance to test this yet...
// Similar functionality here: http://summersale.stylesrhot.com/
// Style the message class appropriately and set to display:none;
$(".custom-form").submit(function (e) {
// Does email input have content?
if ($('.custom-form input.email').val()) {
// Fade out form fields
$('.custom-form fieldset').fadeOut();
// Wait for fade and then show confirmation
setTimeout(function () {
$(this).append('<p class="message">Thanks for contacting us!</p>');
$('.message').fadeIn();
}, 400);
}
});
/* Style checkboxes like checkboxes */
.checkboxDiv input {
width: auto;
height: auto;
appearance: checkbox;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
}
.checkboxDiv input, .checkboxDiv label {
cursor:pointer;
}
/* Add asterisk to required fields */
.required-field label::after {
content:"*";
color:red;
}
/* Style button */
input[type="submit"] {
cursor: pointer;
width: auto;
padding: 20px 50px;
height: auto;
font-weight: 700;
font-size: 16px;
line-height: 1em;
}
/* Highlight errors on required fields */
input.highlightError {
border-color: red;
}
$(document).ready(function() {
// Set field sizing classes on parent elements
$('input.small').parent().addClass('field-sm');
$('input.medium').parent().addClass('field-md');
$('input.large').parent().addClass('field-lg');
// Associate checkbox labels with inputs to allow them to be checked by clicking labels
$('.checkboxDiv').parent().addClass('field-checkbox');
$('.field-checkbox').each(function(i) {
$(this).find('input').attr('id', 'checkbox-' + i);
$(this).find('label').attr('for', 'checkbox-' + i);
});
// Add required class to list item
$('li > .required').parent().addClass('required-field');
$('li > .checkboxDiv > .required').parent().parent().addClass('required-field');
});