Repeater Fields Collapsible

By: Bobby Singh | Asked: 12/08/2023
ForumsCategory: General questionsRepeater Fields Collapsible
Bobby Singh asked 4 months ago
Hello, Is it possible to make a Repeater Field collapsible? I have tried but it seems I can only make section headings collapsible. I have even tried putting a repeater field inside of a Section heading to make it collapsible but it doesn't seem to work. Any guidance here would be appreciated.  Thank You.
1 Answers
Victor Font answered 4 months ago

A repeater field is an embedded form. So are sections. Embedded forms cannot be embedded within each other. That's why it didn't work. It's something Formidable's architecture denies. But fret not, there is a way if you don't mind writing a little HTML and JavaScript. I'll continue my response in the comment below.

Victor Font replied 4 months ago

That being said, the repeater field is collapsible in the form editor, but not on the front end with good reason. Formidable is masterful at back end functionality. Do things go wrong occasionally, yeah, but it's a great application building tool nevertheless. There's no end to the type of applications that can be be constructed through the WordPress/Formidable Forms marriage.

In preparing this response, I compared a repeater's HTML back end source with the front end source as rendered in the browser by Formidable and shown in the FireFox inspection tool. Inspection tools allow developers to edit the HTML on the front end in real time for testing quality.

To capture the HTML for comparison, I edited the collapsible section on the back end. The element that begins this area is <ul class="frm_grid_container frm_sorting ui-droppable">. There are 4,233 lines of code in the HTML page to support the collapsible header on the back end.

On the front end, the code generated to display the repeater begins with <div id="frm_field_1469_container" class="frm_form_field frm_section_heading form-field "> and has just 129 lines of code for the entire thing that includes 2 rows. That's a significant difference, but I understand why it's that way.

The back end fields are designed to work in the editor only and function as self-contained units. Kind of like a block, but not really. I don't know why Strategy 11 hasn't added collapsiblity to the Repeater field, especially since it already works for Sections. Perhaps, someone needs to open a feature request ticket through their support account.

Formidable provides developers with several ways for inserting their own generated code into the front. You can add/modify HTML on the form's Customize HTML page in the form's settings. The source code from which a repeater is generated on the front end is simplistic:

<div id="frm_field_[id]_container" class="frm_form_field frm_section_heading form-field[error_class]">
<h3 class="frm_pos_[label_position][collapse_class]">[field_name]</h3>
[if description]<div class="frm_description">[description]</div>[/if description]

I suggest that you wrap the [collapse_this] shortcode in your own div that you control with jQuery hide/show. This will leave the header displayed, but hide the rows.

Bobby Singh replied 4 months ago

Thanks for the response Victor. I would have no idea how to do that. I found the source code for the repeater field. But thats as far as I can get. Not sure what to do beyond that point.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community