Send Email To Multiple Recipients With Repeat Group

This guide will explain how to add and remove email IDs using Repeat and trigger multiple emails using an Email connection.

Initial Setup:

Drag and drop a “Text” field inside a “Repeat” field onto your form.
Rename the fields as needed.

Drag and drop a “Hidden” and a “JavaScript” field onto your form.
Rename the fields as needed.

Configuring The “JavaScript” Field:

Click the pencil icon of the “JavaScript” field.
Paste the code.

Please use the code below.

// Define the hidden field ID
var hidden_field_id = 'c309-729e-9763';
// Define the repeat group field ID
var repeat_group_id = 'fc3b-3220-fb10';
// Define the email field component ID pattern (dynamic)
var email_field_component_id = '55f8-5582-9dad';
// Listen for new repeat group entries
formyoula.form_fields[ repeat_group_id ].on( 'element:create:success', function( event_object ) {
  collect_emails(); // Recalculate and update the hidden field
} );
// Listen for repeat group deletions
formyoula.form_fields[ repeat_group_id ].on( 'element:delete:success', function( event_object ) {
  collect_emails(); // Recalculate and update the hidden field
} );
// Listen for changes within repeat group fields, but only update when email field changes
formyoula.form_fields[ repeat_group_id ].on( 'repeat:item:change', function( event_object ) {
  if ( event_object && event_object.field_id === email_field_component_id ) {
    collect_emails(); // Update the list only if the email field is changed
  }
} );
// Function to collect emails and update the hidden field
function collect_emails() {
  var email_list = []; // Initialize an array to store collected emails
  // Ensure the repeat group field exists
  if ( window.formyoula && window.formyoula.form_fields[ repeat_group_id ] ) {
    var repeat_group_values = window.formyoula.form_fields[ repeat_group_id ].get( 'repeat_value' );
    if ( Array.isArray( repeat_group_values ) ) {
      repeat_group_values.forEach( function( group_entry ) {
        if ( Array.isArray( group_entry ) ) {
          // Iterate through each field within the group
          group_entry.forEach( function( field_entry ) {
            // Check if the field entry contains a value
            if ( field_entry && field_entry.value ) {
              // Add the email value to the email list
              email_list.push( field_entry.value );
            }
          } );
        }
      } );
    }
  }
  var email_string = email_list.join( ',' ); // Convert emails into a comma-separated string
  if ( window.formyoula.form_fields[ hidden_field_id ] ) {
    window.formyoula.form_fields[ hidden_field_id ].set( { value: email_string } );
  }
}

Make sure to update the field IDs as per your form.

Set Up An Email Connection:

Please check out this guide to set up an email connection - https://guides.formyoula.com/public-guides/email-connection
Please add the “Hidden” field ID under the “To Email” option.
You can copy the field ID from the “Merge Fields” option.

Test Your Form:

Try the form.
Add and remove email IDs.
The “Hidden” field will be updated with the added email IDs.
Submit the form.

It will trigger multiple emails based on the email IDs stored in the “Hidden” field.

Example Form.json6.7KB

For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂