Send a query parameter to a form inside a Popup Maker popup

html-source-example-click-open-link.html

<!-- 
  Use a "button" to launch the popup that has the form.

  Note that in this example, the popup trigger classes (popmake-nnnn and pum-trigger) are on the wrapping div tag. 
  That's because the Block editor adds custom classes to wrapper elements not the actual element.

  If you can/want to edit the HTML, you can add the default click trigger class (popmake-nnnn) directly to the link (a tag).
  e.g. <a class="wp-block-button__link popmake-1689" href="https://yourcool.site/">Cool Site</a>

  Popup Maker will see that popmake-nnn class and add the pum-trigger class to the link to launch the popup on a click.

  Wherever you decide to put the trigger classes, you'll need to adjust line 13 of the jQuery code below.

  Learn more about click triggers here.
  - https://wppopupmaker.com/docs/getting-started/a-beginners-guide-to-popup-triggers/#click-open
  - https://youtu.be/w5Ez5vWgaKU?si=MQDDMYnFOFpbE_JP
-->
<div
  class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-large-font-size popmake-1689 pum-trigger"
  style="cursor: pointer"
>
  <a
    class="wp-block-button__link"
    href="https://twenty-twentyone.local/contact-form-7-hidden-fields-test/?workshop=Make-up%20Workshop&amp;wochentag=Sa&amp;datum=020722&amp;zeit=11:00%20Uhr"
    >Register Now</a
  >
</div>

send_fields_to_a_form.php

<?php // Ignore this first line when copying to your child theme's functions.php file.
/**
 * Based on https://youtu.be/zml-xz78o2Q
 */
function send_fields_to_a_form() { ?>
 	<script type="text/javascript">
		jQuery(document).ready(function ($) {
			
    			const popupID = 1689, // Change to your popup ID.
        			fieldSelector = '#workshop-name'; // Change to your form field selector.

    			$(document).on('pumBeforeOpen', '#pum-'+popupID, function () {
      				const trigger = $.fn.popmake.last_open_trigger[0].firstChild, // Grab the popup trigger. Tweak as needed depending on where you place your trigger.
          				field = $(fieldSelector); // Prepare the destination field.
					// Add more fields as needed.
					// e.g. field2 = $(fieldSelector2);
			
				// If the trigger has a link, continue.
      				if (trigger && "" !== trigger.href) {
					const url = new URL(trigger.href); // Grab the link.
					const searchParams = new URLSearchParams(url.search); // Grab the query parameters.
        				field.val(searchParams.get('workshop')); // Set the destination field the workshop query parameter.
					field.attr('readonly', true); // Set the field to read only for display purposes.
					// Grab more query parameters as needed using the get() function like above.
					// e.g. searchParams.get('wochentag');
      				} // if
    			}); // listener
			
    		}); // jQuery
 	</script>
<?php }
add_action( 'wp_footer', 'send_fields_to_a_form', 500 ); // Load the script in the footer with a "late" priority.
/**
 * You can add the PHP code snippet to your child theme's functions.php file
 * or with third-party plugins such as My Custom Functions and Code Snippets.
 *
 * Learn more:
 * - https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-js/
 * - https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-php/
 */

Screen Captures