embed multi-step form

Here’s a simple way to embed a multi-step form.

Option 1: Plain HTML/CSS/JS

You can place this directly in your page:

<div id="multi-step-form">
  <form id="stepForm">
    <div class="step active" data-step="1">
      <h3>Step 1</h3>
      <input type="text" placeholder="First Name" required />
      <button type="button" onclick="nextStep()">Next</button>
    </div>

    <div class="step" data-step="2">
      <h3>Step 2</h3>
      <input type="email" placeholder="Email" required />
      <button type="button" onclick="prevStep()">Back</button>
      <button type="button" onclick="nextStep()">Next</button>
    </div>

    <div class="step" data-step="3">
      <h3>Step 3</h3>
      <textarea placeholder="Message"></textarea>
      <button type="button" onclick="prevStep()">Back</button>
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

<style>
  .step { display: none; }
  .step.active { display: block; }
</style>

<script>
  let currentStep = 1;

  function showStep(step) {
    document.querySelectorAll('.step').forEach(el => el.classList.remove('active'));
    document.querySelector(`.step[data-step="${step}"]`).classList.add('active');
    currentStep = step;
  }

  function nextStep() {
    if (currentStep < 3) showStep(currentStep + 1);
  }

  function prevStep() {
    if (currentStep > 1) showStep(currentStep - 1);
  }

  showStep(1);
</script>

Option 2: Embed in a website builder / CMS

If you’re using something like:

• WordPress: add a custom HTML block
• Webflow: use an Embed component
• Squarespace/Wix: use an HTML/code embed block

Option 3: Embed a hosted form

If you already have the form in a form tool (Typeform, Jotform, Tally, Google Forms, etc.), you can paste an iframe:

<iframe 
  src="https://example.com/your-form"
  width="100%" 
  height="800" 
  style="border:0;"
></iframe>

If you want, I can also give you:

1. a Bootstrap version,
2. a React component,
3. or a fully styled multi-step form you can paste into your site.