spacemakerman

Hello,

I have implemented a JavaScript solution to adapt a modal popup into an inline element when the screen width is 400px or less. The script removes modal-specific classes, restructures the DOM to move the popup before its trigger button, and resets styles for inline display. When the screen width exceeds 400px, the original modal structure and behavior are restored.

example site: https://thinkableword.s1-tastewp.com/test/ or https://thinkableword.s1-tastewp.com/?cff-form=6

Here is the JavaScript implementation:

function adaptCFFPopup() {
  var $popupWrapper = fbuilderjQuery('.cff-adaptation-popupwindow');
  var $button = fbuilderjQuery('.cff-adaptation-button');

  // Save original state (parent, index, and HTML) on first call
  if (!$popupWrapper.data('original-parent')) {
    $popupWrapper.data('original-parent', $popupWrapper.parent());
    $popupWrapper.data('original-index', $popupWrapper.index());
    $popupWrapper.data('original-html', $popupWrapper.html());
  }

  if (window.innerWidth <= 400) {
    if (!$popupWrapper.hasClass('adapted-inline')) {
      // Remove modal-specific classes
      $popupWrapper.removeClass('hide-strong cff-popup-field cff-container-field');

      // Unwrap modal wrapper to remove modal styling
      $popupWrapper.find('.cff-popup-modal').each(function() {
        var $modal = fbuilderjQuery(this);
        $modal.contents().unwrap();
      });

      // Select popup container again after unwrapping
      var $popupContainer = $popupWrapper.find('.cff-popup-container');

      // Move popup before the button to maintain document flow
      $button.first().before($popupWrapper);

      // Reset inline styles and apply inline display styles
      $popupContainer.attr('style', '');
      $popupContainer.css({
        'position': 'relative',
        'top': 'auto',
        'left': 'auto',
        'transform': 'none',
        'width': '100%',
        'max-width': 'none',
        'min-width': 'auto',
        'min-height': 'auto',
        'height': 'auto',
        'display': 'block'
      });

      // Hide the trigger button
      $button.hide();

      // Mark popup as adapted for inline display
      $popupWrapper.addClass('adapted-inline');
    }
  } else {
    if ($popupWrapper.hasClass('adapted-inline')) {
      // Restore original modal structure and behavior
      var originalHtml = $popupWrapper.data('original-html');
      $popupWrapper.html(originalHtml);

      // Re-add modal-specific classes
      $popupWrapper.addClass('hide-strong cff-popup-field cff-container-field');

      // Move popup back to its original DOM position
      var $originalParent = $popupWrapper.data('original-parent');
      var originalIndex = $popupWrapper.data('original-index');
      if ($originalParent.length) {
        if ($originalParent.children().length > originalIndex) {
          $popupWrapper.insertBefore($originalParent.children().eq(originalIndex));
        } else {
          $originalParent.append($popupWrapper);
        }
      }

      // Show the trigger button again
      $button.show();

      // Remove adaptation flag
      $popupWrapper.removeClass('adapted-inline');
    }
  }
}

// Optimize event handling (debounce)
var debounceAdapt = (function() {
  var timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(adaptCFFPopup, 150);
  };
})();

// Run on page load and window resize
fbuilderjQuery(document).ready(adaptCFFPopup);
fbuilderjQuery(window).resize(debounceAdapt);

Question:

How can I achieve this same adaptive popup behavior using CFF’s built-in functionality? Specifically:

• Can CFF dynamically switch a modal popup to inline mode based on screen width?
• Are there built-in settings or hooks that allow modifying the popup structure (e.g., moving elements in the DOM)?
• Is there a recommended approach within CFF to handle this responsiveness without relying on direct DOM manipulation?

Thank you for your guidance!

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!

https://app.screencast.com/N13vt09PXVCoh

This works, but when the “Show as floating tooltip” checkbox is enabled, the style doesn’t work fully.

This code does not redefine the field outline on input error in a CFF form environment:

.cff-form #fbuilder .uh div.cpefb_error.message{
	border-color: #000000 !important;
	background-color: #000000 !important;
	color: #ffffff !important;
}
.cff-form #fbuilder .uh div.cpefb_error.message::after{
	border-bottom-color: #000000 !important;
}

form.cff-form #fbuilder .fields .dfield input.cpefb_error,
form.cff-form #fbuilder .fields .dfield textarea.cpefb_error,
form.cff-form #fbuilder .fields .dfield select.cpefb_error {
border: 1px solid #000000 !important;
}

page for example: https://spacemakerman.s1-tastewp.com/?cff-form=10

Thank you, I’m talking about something else. I need the preset value to be unselectable.

I found a solution via a script and adding a class:

<script>

jQuery(function($) {
    $('div.my_dropdown_1 select').each(function() {
        var $select = $(this);
        var $firstOption = $select.find('option[value=""]');
        $firstOption.prop('disabled', true).prop('selected', true);
        $select.find('option').not($firstOption).removeAttr('selected');
    });
});

</script>

demo page: https://spacemakerman.s1-tastewp.com/?cff-form=9

But maybe there are some CFF settings I don’t know about, or a better solution?

sorry for the confusion, i meant setting the value in dropdown for the third option
I tried this code but it doesn’t work.

(function() {
  var dropdown = getField('fieldname5|n').jQueryRef().find('select');
  dropdown.find('option:eq(2)').val(fieldname1);
  return fieldname1;
})();

example page: https://spacemakerman.s1-tastewp.com/?cff-form=8

No, another add-on was purchased, all forms with this add-on are now uneditable. We contacted support via DWBooster, we are waiting for the situation to be resolved as soon as possible.

Thank you, I used your code. But after clicking the button, nothing happens.
[ Short link deleted, don’t use those here ]

• This reply was modified 1 year, 3 months ago by Jan Dembowski.