Skip to main content

​
Reactive Form

Use Angular’s reactive forms with Spike:
contact.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html'
})
export class ContactComponent {
  contactForm: FormGroup;
  status: 'idle' | 'loading' | 'success' | 'error' = 'idle';

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.contactForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      message: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.contactForm.invalid) return;
    
    this.status = 'loading';
    const formData = new FormData();
    
    Object.keys(this.contactForm.value).forEach(key => {
      formData.append(key, this.contactForm.value[key]);
    });

    this.http.post('https://spike.ac/api/f/YOUR_FORM_SLUG', formData)
      .subscribe({
        next: () => {
          this.status = 'success';
          this.contactForm.reset();
        },
        error: () => {
          this.status = 'error';
        }
      });
  }
}

​
Template

contact.component.html
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name</label>
    <input id="name" formControlName="name" />
  </div>
  
  <div>
    <label for="email">Email</label>
    <input id="email" type="email" formControlName="email" />
  </div>
  
  <div>
    <label for="message">Message</label>
    <textarea id="message" formControlName="message"></textarea>
  </div>
  
  <button type="submit" [disabled]="status === 'loading'">
    {{ status === 'loading' ? 'Sending...' : 'Send' }}
  </button>
  
  <p *ngIf="status === 'success'">Thanks for your message!</p>
  <p *ngIf="status === 'error'">Something went wrong. Please try again.</p>
</form>

​
Simple HTML Form

Or use a simple HTML form without reactive forms: 
<form action="https://spike.ac/api/f/YOUR_FORM_SLUG" method="POST">
  <input type="hidden" name="_next" value="https://yoursite.com/thanks" />
  <input type="text" name="_gotcha" style="display:none" />
  
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  
  <button type="submit">Send</button>
</form>