Manually Set a Cookie on Form Submission

What’s in This Guide #

This guide gives you example code for “manually” setting a cookie after you submit a form in a popup. Setting a cookie is the “standard” way to stop visitors from seeing the same popup over and over.

Some of the code samples also show how to do the following options:

1. Close the form popup: Automatically close a popup after you submit a form in case the popup Close on Form Submission setting doesn’t work.
2. Redirect to a confirmation page: Redirect to another page after submission if you want to redirect, but your form plugin does *not* have a confirmation redirect feature.

Examples of when to manually create a cookie #

You’ll need to “manually” set a cookie when:

• The Popup Maker Form Submission cookie setting doesn’t work (i.e., not yet directly supported).
• You use a confirmation redirect (redirect to a post/page or URL). 

Note: Confirmation redirects can bypass how Popup Maker normally sets cookies. If that happens to your popup, try using the example code (below) for your form plugin.

Supported forms #

We’ll cover only the forms we know that support after-submission actions (actions after you hit submit). At the time of writing, these are the forms we can “manually” set a cookie:

• Contact Form 7 (CF7)
• Gravity Forms
• Mailchimp for WordPress (MC4WP)
• WPForms
• AWeber
• Kadence Advanced Form Block

Popup Cookie Settings #

For each code snippet below, make sure you define a “manual” cookie in your form popup. Here’s an example.

Using the screen capture above as an example, change the cookie name pum-123 to match your popup’s ID number. So, if your popup’s ID number is 456, the manual cookie name must be pum-456.

Contact Form 7 (CF7) #

Here’s the scenario for CF7.

1. You display a popup that has a CF7 form inside.
2. After you successfully submit the form, the popup sets a cookie so it doesn’t display over and over, and it hides the form fields so you can see the success message better.
3. After a 1-second delay (customizable), you are redirected to another page.

Code Sample for CF7 #

The CF7 code example below sets a cookie and redirects your visitors after they submit your CF7 form in a popup. It uses the wpcf7mailsent event from CF7.

Since we’re using JavaScript (JS) here, we need to use PHP to “hook into” WordPress the JS that calls the Popup Maker JavaScript application programming interface (JS API). That API closes and opens popups and sets the cookie defined in your CF7 form popup.

Learn how to add a cookie to a popup trigger in our Add a Popup Trigger guide.

Change the following:

• Redirect URL
• The cookie expiration
• Popup ID 123

/** 
 * Contact Form 7: Add this action with priority 500
 */
add_action( 'wp_footer', function () { 
?>
  <script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
	   const myRedirectPath = "/my-redirect-page/"; // Change to yours.
		
	  // Let's hide the form since someone just submitted it. That way you can
	  // see the confirmation message easier.
          document.querySelectorAll("form.wpcf7-form > :not(.wpcf7-response-output)").forEach(el => {
            el.style.display = 'none';
          });
		
	  // Set whatever cookie is defined in the popup.
	  PUM.setCookie(123); //, {expires: "+1 day", path: "/"}); // Change to your popup ID and (optionally) the expiration time.

	  // Redirect on submission
          setTimeout( () => {
            location = myRedirectPath;
          }, 3000 ); // Wait for 3 seconds to redirect so people can read the success message first.
    }, false ); // addEventListener()
	  
    // Listen for click events on the submit button.
    let clickOpenSel = document.querySelector(".click-open-demo");
    if ( clickOpenSel ) {
                const myRedirectPath = "/my-redirect-page/"; // Change to yours.
		clickOpenSel.addEventListener("click", function (e) {
			if ( document.cookie.indexOf('pum-123=') === -1 ) return; // Change to your cookie name.
	  		// If cookie exists, they already submitted the form, 
                        // so redirect right away.
      		        setTimeout( () => {
          	          location = myRedirectPath;
      		        }, 1000 ); // Wait for 1 second to redirect. No need to wait long here.
		}); // addEventListener() 
    } // if
  </script>
<?php
}, 500 );

Gravity Forms #

The code example for Gravity Forms below uses only PHP to create a cookie. That’s because we need to use the Gravity Forms gform_after_submission hook to know when to set the cookie.

You control the form submission confirmation using the Gravity Forms form settings.

Code Sample for Gravity Forms #

The snippet calls the PHP  setcookie function. Change the cookie name to yours. Customize the expiration time to what you need.

/**
 * Call the gform_after_submission hook to do something
 * after a someone submits Gravity Forms form.
 * 
 * In this example, we'll set a cookie.
 */
function set_popup_cookie_on_gf_submission( $entry, $form ) { 
	$gf_id = rgar( $form, 'id' );

       // form #5.
       //if ( absint( $gf_id ) !== 5 ) {
       //    return;
       //}

      setcookie('pum-123', 'true', time() + (60), '/'); // Change to your cookie name and expiration time. E.g. 86400 seconds = 1 day
}
add_action( 'gform_after_submission', 'set_popup_cookie_on_gf_submission', 500, 2 );

Mailchimp for WordPress (MC4WP) #

Below, the MC4WP code example uses only PHP to create a cookie. That’s because we need to use the mc4wp_form_subscribed hook.

You control the form submission confirmation using the MC4WP form settings.

Code Sample for MC4WP #

The snippet calls the PHP  setcookie function. Change the cookie name to yours. Customize the expiration time to what you need.

/** MC4WP */
function mc4wp_form_setcookie( $form, $subscriber_email_address, $data, $map ) {
      setcookie('pum-123', 'true', time() + (60), '/'); // Change to your cookie name and expiration time. E.g. 86400 seconds = 1 day
}
add_action( 'mc4wp_form_subscribed', 'mc4wp_form_setcookie', 500, 4 );

WPForms #

The code example for WPForms below uses only PHP to create a cookie. That’s because we need to use the wpforms_process_complete hook from WPForms.

You control the form submission confirmation using the WPForms form settings.

Code Sample for WPForms #

The snippet calls the PHP  setcookie function. Change the cookie name to yours. Customize the expiration time to what you need.

function wpf_dev_process_complete( $fields, $entry, $form_data, $entry_id ) {
	$wpforms_id = $form_data[ 'id' ];
	
       // Optionally, you can check for a specific form. Below, we set a cookie for only
       // form #5.
       //if ( absint( $wpforms_id ) !== 5 ) {
       //    return;
       //}

       setcookie('pum-123', 'true', time() + (60), '/'); // Change to your cookie name and expiration time. E.g. 86400 seconds = 1 day
}
add_action( 'wpforms_process_complete', 'wpf_dev_process_complete', 500, 4 );

AWeber #

For this AWeber scenario, you have an AWeber sign-up form in a popup. After you successfully submit it, the popup sets a cookie so it doesn’t display again, and then the popup automatically closes after 1.5 seconds.

Code Sample for AWeber #

The custom PHP and JavaScript/jQuery code below sets the Manual cookie defined in popup 123. After the code sets the cookie, you have 2 options:

1. Redirect to a custom success page.
2. Stay on the page and automatically close the popup.

Change 123 to your popup’s ID, then uncomment or comment the redirect or close popup code to what you need.

add_action( 'wp_footer', function() {
?>
<script>
	jQuery(document).ready(function ($) {

		// Listen for the Popup Maker event that signals a successful form submission.
		$(document).on('pumNewsletterSuccess', function () {
			// Manually set the cookie that's defined in popup 123.
        	        PUM.setCookie(123); // Change 123 to your popup's ID.
        
			// Redirect to a custom success page if you want.
        	       const redirectURL = "https://wildebeest-take.instawp.xyz/my-redirect-page/";
        
			// Either redirect OR stay on the page and close the popup after a delay.
        	        setTimeout(function() {
            	          //window.location.href = redirectURL; // Uncomment this line if you want to redirect.
            	          PUM.close(123); // Close the popup. Change 123 to your ID.
        	        }, 1500); // 1.5 second delay. Change this to what you want.
		}); // listener
		
	}); // jQuery
</script>
<?php
} );

Visit our AWeber Integration help guide to learn more about Popup Maker’s integration with AWeber.

Kadence Advanced Form Block #

Here’s the Kadence scenario.

1. You have a Kadence Advanced Form Block in a popup.
2. After you (successfully) submit that form in the popup, a cookie gets set to stop your form popup from displaying over and over after submission.
3. After a 1.5-second delay (customizable), the form popup closes, and a “success” popup opens.

Code Sample for Kadence #

Make sure you’re using a Kadence Advanced Form Block because the “advanced” form version provides the kb-advanced-form-success JS event. Otherwise, the code below does nothing.

The custom PHP and JavaScript/jQuery code sample below sets the Manual cookie defined in your form popup (e.g., popup 123). We need to use PHP to “hook into” WordPress the JS that calls the Popup Maker JavaScript application programming interface (JS API). That API is what closes and opens popups and sets popup cookies.

After you submit your Kadence form, the code sets that cookie, and then you have 2 options:

1. Redirect to a custom success page.
2. Stay on the page and automatically close the popup (the default scenario).

Change 123 to your popup’s ID, then uncomment or comment the redirect or close popup code to what you need.

/**
 * Add custom JavaScript scripts to the footer of your site theme.
 */
function kadence_form_submission() { ?>
 	<script type="text/javascript">

                // Listen for the Kadence Advanced Form success event.
		document.body.addEventListener('kb-advanced-form-success', function() {
                        // "Manually" set your form popup's cookie to stop the popup from displaying again.
        	        PUM.setCookie(123); // Change 123 to your popup's ID.

                        //const redirectURL = "/my-redirect-page/"; // Uncomment and change to your URL if you wan to redirect.

			setTimeout(function() {
                                //window.location.href = redirectURL; // Uncomment this line if you want to redirect.
            	                PUM.close(123); // Close the form popup. Change 123 to your form popup's ID.
				PUM.open(123); // Open your Kadence success popup. Change the 123 ID to your success popup's ID.
			}, 1500); // 1.5 second delay. Change this to what you want.
		}); // listener
 	</script>
<?php }
add_action( 'wp_footer', 'kadence_form_submission', 500 );

Are we missing your favorite form plugin? #

If we are missing your favorite form plugin, please let us know!