Form Validation and Button Blocking in CFF

Hello,

I have a form with the class cp_cff_6, where I am checking if certain fields are filled using JavaScript. When I detect empty fields, I add error messages with the classes cpefb_error message, but my custom styles for these error messages are not being applied — instead, the plugin’s default styles with a red background (#dc3545) are used.

Link to the site: https://hauntcomfort.s3-tastewp.com/sample-page/

Details of the issue:

• The form has the class cp_cff_6.
• I have used two variants of the script to check the fields:
  1. Using the CFF API (getField).
  2. Explicitly specifying dynamic IDs (e.g., fieldname5_6).
• With the getField approach, my CSS styles do not override the plugin’s default styles. However, with the dynamic IDs approach, everything works as expected.
• I had to include the form class cp_cff_6 in my CSS to increase the specificity of the selectors.
  
  CSS code:

/* Styles for error messages in the cp_cff_6 form */
.cp_cff_6 #fbuilder div.cpefb_error.message {
    background-color: #2D2D2D !important;
    color: #E7E1DB !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    border: none !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    max-width: 356px !important;
    position: absolute !important;
    top: -44px !important;
    left: 0 !important;
    opacity: 1 !important;
    animation: showThenFade 3.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
}

/* Animation for smooth appearance and disappearance */
@keyframes showThenFade {
    0% { opacity: 0; }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

/* Remove the arrow if present */
.cp_cff_6 #fbuilder div.cpefb_error.message::after {
    display: none !important;
}

Full JavaScript code using getField:

(function() {
  const mandatoryFields = ['fieldname5', 'fieldname2', 'fieldname3'];
  let allFilled = true;
  const $button = fbuilderjQuery('.conditions-checking-button input[type="button"]');
  const originalButtonText = $button.val();

  mandatoryFields.forEach(function(fieldName) {
    const field = getField(fieldName);
    const $field = field.jQueryRef();
    const fieldId = $field.attr('id');
    $field.removeClass('cpefb_error');
    fbuilderjQuery('#' + fieldId + '-error').remove();
  });

  mandatoryFields.forEach(function(fieldName) {
    const field = getField(fieldName);
    const $field = field.jQueryRef();
    const fieldId = $field.attr('id');
    const value = field.val();
    const isEmpty = !value || value.trim() === '' || 
                    ($field.is('select') && value === $field.find('option:disabled').val());
    
    if (isEmpty) {
      allFilled = false;
      $field.addClass('cpefb_error');
      if (!fbuilderjQuery('#' + fieldId + '-error').length) {
        $field.after('<div id="' + fieldId + '-error" class="cpefb_error message">This field is required.</div>');
      }
    }
  });

  if (allFilled) {
    const area = getField('fieldname3').val() || 'not specified';
    const message = encodeURIComponent(Area = ${area} m².);
    const whatsappUrl = https://web.whatsapp.com/send?phone=18002428478&text=${message};
    window.open(whatsappUrl, '_blank');
  } else {
    $button.val('Please fill in the required fields');
    setTimeout(function() {
      $button.val(originalButtonText);
    }, 3000);
    return false;
  }
})();

Full JavaScript code with explicit dynamic IDs:

(function() {
  const mandatoryFields = ['fieldname5_1', 'fieldname2_1', 'fieldname3_1'];
  let allFilled = true;
  const $button = fbuilderjQuery('#fieldname4_1');
  const originalButtonText = $button.val();

  mandatoryFields.forEach(function(fieldId) {
    const $field = fbuilderjQuery('#' + fieldId);
    $field.removeClass('cpefb_error');
    fbuilderjQuery('#' + fieldId + '-error').remove();
  });

  mandatoryFields.forEach(function(fieldId) {
    const $field = fbuilderjQuery('#' + fieldId);
    const value = $field.val();
    const isEmpty = !value || value.trim() === '' || 
                    ($field.is('select') && value === $field.find('option:disabled').val());
    
    if (isEmpty) {
      allFilled = false;
      $field.addClass('cpefb_error');
      if (!fbuilderjQuery('#' + fieldId + '-error').length) {
        $field.after('<div id="' + fieldId + '-error" class="cpefb_error message">This field is required.</div>');
      }
    }
  });

  if (allFilled) {
    const area = fbuilderjQuery('#fieldname3_1').val() || 'not specified';
    const message = encodeURIComponent(Area = ${area} m².);
    const whatsappUrl = https://web.whatsapp.com/send?phone=18002428478&text=${message};
    window.open(whatsappUrl, '_blank');
  } else {
    $button.val('Please fill in the required fields');
    setTimeout(function() {
      $button.val(originalButtonText);
    }, 3000);
    return false;
  }
})();

Problem:

My styles are not being applied, and the error messages are displayed with a red background (#dc3545) from the plugin’s default styles for #fbuilder div.cpefb_error.

Question:

How can I properly set up custom styles for error messages in the cp_cff_6 form so that they override the plugin’s default styles when using the getField approach? Is there something specific about the DOM structure or style priorities in CFF that I might have missed?

Thank you in advance for your help!

Thank you very much! This will greatly simplify the interface setup. I will really look forward to your update, while the current version is 5.3.29 (4 days ago) 🙏🏻