Wonky Submit & Print-Pro-Matic Button

This is a Dr. Frankenstein experiment with Contact Form 7’s Submit button and the Print-Pro-Matic Print external trigger. When the user clicks submit, the form should also force-launch the print dialogue. Years of working in UI tells us NOT do this, but people still have music playing on page load, so what do we know.

[[contact-form-7 id="1018" title="SubPrint"/]]

To cross-breed the Submit button with the print-pro-matic print trigger, just follow the following steps.

1. In the form: add a cf7 submit/print button, and assign it a unique ID (in this case subprint) and a class of printme_trigger like so:

[submit id:subprint class:printme_trigger]

1. In the post that the form shortcode is displayed on: simply target the form to be printed and assign the external_trigger attribute the id of the external print/submit button:

[print-me target="#wpcf7-f1018-p2316-o1i" external_trigger="subprint"/]

Update: Submit & Print With Validation

The above will work nicely if there is no validation to consider. However if we only want to print the form after it has passes validation we need another approach.

First: We will not actually have the print triggered via clicking the submit button, so we can remove the id and class in the submit tag in the form:

[submit]

If the submit button does not trigger the print what will? If you notice in the Contact Form 7 edit page, there is an Additional Settings tab. Here we can use Contact 7 own on_sent_ok: to trigger the print like so:

on_sent_ok: "print_trigger('my_print_trigger');"

Now, finally, we must provide an ID to our hidden print-me shortcode:

[print-me id="my_print_trigger" target="#wpcf7-f1018-p2316-o1" external_trigger="on_sent_ok"/]

Demo

deactivated due to spam abuse.
[[contact-form-7 id=”1018″ title=”SubPrint”/]]