If you have multiple instances of the same signup form on a single page of your website, you need to make sure that variables get assigned to the correct inputs.

Flowrite's home page, for example, has three instances of the same signup form since we are wrapping them in Symbols on Webflow. Our solution is to just assign the referralUrl and siteUrl to each of the instances. It's probably not the most efficient way of achieving the same outcome but does the job for us.

const referralCode = Math.random().toString(36).substring(2, 8)
const referralUrl = '<https://www.flowrite.com/?ref=>' + referralCode
const siteUrl = window.location.href

document.querySelectorAll('.referralUrl').forEach(function(element) {
	element.value=referralUrl;
});

document.querySelectorAll('.siteUrl').forEach(function(element) {
	element.value=siteUrl;
});

You also need to take this into account when triggering the form submission. We solved this by going through all of the email forms and finding the non-empty value.

const referralCode = Math.random().toString(36).substring(2, 8)
const referralUrl = '<https://www.flowrite.com/?ref=>' + referralCode
const siteUrl = window.location.href

document.querySelectorAll('.referralUrl').forEach(function(element) {
	element.value=referralUrl;
});

document.querySelectorAll('.siteUrl').forEach(function(element) {
	element.value=siteUrl;
});

$('#waitlist-form, #waitlist-form-footer, #waitlist-form-popup').submit(() => {	
  document.querySelectorAll('.email').forEach(function(element) {
    if(element.value!="") {
      email = element.value;
    };
  });
  $('.typeform-share').attr('href', '<https://form.typeform.com/to/c74dZXPe?typeform-medium=embed-snippet#email=>' + email + '&code=' + referralCode);
  $('.typeform-share').click();
});