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