A Better GForms Repeater Example

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.

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; 
}

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.

.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: