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>