HTML Form Examples
Copy-paste HTML examples for common form types. All examples work with any website.
Contact Form
Basic contact form with name, email, subject, and message fields.
<!-- Simple Contact Form -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="message" rows="5" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>Newsletter Signup
Simple newsletter subscription with email validation and consent checkbox.
<!-- Newsletter Signup Form -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST">
<input type="hidden" name="form_type" value="newsletter">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="first_name">First Name (Optional)</label>
<input type="text" name="first_name" id="first_name">
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" name="marketing_consent" value="yes" required>
I agree to receive marketing emails and can unsubscribe at any time
</label>
</div>
<button type="submit">Subscribe to Newsletter</button>
</form>Event Registration
Event registration form with multiple field types and hidden metadata.
<!-- Event Registration Form -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST">
<input type="hidden" name="form_type" value="event_registration">
<input type="hidden" name="event_name" value="Tech Conference 2024">
<input type="hidden" name="event_date" value="2024-06-15">
<div class="form-group">
<label for="full_name">Full Name</label>
<input type="text" name="full_name" id="full_name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" name="phone" id="phone">
</div>
<div class="form-group">
<label for="company">Company</label>
<input type="text" name="company" id="company">
</div>
<div class="form-group">
<label for="job_title">Job Title</label>
<input type="text" name="job_title" id="job_title">
</div>
<div class="form-group">
<label for="ticket_type">Ticket Type</label>
<select name="ticket_type" id="ticket_type" required>
<option value="">Select ticket type</option>
<option value="general">General Admission - $99</option>
<option value="vip">VIP Access - $199</option>
<option value="student">Student Discount - $49</option>
</select>
</div>
<div class="form-group">
<label for="dietary_requirements">Dietary Requirements</label>
<textarea name="dietary_requirements" id="dietary_requirements" rows="3" placeholder="Any dietary restrictions or allergies?"></textarea>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" name="terms_agreed" value="yes" required>
I agree to the event terms and conditions
</label>
</div>
<button type="submit">Register for Event</button>
</form>Lead Generation
Lead capture form for marketing campaigns with custom tracking fields.
<!-- Lead Generation Form -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST">
<input type="hidden" name="form_type" value="lead_generation">
<input type="hidden" name="source" value="landing_page">
<input type="hidden" name="campaign" value="summer_2024">
<input type="hidden" name="page_url" id="page_url">
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" required>
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name" required>
</div>
<div class="form-group">
<label for="email">Work Email</label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-group">
<label for="company">Company Name</label>
<input type="text" name="company" id="company" required>
</div>
<div class="form-group">
<label for="company_size">Company Size</label>
<select name="company_size" id="company_size" required>
<option value="">Select company size</option>
<option value="1-10">1-10 employees</option>
<option value="11-50">11-50 employees</option>
<option value="51-200">51-200 employees</option>
<option value="201-1000">201-1000 employees</option>
<option value="1000+">1000+ employees</option>
</select>
</div>
<div class="form-group">
<label for="interest">What are you interested in?</label>
<select name="interest" id="interest" required>
<option value="">Select your interest</option>
<option value="product_demo">Product Demo</option>
<option value="pricing">Pricing Information</option>
<option value="implementation">Implementation Support</option>
<option value="partnership">Partnership Opportunities</option>
</select>
</div>
<button type="submit">Get Started</button>
<script>
// Auto-fill page URL
document.getElementById('page_url').value = window.location.href;
</script>
</form>Job Application
Job application form with text inputs and file upload capability.
<!-- Job Application Form -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST" enctype="multipart/form-data">
<input type="hidden" name="form_type" value="job_application">
<input type="hidden" name="position" value="Frontend Developer">
<input type="hidden" name="department" value="Engineering">
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" required>
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" name="phone" id="phone" required>
</div>
<div class="form-group">
<label for="linkedin">LinkedIn Profile (Optional)</label>
<input type="url" name="linkedin" id="linkedin" placeholder="https://linkedin.com/in/yourprofile">
</div>
<div class="form-group">
<label for="experience_years">Years of Experience</label>
<select name="experience_years" id="experience_years" required>
<option value="">Select experience level</option>
<option value="0-1">0-1 years</option>
<option value="2-4">2-4 years</option>
<option value="5-7">5-7 years</option>
<option value="8-10">8-10 years</option>
<option value="10+">10+ years</option>
</select>
</div>
<div class="form-group">
<label for="cover_letter">Why do you want to work with us?</label>
<textarea name="cover_letter" id="cover_letter" rows="6" required placeholder="Tell us about your motivation and what makes you a great fit for this role..."></textarea>
</div>
<div class="form-group">
<label for="resume">Resume/CV</label>
<input type="file" name="resume" id="resume" accept=".pdf,.doc,.docx" required>
<small>Accepted formats: PDF, DOC, DOCX (max 10MB)</small>
</div>
<div class="form-group">
<label for="portfolio">Portfolio/Work Samples (Optional)</label>
<input type="file" name="portfolio" id="portfolio" accept=".pdf,.zip,.jpg,.png" multiple>
<small>You can select multiple files</small>
</div>
<button type="submit">Submit Application</button>
</form>Support Request
Customer support form with priority levels and categorization.
<!-- Support Request Form -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST" enctype="multipart/form-data">
<input type="hidden" name="form_type" value="support_request">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-group">
<label for="account_id">Account ID (Optional)</label>
<input type="text" name="account_id" id="account_id" placeholder="Your account or customer ID">
</div>
<div class="form-group">
<label for="category">Issue Category</label>
<select name="category" id="category" required>
<option value="">Select category</option>
<option value="technical">Technical Issue</option>
<option value="billing">Billing Question</option>
<option value="feature">Feature Request</option>
<option value="account">Account Access</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="priority">Priority Level</label>
<select name="priority" id="priority" required>
<option value="">Select priority</option>
<option value="low">Low - General question</option>
<option value="medium">Medium - Issue affecting work</option>
<option value="high">High - System down or critical issue</option>
</select>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" required placeholder="Brief description of your issue">
</div>
<div class="form-group">
<label for="description">Detailed Description</label>
<textarea name="description" id="description" rows="6" required placeholder="Please describe your issue in detail. Include any error messages, steps to reproduce, etc."></textarea>
</div>
<div class="form-group">
<label for="attachments">Screenshots or Files (Optional)</label>
<input type="file" name="attachments" id="attachments" accept=".jpg,.png,.pdf,.txt,.zip" multiple>
<small>Attach screenshots, logs, or relevant files</small>
</div>
<button type="submit">Submit Support Request</button>
</form>