Form Examples

Ready-to-use HTML templates for common form types. Just replace the endpoint URL.

Contact Form

Standard contact form with name, email, and message fields.

<form action="https://forms.mathila.web.lk/api/f/YOUR_ID" method="POST">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="Your email" required>
  <input type="text" name="subject" placeholder="Subject">
  <textarea name="message" placeholder="Your message" required></textarea>
  <input type="text" name="_gotcha" style="display:none">
  <button type="submit">Send Message</button>
</form>

Newsletter Signup

Simple email subscription form for newsletters.

<form action="https://forms.mathila.web.lk/api/f/YOUR_ID" method="POST">
  <input type="email" name="email" placeholder="Enter your email" required>
  <input type="text" name="_gotcha" style="display:none">
  <button type="submit">Subscribe</button>
</form>

Feedback Form

Collect user feedback with rating and comments.

<form action="https://forms.mathila.web.lk/api/f/YOUR_ID" method="POST">
  <input type="email" name="email" placeholder="Your email">
  <select name="rating" required>
    <option value="">Select rating</option>
    <option value="5">★★★★★ Excellent</option>
    <option value="4">★★★★ Good</option>
    <option value="3">★★★ Average</option>
    <option value="2">★★ Poor</option>
    <option value="1">★ Terrible</option>
  </select>
  <textarea name="feedback" placeholder="Your feedback" required></textarea>
  <input type="text" name="_gotcha" style="display:none">
  <button type="submit">Submit Feedback</button>
</form>

Job Application

Collect job applications with personal details and experience.

<form action="https://forms.mathila.web.lk/api/f/YOUR_ID" method="POST">
  <input type="text" name="full_name" placeholder="Full name" required>
  <input type="email" name="email" placeholder="Email" required>
  <input type="tel" name="phone" placeholder="Phone number">
  <input type="text" name="position" placeholder="Position applying for" required>
  <input type="url" name="linkedin" placeholder="LinkedIn profile">
  <textarea name="experience" placeholder="Brief experience summary"></textarea>
  <textarea name="cover_letter" placeholder="Cover letter"></textarea>
  <input type="text" name="_gotcha" style="display:none">
  <button type="submit">Apply Now</button>
</form>

AJAX Submission

Submit forms without page reload using JavaScript fetch.

<form id="myForm">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  const res = await fetch('https://forms.mathila.web.lk/api/f/YOUR_ID', {
    method: 'POST',
    headers: { 'Accept': 'application/json' },
    body: formData
  });
  
  const data = await res.json();
  if (data.ok) alert('Thank you!');
});
</script>

Waitlist Form

Collect early access signups with optional referral source.

<form action="https://forms.mathila.web.lk/api/f/YOUR_ID" method="POST">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="Your email" required>
  <select name="source">
    <option value="">How did you hear about us?</option>
    <option value="twitter">Twitter</option>
    <option value="google">Google</option>
    <option value="friend">Friend</option>
    <option value="other">Other</option>
  </select>
  <input type="text" name="_gotcha" style="display:none">
  <button type="submit">Join Waitlist</button>
</form>