Standard HTML Integration

The most universal way to add a form to any website on the internet.

The Iframe Method

If your website is built with plain HTML, or if you are using a basic website builder (like WordPress, Wix, or Squarespace), you can usually embed HTML code directly.

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>

  <h1>Contact Us</h1>
  <p>Please fill out the form below:</p>

  <!-- Paste this part into your website -->
  <iframe 
    src="https://yourformapp.com/embed/YOUR_FORM_ID" 
    width="100%" 
    height="600px" 
    style="border: none;"
  ></iframe>

</body>
</html>

Mobile Responsiveness

Notice how the width is set to 100%? This ensures that the form will automatically shrink or expand to fit perfectly on mobile phones, tablets, and desktop computers!

Using Vibe Code & Generated Form API URL

If you are creating custom HTML inputs using vibe code or native JavaScript, submit the HTML form directly to your generated Form API URL using the action attribute:

📌 Where to put the API URL in your <form> tag:

Action Attribute: Place your generated Form API URL inside action="YOUR_FORM_API_URL".
Method Attribute: Always set method="POST".
Input Names: Ensure every input has a name="..." attribute matching your field keys.

<!-- Direct URL inside <form> tag action attribute -->
<form action="https://yourformapp.com/api/v1/submit/YOUR_FORM_ID" method="POST">
  
  <!-- Form Fields with name attributes -->
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Full Name" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Email Address" required />

  <!-- Submit Button -->
  <button type="submit">Submit Form</button>

</form>

Option 2: JavaScript Fetch with API URL

If you want to prevent page reloads and handle dynamic vibe conditions, send a fetch POST request to the direct API URL:

<form id="myForm" onsubmit="submitVibeForm(event)">
  <input type="text" name="name" placeholder="Full Name" required />
  <input type="email" name="email" placeholder="Email Address" required />
  <button type="submit">Submit Form</button>
</form>

<script>
async function submitVibeForm(event) {
  event.preventDefault();
  
  // DIRECT API URL
  const API_URL = 'https://yourformapp.com/api/v1/submit/YOUR_FORM_ID';

  const formData = new FormData(event.target);
  const payload = Object.fromEntries(formData.entries());

  const response = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ answers: payload })
  });
  
  const result = await response.json();
  if (result.redirectUrl) {
    window.location.href = result.redirectUrl;
  } else {
    alert('Submitted successfully via Form API!');
  }
}
</script>