craft-freeform icon indicating copy to clipboard operation
craft-freeform copied to clipboard

Form row classes getting removed when submitting via ajax

Open paulgoodfield opened this issue 6 months ago • 3 comments

What happened?

Am using the default Flexbox formatting template on a form. Form is set to submit using ajax and to "Reload form with a success banner above".

When the form is submitted successfully, the form loses the class="freeform-row" attributes that were in place on each row div, which is messing up how the form looks.

Example:

Here's the markup for one of the rows prior to the form submitting...

<div class="freeform-row freeform-row">
   <div class="freeform-column-6 freeform-fieldtype-text freeform-column" data-field-container="firstName" data-field-type="text"><label class="freeform-label freeform-required" for="form-input-firstName">First Name</label>
      <input novalidate="" class="freeform-input" name="firstName" type="text" id="form-input-firstName" placeholder="Your first name" value="">
   </div>
   <div class="freeform-column-6 freeform-fieldtype-text freeform-column" data-field-container="lastName" data-field-type="text"><label class="freeform-label freeform-required" for="form-input-lastName">Last Name</label>
      <input novalidate="" class="freeform-input" name="lastName" type="text" id="form-input-lastName" placeholder="Your last name" value="">
   </div>
</div>

...and after the form submits, the markup for the same row in the form looks like this...

<div>
   <div class="freeform-column-6 freeform-fieldtype-text freeform-column" data-field-container="firstName" data-field-type="text"><label class="freeform-label freeform-required" for="form-input-firstName">First Name</label>
      <input novalidate="" class="freeform-input" name="firstName" type="text" id="form-input-firstName" placeholder="Your first name" value="">
   </div>
   <div class="freeform-column-6 freeform-fieldtype-text freeform-column" data-field-container="lastName" data-field-type="text"><label class="freeform-label freeform-required" for="form-input-lastName">Last Name</label>
      <input novalidate="" class="freeform-input" name="lastName" type="text" id="form-input-lastName" placeholder="Your last name" value="">
   </div>
</div>

I'm rendering the form just using the standard {{ form.render() }}

Errors and Stack Trace (if available)

No response

How can we reproduce this?

  1. Create a form that uses the 'Flexbox' formatting template
  2. Make sure that forms are set to use ajax for processing
  3. Make sure that forms are set to "Reload form with a success banner above" in the Success Behaviour settings
  4. Render form on a page using {{ form.render() }}

Freeform Edition

Pro

Freeform Version

5.5.7

Craft Version

4.11.3

When did this issue start?

Fresh install of Freeform

Previous Freeform Version

No response

paulgoodfield avatar Aug 15 '24 14:08 paulgoodfield