skip to Main Content

I would like to dynamically set the email recipient of a wpcf7 contact form.

The step by step process of the user journey is as follows:

  1. The website provides multiple law services. A user goes into one of these service pages and within each service page there is an element which generates a loop for a custom post type called ‘Solicitor’. Each solicitor which provides this service is displayed in a grid.

  2. The user clicks on a call to action on the solicitor they wish to contact.

  3. This triggers a popup (I’m using the Popup Maker plugin) This popup contains a simple wpcf7 form with inputs such as name, email, message, etc. The user fills in the form and sends the contact form.

  4. I want the contact form input to be emailed to the solicitor which the user clicked on.

My approach has been to get all contact solicitor call to actions and loop through them. Each of these call to actions have a data-id attribute with the corresponding solicitor post-id.

const solicitorContactBtns = document.querySelectorAll('.cta');

solicitorContactBtns.forEach(solicitorContactBtn => {

    solicitorContactBtn.addEventListener('click', () => {

    // Was planning on getting the data-id attribute (post-id) and somehow setting the recipient email to the 'email' custom field of this post-id. Not sure how to do this or if this is event possible?

    });

});

I may be using the wrong approach any help is much appreciated.

2

Answers


  1. I faced exactly the same problem on a recent project. The solution is to make each solicitor a page of their own. Perhaps "/contact-solicitor-bob" for example. Useful anyway since they can display info personal to them on said page. Then the clever part. On this personal page you add a meta-data called (say) "form_recipient" and to that you add their email address.

    In your functions file you add this:

    add_filter( 'wpcf7_before_send_mail', 'md_before_send_mail_function', 10, 3 );
    
    function md_before_send_mail_function( $contact_form, $abort, $submission ) {
     $postId = $_POST['_wpcf7_container_post'];
     $formID = $_POST['_wpcf7'];
     
     $emailFromCustomField = get_post_meta($postId, "mail_recipient", true);
    
     if(!empty($emailFromCustomField)) {
      $properties = $contact_form->get_properties();
      $properties['mail']['recipient'] = $emailFromCustomField;
      $contact_form->set_properties($properties);
     return $contact_form;
    }
    

    …that’s it.

    Login or Signup to reply.
  2. A work around of the ‘wpcf7_before_send_mail’ hook is to create a new email input, make that shortcode the ‘To’ field in the mail tab like so:

    admin email input for the To tab

    And then hide the input with some CSS, e.g.

    input[name="admin-email"] {
        display: none;
    }
    

    Then use something like this below.

    Get the dynamic email however you like, in this case, I’m just declaring it:

    <?php $admin_email = '[email protected]'; // get your email address ?>
    

    Then using some jQuery to set the value of the admin email input.

    <script type="text/javascript">
        (function($) { 
            $('input[name="admin-email"]').val('<?php echo $admin_email; ?>');
        })( jQuery );
    </script>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search