Dynamic number of contact form recipients 7

Question

I am working on a form, with it, basically, two files: the main and the "other recipient"; at the end of the “other recipient” field, I have the link “add another recipient”.

Here who needs what:

Principal Recipient: all

Other recipient: field "other recipient";

Resulting Recipients: Matched Fields

So far I have looked at the Documentation , but I was not lucky, not what I expected.

---

Edit

I think this is unclear, so I will be a little more frank about what the context is. My form is a registration, in which we can register several people; one of the fields is marked as "Your email address". Since we can register several people at once, I need to duplicate the fieldset containing "Your email address".

---

Edit 2

To clarify, imagine that we are signing children to a summer camp. The first fieldset is the common, say, parent billing information, and the second fieldset is the child information. The parent should be able to fill out one form and dynamically add as many children as the parent wishes.

In each of the fieldset children, their email is required, and they receive information related to this child, where the email will look like:

 Hello {children name}, You've been registered to StackOverflow Summer Camp. Here the information you need to know: [...] Thanks for being a good sport! 

Hope this helps.

Answer 1

When you have a specific use case like this, using functions in peripheral plugins often leads to frustration. That said - there are times when you are married to a particular plugin or approach, and you just need to build on top of it.

With this caveat, I think you should approach this at an angle , creating a new field type for contact form 7. So you have control over the display of the HTML field, validation data, among other things. It can also provide a starting point for storing a database and sending reminders later, as you mentioned in the comment to another answer.

Here's the approach in action:

The new field type is called emailplus , and you include it in the form of the following form:

 <div class="cf7-duplicable-recipients"> <label>Main Recipient (required)</label> [emailplus emails] [submit "Sign Up"] </div> 

In addition, I set the recipient in the "mail" panel in the form settings to [emails] .

If the emailsplus field is set as the recipient, the class overrides the default wpcf7 behavior and sends mail to each value in the email array, replacing all [emails] in the message body with -email basis.

The emailplus field emailplus encapsulated here in the class and commented liberally:

 <?php class WPCF7_Duplicable_Email { /** * The emails this form field is addressed to * * @var array */ public $emails = array(); /** * The name of the tag bearing the emailplus type * * @var string */ public $tag_name; /** * Instantiate the class & glom onto the wpcf7 hooks * * @return void */ public function __construct() { add_action('wpcf7_init', array($this, 'add_emailplus_tag')); add_action('wpcf7_form_tag', array($this, 'assign_values_to_field')); add_filter('wpcf7_validate_emailplus', array($this, 'validate'), 2); add_action('wpcf7_before_send_mail', array($this, 'send_email')); add_action('wp_enqueue_scripts', array($this, 'emailplus_scripts')); } /** * Add our the [emailplus __YOUR_FIELD_NAME__] shortcode for use in wpcf7 forms. * * @uses wpcf7_add_shortcode * * @return void */ public function add_emailplus_tag() { wpcf7_add_shortcode( array('emailplus'), array($this, 'shortcode_handler'), true ); } /** * Renders the HTML for the [emailplus] shortcode * * Referenced from wpcf7_text_shortcode_handler in wp-content/plugins/contact-form-7/modules/text.php * * @param array $tag The data relating to the emailplus form field. * * @uses wpcf7_get_validation_error * @uses wpcf7_form_controls_class * * @return string */ public function shortcode_handler(array $tag) { $tag = new WPCF7_Shortcode($tag); if (true === empty($tag->name)) { return ''; } $validation_error = wpcf7_get_validation_error($tag->name); $class = wpcf7_form_controls_class($tag->type); if ($validation_error) { $class .= ' wpcf7-not-valid'; } $atts = array( 'class' => $tag->get_class_option($class), 'id' => $tag->get_id_option(), 'tabindex' => $tag->get_option('tabindex', 'int', true), 'aria-invalid' => $validation_error ? 'true' : 'false', 'type' => 'email', 'name' => $tag->name.'[]', // <-- Important! the trailing [] Tells PHP this is an array of values 'value' => $tag->get_default_option() ); $atts = wpcf7_format_atts($atts); $html = sprintf( '<div class="emailplus-wrapper %1$s"><input %2$s />%3$s</div>', sanitize_html_class($tag->name), $atts, $validation_error ); // We identify the container that will hold cloned fields with the [data-wpcf7-duplicable-email] attr return '<div class="wpcf7-form-control-wrap %1$s" data-wpcf7-duplicable-email>'.$html.'</div>'; } /** * Validates the value of the emailplus tag. * * Must be handled separately from other text-based form inputs, * since the submitted POST value is an array. * * We can safely assume emailplus while creating the WPCF7_Shortcode, * because we know we hooked this function onto 'wpcf7_validate_emailplus' * * @uses wpcf7_is_email * @uses WPCF7_Validation::invalidate * * @param WPCF7_Validation $result The validation helper class from wpcf7. * @param array $tag The array of values making up our emailplus tag * */ public function validate(WPCF7_Validation $result, $tag) { $tag = new WPCF7_Shortcode( array( 'basename' => 'emailplus', 'name' => $this->tag_name, 'raw_values' => $this->emails ) ); // Check each value of the form field. // Emails must be validated individually. foreach($tag->raw_values as $email) { if (false === wpcf7_is_email($email)) { $result->invalidate($tag, wpcf7_get_message('invalid_email')); } } return $result; } /** * For completeness' sake, manually assign the value to the emailplus fieldtype. * * Wpcf7 doesn't know how to treat our fieldtype value by default. * * As a side effect, this sets the email addresses that are up for delivery. * * @param array $scanned_tag The tag that wpcf7 is scanning through, and processing. * * @return $array; */ public function assign_values_to_field($scanned_tag) { if ($scanned_tag['type'] !== 'emailplus') { return $scanned_tag; } $this->tag_name = $scanned_tag['name']; if (key_exists($scanned_tag['name'], $_POST)) { // Stores the emails on a class property for use later. $this->emails = $_POST[$scanned_tag['name']]; $scanned_tag['raw_values'] = $this->emails; $scanned_tag['values'] = $this->emails; } return $scanned_tag; } /** * Performs a substitution on the emailplus field fieldname, on a per-value basis. * * Ex. in two parts * 1 - The shortcode [emailsplus emails] renders into <input type="email" name="emails[]" value="" > * Which the user clones and submits, processing into something like * [' [e-mail] ', ' [e-mail] ']. * 2 - The user has set [emails] as the recipient in the "mail" panel for the form. * * Because wpcf7 isn't aware of how to process a field w/ multiple values when emailing, * we loop over the values of [emails], replace the tag, and invoke WPCF7_Mail::send() * for each value. * * @param WPCF7_ContactForm $form The contact form object. * * @uses WPCF7_Mail::send * * @return void */ public function send_email(WPCF7_ContactForm $form) { $placeholder = '['.$this->tag_name.']'; if (false === strpos($form->prop('mail'), $placeholder)) { return; } foreach ($this->emails as $email) { $template = $form->prop('mail'); $template['recipient'] = str_replace($placeholder, $email, $template['recipient']); $template['body'] = str_replace($placeholder, $email, $template['body']); WPCF7_Mail::send($template); } // Tell cf7 to skip over the default sending behaviour in WPCF7_Submission->mail() $form->skip_mail = true; } /** * Adds our js that will clone the emailplus field. * * Could be optimized with a conditional that checks if there is a form with the [emailplus] * fieldtype somewhere on the page * * @return void */ public function emailplus_scripts() { wp_enqueue_script( 'cf7-duplication', get_template_directory_uri() . '/js/cf7-duplication.js', array('jquery'), '20161006', true ); } } $wpcf7DuplicableEmail = new WPCF7_Duplicable_Email(); 

And a .js file that handles cloning. He should live in /path/to/your/theme/js/cf7-duplication.js' .

 (function($) { $(document).ready(function() { var addEmailField = function(inputRow, container) { inputRow.find('input[type=email]').val(''); var removeButton = $('<a href="#">&times;</a>') .click(function(e) { e.preventDefault(); inputRow.remove(); }); inputRow.append(removeButton); inputRow.insertAfter(container.find('.emailplus-wrapper').last()); } $.each($('[data-wpcf7-duplicable-email]'), function(i, el) { var container = $(el); var inputRow = container.find('.emailplus-wrapper'); var addButton = $('<a href="#">Add another email</a>'); addButton.click(function(e) { e.preventDefault(); var newEmailField = inputRow.clone(); addEmailField(newEmailField, container); }); container.append(addButton); }); }); })(jQuery); 

Last but not least, if you want the form to disappear when it is valid and the emails deleted, add it to the Advanced Settings panel.

 on_sent_ok: "jQuery('.cf7-duplicable-recipients').fadeOut();" 

This approach is best for CF7 AJAX views. If you want to extend it to handle POST vanilla requests, you can update the short code handler to display a few <input> fields where you need to keep the value attr for invalid views.

Answer 2

Parameters 1) Under the "Mail" button in the setup menu, after clicking the "Mail" button (2), add this line to the "TO" field. If the parent has less than the number of children indicated, the additional email addresses should not do anything. [email], [email] - the main format.

 [parents-email], [kid-email1], [kid-email2], [kid-email3], [kid-email4], [kid-email5], [kid-email6], [kid-email7] 

Option 2) In the TO: field, simply enter 1 email address, for example, parents. and in additional headers: put the code below

 CC: [kid-email1], [kid-email2], [kid-email3], [kid-email4], [kid-email5], [kid-email6], [kid-email7] 

or

 BCC: [kid-email1], [kid-email2], [kid-email3], [kid-email4], [kid-email5], [kid-email6], [kid-email7] 

Possible problem that may arise: many hosts block such actions to prevent spam. If the theses do not work, then this is probably true. You will need to contact your hosting provider to remove the block.

Answer 3

Contact form 7 has only one recipient field, however you can enter several email addresses with a comma separated in this field, for example, "email1 @ domain.com, email2 @ domain.com, email3 @ domain.com".

So, for your case, use JavaScript to dynamically add multiple duplicate recipient fields, and finally, in the submit form, write a JavaScript function to complete all the recipient's email addresses, then save this to the main recipient field and submit the form. I hope you understand my point.