Angular Integration

Embed your form into any Angular application smoothly.

Using Iframe in Angular

Angular handles HTML natively within its components. You can drop the iframe code straight into your component's HTML template file.

<!-- contact.component.html -->
<div class="contact-form-wrapper">
  <h2>Reach out to us</h2>
  <iframe 
    src="https://yourformapp.com/embed/YOUR_FORM_ID" 
    width="100%" 
    height="600px" 
    style="border: none;"
  ></iframe>
</div>

Sanitization Note

If you are generating the iframe URL dynamically from a variable in your TypeScript file, make sure to use Angular's DomSanitizer to bypass security trust for the URL, otherwise Angular might block the iframe from loading!

Using Vibe Code & Generated Form API URL

If you are building custom form controls in Angular using vibe code, you can either place your Form API URL directly into your HTML template's action attribute or send data via Angular's HttpClient:

Option A: Direct <form action="..." method="POST"> in Template

Paste your Form API URL into your Angular HTML template's action attribute:

<form action="https://yourformapp.com/api/v1/submit/YOUR_FORM_ID" method="POST"> <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>

Option B: Angular HttpClient POST Submission

// contact.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html'
})
export class ContactComponent {
  formData = { name: '', email: '' };
  formApiUrl = 'https://yourformapp.com/api/v1/submit/YOUR_FORM_ID';

  constructor(private http: HttpClient) {}

  onSubmit() {
    // Post to generated Form API URL
    this.http.post(this.formApiUrl, { answers: this.formData }).subscribe({
      next: (res: any) => {
        if (res.redirectUrl) {
          window.location.href = res.redirectUrl;
        } else {
          alert('Submitted successfully via Form API!');
        }
      }
    });
  }
}