JSFiddle - React, Tailwind, and code Playground

by lenny86

HTML

<form>
  <div class="input-group input-group-lg mb-3 p-2 bg-warning rounded">
    <input type="text" class="form-control" placeholder="My company name" aria-label="My company name" aria-describedby="basic-addon2" id="mycompany">
    <div class="input-group-append">
      <button class="btn btn-primary btn-lg" type="button" id="mybutton">Get started!</button>
    </div>
  </div>
</form>

<form>
  <div class="input-group input-group-lg mb-3 p-2 bg-warning rounded">
    <input type="text" class="form-control" placeholder="My company name" aria-label="My company name" aria-describedby="basic-addon2" id="mycompany">
    <div class="input-group-append">
      <button class="btn btn-primary btn-lg" type="button" id="mybutton">Get started!</button>
    </div>
  </div>
</form>

JavaScript

document.querySelectorAll('form') // loop each form
  .forEach(form => form.querySelector('#mybutton').addEventListener('click', (e) => { //add the vent to the corresponding form button
    const inputValue = form.querySelector('#mycompany').value
    window.open("https://airtable.com/myformidgoeshere?prefill_Company=" + encodeURIComponent(inputValue));
  }))