jenningscreate
4/18/2018 - 4:18 PM

SeedLogix Form Control with jQuery

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');
  
});