How to slide down conditional form elements

How To
1

I have a few forms with conditional fields/elements and I would like these to appear with a slide down effect. I was using Piotnet Bricks for a while and their conditional form elements had a setting for sliding the div in with easing, but it looks like this isn’t an option on Bricksforge, unless I’ve missed something? Maybe this is something in the pipeline, but I’d also be interested in any custom code anyone has used to get an effect like this. I’m not too savvy with code myself.

2

Hi Nick,

you haven’t missed anything: Pro Forms doesn’t have a built-in slide/easing setting for conditional fields at the moment. When a condition changes, the field or Conditional Wrapper is simply switched between display: none and visible, so it appears and disappears instantly.

The good news is that you can add a smooth reveal with a few lines of CSS, no JavaScript needed. Every field or Conditional Wrapper that has conditions gets a data-brf-conditions attribute, and a CSS animation replays each time an element goes from hidden to visible. Paste this into your custom CSS (for example Bricks > Settings > Custom code, or the page settings):

.brxe-brf-pro-forms [data-brf-conditions]:not(.brxe-brf-pro-forms-field-step) {
  animation: brf-slide-down 0.4s ease-out;
}

@keyframes brf-slide-down {
  from {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }
  to {
    opacity: 1;
    max-height: 800px;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brxe-brf-pro-forms [data-brf-conditions] {
    animation: none;
  }
}

A few notes:

  • Adjust 0.4s and ease-out to taste. If one of your conditional sections is taller than 800px, increase that value, otherwise it gets cut off during the animation.
  • Steps in multi-step forms are excluded because they have their own “Animate Steps” setting.
  • Only the reveal is animated. Hiding still happens instantly, because the element is set to display: none right away.
  • Conditional elements that are already visible when the page loads will play the animation once on load as well.

If you’d rather have a softer effect without the height change, just remove the two max-height lines and use transform: translateY(-10px) in “from” and transform: translateY(0) in “to”.

Cheers,
Daniele

1 Like
3

Thanks Daniele. That works a treat! Is a slide up also possible when conditions change, or is that more/too complicated?