How to Add Background Color to Form Fields When Properly Filled?

Get Help
, ,
1

Hi there,

Is there a code snippet we can use that will add a background color (e.g., light green) to form fields as they are filled out with no errors? (i.e., no validation messages displayed).

The plugin, Mailpoet, offers this feature :slight_smile:

Screenshot_2
Screenshot_21491×600 104 KB

Thank you!

2

Gravity Forms does not support real-time validation, so you could use JS to change the field color when the user enters data, but the validation would still be processed at submission.

You may be able to use an add-on like this one, which provides real-time validation, along with some custom development to accomplish your desired result. You may even contact the developer to see if they can add this idea as a feature.

3

Hi Chris,

Thanks for that! Very close to what we need. In response:

  1. Can you share the JS used for the demo you provided?
  2. We’ll reach out to the developer of the plugin you referenced. If he ends up adding the feature, I’ll let you know via update to this topic (if not closed).

Thank you!

4

So this is the snippet with some additional code to handle some real-time validation as an example. This does not replace or disable the validation Gravity Forms will run during submissions.

You can add this script to an HTML field within the form.

<script>
document.addEventListener('gform/postRender', (event) => {
  const form = event.detail.formId;
  const fields = document.querySelectorAll(`#gform_${form} input, #gform_${form} select, #gform_${form} textarea`);

  fields.forEach((field) => {
    field.addEventListener('input', validateField);
    field.addEventListener('change', validateField);
  });

 function validateField(event) {
  const field = event.target;
  const value = field.value.trim(); // Trim whitespace
  let isValid = true;

  // Remove any existing validation classes
  field.classList.remove('valid', 'invalid');

  // Determine if the field is required
  const isRequired = 
    field.getAttribute('aria-required') === 'true' || 
    field.closest('.gfield').classList.contains('gfield_contains_required');

  // Validation logic based on field type
  if (field.type === 'url') {
    const urlRegex = /^(https?:\/\/)([^\s.]+\.\S{2,})$/;
    isValid = value === '' ? !isRequired : urlRegex.test(value);
  } else if (field.closest('.gfield--type-name')) {
    const nameRegex = /^[a-zA-Z\s]+$/;
    isValid = value === '' ? !isRequired : nameRegex.test(value);
  } else if (field.type === 'email') {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    isValid = value === '' ? !isRequired : emailRegex.test(value);
  } else if (field.type === 'number') {
    isValid = value === '' ? !isRequired : !isNaN(value);
  } else if (field.type === 'text' || field.tagName.toLowerCase() === 'textarea') {
    isValid = value === '' ? !isRequired : true;
  }

  // Apply appropriate class based on validation result
  if (value === '' && !isRequired) {
    field.classList.remove('valid', 'invalid');
  } else if (isValid) {
    field.classList.add('valid');
  } else {
    field.classList.add('invalid');
  }
}
});
</script>

Where to put custom CSS: Where to Put Your Custom CSS - Gravity Forms Documentation

/* Valid fields: Light green background */
.gfield input.valid, .gfield select.valid, .gfield textarea.valid {
  background-color: #d4edda; /* Light green */
}

/* Invalid fields: Light red background */
.gfield input.invalid, .gfield select.invalid, .gfield textarea.invalid {
  background-color: #f8d7da; /* Light red */
}

/* Default fields: White background */
.gfield input:not(.valid):not(.invalid),
.gfield select:not(.valid):not(.invalid),
.gfield textarea:not(.valid):not(.invalid) {
  background-color: #F7F8F9; /* Default white */
}

Disclaimer : Third-party plugins or code snippets that are provided or referenced by our Support Team or documentation, are provided as suggestions only. We do not evaluate, test, guarantee or officially support third-party solutions or code-snippets. You are wholly responsible for determining if any suggestion or code snippet provided is sufficient to meet the functional, security, legal, ongoing cost and support needs of your project, as well as testing and confirming performance across future product updates.

2 Likes
5

Thank you, Chris. We’ll play around with your code, add our own, and try to make this work for us.

Cheers! :slight_smile: