Getting email input value from a Webflow form input and passing it to a Pardot form on pop-up (same page)

[adurante95 (Alyssa Durante)]

I’m currently so close to fixing my issue of passing a Webflow form input into a Pardot form input. I’m currently using a Webflow form email input, and then upon submission it opens up a modal with a Pardot form inside it.

First form input:

Second form input:

I’m looing to connect these two email inputs. Whatever the user puts into the first email form should be populated into the second pop-up email input.

I’m currently using this code:

$("#test").click(function(){
    var email = $("#Email-Footer-2").val();
    $("#<pardot-form-id>").val(email);
});

But the email keeps coming back as undefined or an empty string. Any and all help will be greatly appreciated!

---

https://tii-test-project-5dc351ad7efdbc2469bf5a.webflow.io/

[anthonysalamin]

Hi @adurante95,

I think there might be a syntax mistake $("#<pardot-form-id>") should read $("#pardot-form-id") but I’m not a jQuery expert.

However, if you’d like to write in vanilla JavaScript, you could write something like this:

document.addEventListener("DOMContentLoaded", () => {
  const first = document.getElementById("first"),
    second = document.getElementById("second"),
    button = document.getElementById("button");
  button.addEventListener("click", () => {
    second.value = first.value;
  });
});

here is a quick codepen for you.
Hope that helps

[adurante95 (Alyssa Durante)]

Hi, unfortunately it didn’t I think something is up with the Javascript within the actual Pardot form because it just does not want to populate

[anthonysalamin]

it seems you’re not referencing the second input correctly as you get a Uncaught TypeError: Cannot set property 'value' of null

shouldn’t the id be this one for the parot popup email input field ?

[adurante95 (Alyssa Durante)]

That’s not the proper form, the form I’m trying to access is this one:

[anthonysalamin]

I see. You might want to recreate a simplified version of that page with only the first form and the parrot one. It’ll be easier for us to debug

[adurante95 (Alyssa Durante)]

Here’s a new link that jus includes the forms
https://tii-test-project-5dc351ad7efdbc2469bf5a.webflow.io/testing

[anthonysalamin]

Ok, I’ve stripped out the entire code page to get only the two elements that matters: the webflow form and the pardot form. Unfortunately, it seems the pardot form is being generated via an iframe. To my knowledge, unless you can specify a custom attribute for the email within the iframe’s markup, there is no way to inject or customize the iframe’s generated form’s field after the page has loaded.

Here is the codepen, as you see the id you’re trying to target in the javascript doesn’t refer to any id within your iframe unfortunately.

EDIT:
You might want to look into a Zapier integration which would connect Webflow + Pardot.
Hope that helps.