Last Updated on July 24, 2018 by Neil Murray

Introduction

Explain how CF7 users can use on_sent_ok to implement some commonly requested extra features to CF7. Cover how this is done by adding JavaScript code. Very powerful but also can cause problems.

Before you begin

Learn basic JavaScript – Codecademy

List of on_sent_ok JavaScript Tools

Collect list of commonly requested things from CF7 Support Forum.

Redirect to new page

Reset form

Google Events Tracking

From CF7 Documentation

on_sent_ok: “alert(‘sent ok’);”
on_submit: “alert(‘submit’);”
If you set on_sent_ok: followed by a one-line JavaScript code, you can tell the contact form the code that should be performed when the mail is sent successfully. Likewise, with on_submit:, you can tell the code that should be performed when the form submitted regardless of the outcome.

on_sent_ok: “location = ‘http://example.com/’;”
The simplest way is using on_sent_ok JavaScript action hook. By using this hook, you can specify a JavaScript code that you wish to run after the form is successfully submitted. You will find the Additional Settings field at the bottom of the contact form management page. It is a JavaScript hook, so it needs JavaScript to work. You’ll need another hack if you need to redirect on non-JavaScript environments.

See http://contactform7.com/additional-settings/
See http://contactform7.com/redirecting-to-another-url-after-submissions/

Other

See http://kb.cf7skins.com/javascript-conflict-problems/#on_sent_ok

Notes
Using on_sent_ok can cause problems

I have gotten cautious about the use of on_sent_ok as it easily causes problems when not used appropriately. I am not sure about how I have used it.

While on_sent_ok can cause problems when not used appropriately, it makes sense to use it for simple redirection.

The main issue with on_sent_ok is that the parameter has to be suitable JavaScript code. Many of the issues occur when people with little of no JavaScript skills use copy-pasta solutions for complex JavaScript stuff like interacting with Google Analytics.

Debugging
Short example, form:
[select menu-23 “this” “other”]
[checkbox checkbox-357 “one” “two”]

At additional settings:
on_sent_ok: “console.log( jQuery( ‘select[name=\”menu-23\”]’ ).val() ); console.log( jQuery( ‘input[name=\”checkbox-357[]\”]:checked’ ).val() );”
After sending check your browser console.