How to Add JavaScript to Contact Form 7 events programmatically

By /

Contact Form 7 is probably the most used plugin considering that WordPress official stats rank it 2nd after Akismet which comes bundled with WordPress.

I myself use it a lot, and I had the chance to extend it in different ways depending on my current client needs. The last challenge I had was to add code that runs when the on_sent_ok event is triggered, my client wanted me to add the additional code inside the plugin, so that people won’t be able to remove that code unless they deactivate the plugin.

long story short this is how to do it:

Hook to wpcf7_contact_form_properties

This filter hook allows you to modify the WPCF7 form properties, I’m specially interested in “Additional Settings“, let us first hook our callback to the Contact Form 7 filter hook:

add_filter( 'wpcf7_contact_form_properties', 'my_plugin_wpcf7_properties' , 10, 2 );

Now let’s write the callback function my_plugin_wpcf7_properties(), one thing to note here is that Contact Form 7 expects additional settings to be entered in a special format, this one:

   event_A: "Code to run for event_A"
   event_B: "Code to run for event_B"
   event_B: "Another Code to run for event_B"

Write the callback function that injects additional settigns

Empty lines are fine, so to be on the safe side, I will add a couple of new lines, one before and one after the additional setting, here’s the code:

/**
 * Add the code that will run when on_sent_ok is triggered;
 */
function my_plugin_wpcf7_properties( $properties, $contact_form_obj /* unused */ ){
    $properties[ 'additional_settings' ] .= 
        "\n"
        . 'on_sent_ok: "console.log(1);"' . "\n"
        // . 'on_sent_ok: "console.log(2);"' . "\n"
        // . 'on_sent_ok: "console.log(3);"' . "\n"
    ;
    return $properties;
}

The nice thing here is that you can add as many on_sent_ok (or others) as you want as long as you separate them with new lines.

12 thoughts on “How to Add JavaScript to Contact Form 7 events programmatically”

  1. Charlie

    Worked, thanks!

    Note typo on the add_filter line…

    add_filter( 'wpcf7_contact_form_properties', 'my_plugin_wpcf7_properties' ), 10, 2 );

    should be

    add_filter( 'wpcf7_contact_form_properties', 'my_plugin_wpcf7_properties', 10, 2 );
    Reply
  2. Mike Perry

    Greetings,

    Just came across your blog pages doing an endless search for a solution.

    I recently took over a WordPress site for a charity I am a volunteer with and with that new responsibility I have been learning WordPress, PHP, CSS, javascript – none of which I was very well studied on previous to a few months ago. Therefore I am a plebe.

    What I desire to do is to be able to accomplish the following sequence of events:

    1. Have a user complete and submit a Contact Form 7 form.
    2. Have the results of that submission result in a PDF document being created with the data from the form used to populate fields in the PDF document.
    3. Have that PDF document either e-mailed to the user, or presented to the user for download.

    4. Spend ZERO money or very little money and avoid recurring costs at all costs since the Charity is very cash poor (usually when there is a cost, the members pool their money to pay that cost as needed).

    I know there are plugins that do this, but they cost money and I am hesitant to move away from Contact Form 7 since it has a lot of support in forums, etc. I did see one that I thought would work (Send PDF for Contact Form 7) but it will not install in WordPress so I am left trying to piece together a solution and available information online is rather scarce or years old and likely outdated by now.

    Any chance you could share some thoughts to point me in the right direction as I am not even sure which PDF library of the several out there would be the best/easiest to work with as well as being compatible with WP.

    I truly do appreciate any time you spend replying to this message. I have been told that some $$$ could be spent on this, but it is not much and it shouldn’t be for a subscription service as there is no way of knowing if the money will be there again in a year’s time.

    Thank you,

    Mike

    Reply
    1. Nabil

      April 5, 2017 at 3:43 am

      Hi,

      1. You don’t need me for this one
      2. If you don’t want to buy a plugin, you will need to write one
      3. Same as above
      4. Recurring costs are not the norm, and sometimes, you get lifetimes updates for free

      In my opinion, this task is not an easy one unless you know your way into (1) PHP and (2) WordPress plugin development, bying a plugin or hiring a developer seems safer to me.

      Thanks,
      Nabil

      Reply
  3. sero

    Hi Nabil,

    I’ve a client that wants 2 submit buttons. So every submit button must send the client to another page.
    I’ve made conditianal fields, but now I want to give each button a new on_sent_ok: "location.replace('url');"

    I’m using the contact 7 form wp plugin. I hope you can give me a nice solution.

    Best regards,
    Sero

    Reply
    1. Nabil

      Hi Sero,

      You can use conditions inside the on_sent_ok or you can use a variable url that gets populated with different values depending on the button that was clicked.

      Reply
      1. Sero

        Hi Nabil,

        Thanks for fast reply! can you give me a example please?
        These are my 2 buttons, I want for this each button another redirect url.

         [submit class:button id:MySubmit  "GOING TO ADRESS"]
 [submit class:button id:MyReserve  "RESERVE NOW"]

        Hope you can find a solution for this.

        Best regards,
        Sero

        Reply
        1. Nabil

          Hi Sero,

          You could do it like this (untested):

          
[submit class:button id:MySubmit  "GOING TO ADRESS"]
[submit class:button id:MyReserve  "RESERVE NOW"]
 
<script>
var url;

jQuery( function ( $ ) {
    $( '#MyReserve' ).click( function() {
        url = 'https://google.com/';
    } );

    $( '#MySubmit' ).click( function() {
        url = 'https://yahoo.com/';
    } );
} );
</script>

          And for the on_sent_ok you would have "location.replace( url );", notice how url is not surrounded with quotes.

          Cheers
          Nabil

          Reply
  4. Moussa

    hello
    can you help me add to the form a button (+ and -) to give the ability to the front end users to add specific fields

    Reply
  5. hitu

    Hi,
    Contact form 7 going to remove the on_sent_ok feature by the end of 2017. They have told in document for alternative to that insert the javascript inside the theme template file. do you know how to find the theme file and where to add the script.
    help me please..!

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top