How do I take form submission data on Webflow and pass that to a hidden field in a Typeform popover embed?

If you were to embed your form on a different page, your approach will work.

For example you can place your form on /landing-page with a redirect to a different page:

<form action="/recruitment-form" method="GET">
  <input type="text" id="jobtitle" name="jobtitle" placeholder="Enter your job title here">
  <button type="submit">continue</button>
</form>

Submitting the form will take you to URL like this: /recruitment-form?jobtitle=engineer

Then, on the /recruitment-form page you can display the form:

<button 
  data-tf-popup="iKrAInr4" 
  data-tf-opacity="100"
  data-tf-size="100"
  data-tf-iframe-props="title=CB - Sales (hidden fields)"
  data-tf-transitive-search-params="jobtitle"
  data-tf-medium="snippet"
  data-tf-hidden="jobtitle=xxxxx" 
  style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#0445AF;color:#fff;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;"
>Start recruiting</button>
<script src="//embed.typeform.com/next/embed.js"></script>

You can add data-tf-open=”load” to your button to open it automatically on page load.

Alternatively you could build this in a single page using Typeform Embed SDK and some JavaScript code:

<input type="text" id="job-title-input" placeholder="Enter your job title here" />

<button id="my-typeform-button" style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#0445AF;color:#fff;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Start recruiting</button>

<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script src="//embed.typeform.com/next/embed.js"></script>

<script>
  document.querySelector('#my-typeform-button').onclick = () => {
    window.tf.createPopup('iKrAInr4', {
      size: 100,
      hidden: {
        jobtitle: document.querySelector('#job-title-input').value
      }
    }).open()
  }
</script>