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.
