Populating Embedded Form Fields from URL Parameters

I’ve set up an embedded form on my site and want to pre-populate the name/email from URL parameters.

I’ve set up the following script to update the fields:

window.addEventListener('klaviyoForms', function(e) {
	if (e.detail.type === 'embedOpen') {
		const urlParams = new URLSearchParams(window.location.search);

		const nameValue = urlParams.get('name');
		if (nameValue) {
			const nameField = document.querySelector('[id^="Full_Name_"]');
			nameField.value = nameValue;	
		}		

		const emailValue = urlParams.get('email');
		if (emailValue ) {
			const emailField = document.querySelector('[id^="email_"]');
			emailField.value = emailValue;				
		}
	}
});

If I add console.log statements, I can see the fields being selected properly and the values being set. However, when I load the page, the form is still blank.

Does Klaviyo prevent forms from being manipulated in this way? If so, is there a “right way” to pre-populate form fields on a page?