The Gravity Forms repeater field example is helpful, but has multiple issues that don’t make themselves apparent until you try to implement it.
Thankfully Giorgos Sarigiannidis has a better repeater example that solves some of the most troubling issues of the repeater field.
Here is my example of the same idea, but using a different form as the fields in the repeater. This allows the client to update the fields in the repeater themselves.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
add_filter( 'gform_form_post_get_meta_30', 'jb_add_repeater' ); function jb_add_repeater( $form ) { $field_id = 1000; $another_form = GFAPI::get_form( 35 ); foreach ( $another_form['fields'] as $field ) { $field->id = $field_id += 1; $field->formId = $form['id']; if ( is_array( $field->inputs ) ) { foreach ( $field->inputs as &$input ) { $input['id'] = (string) ( $input['id'] + 1000 ); } } } $repeater = GF_Fields::create( [ 'type' => 'repeater', 'description' => '', 'id' => $field_id, 'formId' => $form['id'], 'label' => 'Attendees:', 'addButtonText' => 'Add Attendee', 'removeButtonText' => 'Remove Attendee', //'maxItems' => 5, 'pageNumber' => 1, 'fields' => $another_form['fields'], ] ); $repeater_exists = false; foreach ( $form['fields'] as $field ) { if ( 'repeater' === $field->type && $field->id === $field_id ) { $repeater_exists = true; } } if ( ! $repeater_exists ) { $form['fields'][] = $repeater; } return $form; } |
Gforms doesn’t have a counter system built in yet so if you want to use a counter with your repeater ( ex: Attendee #1, Attendee #2, etc… ) here is some SCSS code you can use to accomplish that.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.gfield_repeater_items { counter-reset: section; .gfield_label { font-size: 1.6rem; } .gfield_repeater_item { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px; .gfield_repeater_buttons { display: none; margin-bottom: 20px; .add_repeater_item { margin-right: 20px; } } &:before { counter-increment: section; content: "Attendee #" counter(section) ":"; color: black; display: block; margin-bottom: 15px; } &:last-child { .gfield_repeater_buttons { display: block; } } } } |
This will look something like this:
