Popup trigger: form submission from Kadence forms

[omoustaouda]

Describe the feature request

PopupMaker is awesome already, and it could be even more : P

At the moment PopupMaker is not supporting forms created with Kadence (an open source collection of Gutenberg blocks).
When I add "form submitted" as trigger, the popup is not shown : /
I tried with ninja forms, and the popup is shown correctly.

I prefer Kadence, as it integrates in the Gutenberg editor, and it's open source.
The form block I tried is this: https://www.kadencewp.com/help-center/docs/kadence-blocks/form-block/ - it works well, but its submission event is not being caught by PopupMaker.

Use case

When a form (created with Kadence) is submitted, show a confirmation message in the popup, like this one:

Kadence forms look like this:

Example screenshots (if any)

See above.

Tech note

I'd be happy to contribute!

I'm willing to have a look and try to implement it. I'm familiar with PHP.
Would this be appreciated?
If yes, I'd just need some initial guidance, about where to look to start with.

Thank you!

[marklchaves]

Hey @omoustaouda ,

That's an excellent idea. Thank you!

In the meantime (as a workaround), you can use the JS snippet below to launch your popup. Just make sure you use a Kadence Advanced Form. That's because the "advanced" version fires a submission event kb-advanced-form-success. Otherwise, the code won't do anything.

/**
 * Add custom JavaScript scripts to the footer of your site theme.
 *
 * @since 1.0.0
 *
 * @return void
 */
function kadence_form_submission() { ?>
 	<script type="text/javascript">
		document.body.addEventListener('kb-advanced-form-success', function() {
			setTimeout(function() {
				PUM.open(661); // My Kadence success popup. Change the 661 ID to your popup's ID.
			}, 1500); // 1.5 second delay. Change this to what you want.
		});
 	</script>
<?php }
add_action( 'wp_footer', 'kadence_form_submission', 500 );

Here's the result.

References

https://www.kadencewp.com/help-center/docs/kadence-blocks/advanced-form-block/

https://wpblocks.dev/popup-trigger-after-form-submission-kadence/

---

Holler back if you run into any problems with that.

Cheers ☺️

[omoustaouda]

Hey @marklchaves, this looks really good! Thank you for taking the time to experiment with this solution, I'm grateful.

When I have a moment, I'll try it. 💫

[marklchaves]

Hey @marklchaves, this looks really good! Thank you for taking the time to experiment with this solution, I'm grateful.

When I have a moment, I'll try it. 💫

Awesome, @omoustaouda !

BTW, I added your use case to our official docs https://wppopupmaker.com/docs/creating-cookies/manually-set-a-cookie-on-form-submission/#code-sample-for-kadence

Cheers ☺️