One of the powerful features of Formidable forms is repeated fields which allow repeating a set of fields in a Form. Formidable allows customizing how repeated records are displayed using the “Repeat layout” setting.
- No auto-formatting: In this layout, each repeated record displayed in their original format.
- Inline: In this layout, All fields in a repeated record is displayed in a row.
- Grid: In this layout, repeated records are displayed in a table where fields’ labels become table header.
While these layouts are useful in various scenarios, one of the issues with these layouts is all repeated records are visible at all times. This will be a problem if the repeater has a lot of fields inside or the user has to add many repeated records. When that happens, the form will become very big and the user will have a hard time focusing on it.
We are going to address this issue in this post by adding the accordion effect to repeated records.
Step 1: Load jQuery UI library. The following code can be added to functions.php or Code Snippets plugin can be used.
wp_enqueue_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', array('jquery'));
wp_enqueue_style('jquery-ui-css', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css');Step 2: Create the form with the repeater field and other fields the usual way.
Step 3: The next step is to make sure the repeated field and the Add & Remove buttons are displayed in the same line. Click on the repeater field and add “frm10” class to “CSS Layout classes” field setting. Click on the Add/Remove button of the repeater field and add “frm_sixth” class to “CSS Layout classes” field setting. Please note that this step needs adjustment based on your theme and page layout. You can also completely skip this and write your own CSS to do the alignment.
Step 4: Go to Settings –> “Customize HTML” in the form and edit it as per the followings instructions.
a) Identify the first field inside the repeater and add the following HTML at the beginning of it.
<div class="accordion"> <h3><span class="accordion-title-text">Section 1</span></h3> <div>
b) Identify the last field inside the repeater and add the following HTML at the end of it.
</div> </div>
Basically what we did here is wrapping the repeater section with HTML required by accordion.
Step 5: Copy following Javascript to the “After fields” section.
<script type="text/javascript">
jQuery(document).ready(function($) {
$(document).on("accordioncreate", '.accordion', function(event, ui) {
setAccordionTitles();
$('.accordion').not(this).accordion('option', {active: false});
});
createAccordion();
$(document).on('frmAfterAddRow', createAccordion);
$(document).on('frmAfterRemoveRow', setAccordionTitles);
function createAccordion() {
$( ".accordion:not(.ui-accordion)" ).accordion({
collapsible: true, active: 0, heightStyle: "content",
beforeActivate: function( event, ui ) {
if(!ui.oldPanel.length) {
$('.accordion').not(this).accordion('option', {active: false});
}
}
});
}
function setAccordionTitles() {
$("h3.ui-accordion-header .accordion-title-text").each(function (index, value) {
$(this).text("Member " + (index + 1) + " - " + $("#field_5gn8v-" + index).val()); //Replace 5gn8v with the ID of the field to display it's value as part of title
});
}
});
</script>If you read the above Javascript, you will know a little secret. What we are creating is not a single accordion with multiple sections. Instead, each repeater record is an accordion with a single section. If you have 10 rows in your repeater, there will be 10 independent accordions each with one section. I chose this approach because I couldn’t find a way to integrate single accordion with Formidable HTML. The above Javascript does the magic of turning all of the accordions behaving like a single accordion.
In line 25, the title of the accordion section is set. If you want a different name for the title, replace the text “Member ” with your text.
Step 6: Add necessary CSS in “Formidable” –> “Styles” –> “Custom CSS” to make the layout fit your website. The styles vary depends on your theme and other settings. The following styles are used in the example below.
.frm_repeat_buttons {
float:right !important;
}
.ui-accordion {
float: left !important;
width: 80%;
}
.ui-accordion-header {
padding: 6px 0 !important;
background: #F9E79F !important;
border-color: #F9E79F !important;
}
.ui-accordion-header.ui-state-active {
background: #F1C40F !important;
}Demo
The following is an example form. Play with it by adding a few more repeater records and then try to expand records one after another to see the accordion effect.
Hi, thank you for this great accordion solution! It’s important to check the box “submit form with Ajax” in Formidable forms settings, so it won’t refresh the site in case of a validation problems after submitting. Otherwise the accordion won’t work after a refresh.
This is great code and a welcome addition to the form. Thank you for taking the time to share this.
When I followed this, I lost the formatting of my form – the checkbox fields I had set as 1/6 or 1/4 so they fit in one row, are now one on each row. The accordion form is taking up more vertical space as a result. Also, my add/remove buttons are below the accordion, not to the side – on the side is just blank whitespace.
I’m still looking at this setup to see where I went wrong.
Thank you again,
Mike
Hi,
Thanks for the useful info.
I have a question. Do I need to BUY a formidable pro to have an accordion? I’m using formidable free version on wordpress.
Hi Kb,
As far as I know, the repeater is part of Formidable pro. The accordion is a custom solution built on top of repeaters as I described above. If you are buying pro version, appreciate using my affiliate link to support my blog https://www.formscity.com/go/formidable/formidable-forms/
I have followed the steps above and it has created an accordion but all the repeater fields including the add and removed buttons are inside one accordion.
When I repeat the fields it creates a set fields in the same accordion and doesn’t create an additional accordion tab.
Solved. Code works fine.
i am using formidable pro i make a form with repeater section and integrated this form with the affiliateWp plugin. my form was integrate but i want to selected purchase amount as price in the but the price column in thr repeater section therefore price column nothing show only show columns in the form . Any solution.
Dear Sujeevan,
This is great!
Would it be possible to display the contents of the “Full Name” field in the accordion title text?
So, instead of displaying:
Member 1
Member 2
.
.
Member N
… it instead displayed, eg:
Member 1, John Doe
Member 2, Jane Doe
etc
yes, Ruben. I have updated the function “setAccordionTitles” to do what you asked. Please check the demo above to see it in action. If you are familiar with jQuery, you can customize it to display any field values in the title.