Progressive Form Examples
Multi-step forms, wizards, and conditional forms that adapt to user input.
Multi-Step Registration Wizard
Step-by-step registration form with progress indicator and validation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Step Registration</title>
<style>
.wizard-container {
max-width: 600px;
margin: 2rem auto;
padding: 2rem;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.progress-bar {
display: flex;
margin-bottom: 2rem;
}
.progress-step {
flex: 1;
text-align: center;
padding: 0.5rem;
background: #f3f4f6;
border-right: 1px solid #e5e7eb;
position: relative;
}
.progress-step:last-child {
border-right: none;
}
.progress-step.active {
background: #3b82f6;
color: white;
}
.progress-step.completed {
background: #10b981;
color: white;
}
.form-step {
display: none;
}
.form-step.active {
display: block;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 4px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.error {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
}
.button-group {
display: flex;
justify-content: space-between;
margin-top: 2rem;
}
.btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
.btn-primary {
background: #3b82f6;
color: white;
}
.btn-secondary {
background: #6b7280;
color: white;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.checkbox-group input {
width: auto;
margin-right: 0.5rem;
}
</style>
</head>
<body>
<div class="wizard-container">
<h2>Account Registration</h2>
<!-- Progress Bar -->
<div class="progress-bar">
<div class="progress-step active" id="step-1-progress">
<span>1. Personal Info</span>
</div>
<div class="progress-step" id="step-2-progress">
<span>2. Account Details</span>
</div>
<div class="progress-step" id="step-3-progress">
<span>3. Preferences</span>
</div>
<div class="progress-step" id="step-4-progress">
<span>4. Review</span>
</div>
</div>
<form id="registrationForm" action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST">
<input type="hidden" name="form_type" value="registration_wizard">
<!-- Step 1: Personal Information -->
<div class="form-step active" id="step-1">
<h3>Personal Information</h3>
<div class="form-group">
<label for="first_name">First Name *</label>
<input type="text" name="first_name" id="first_name" required>
<div class="error" id="first_name_error"></div>
</div>
<div class="form-group">
<label for="last_name">Last Name *</label>
<input type="text" name="last_name" id="last_name" required>
<div class="error" id="last_name_error"></div>
</div>
<div class="form-group">
<label for="birth_date">Date of Birth *</label>
<input type="date" name="birth_date" id="birth_date" required>
<div class="error" id="birth_date_error"></div>
</div>
<div class="form-group">
<label for="phone">Phone Number *</label>
<input type="tel" name="phone" id="phone" required>
<div class="error" id="phone_error"></div>
</div>
</div>
<!-- Step 2: Account Details -->
<div class="form-step" id="step-2">
<h3>Account Details</h3>
<div class="form-group">
<label for="email">Email Address *</label>
<input type="email" name="email" id="email" required>
<div class="error" id="email_error"></div>
</div>
<div class="form-group">
<label for="username">Username *</label>
<input type="text" name="username" id="username" required minlength="3">
<div class="error" id="username_error"></div>
</div>
<div class="form-group">
<label for="password">Password *</label>
<input type="password" name="password" id="password" required minlength="8">
<div class="error" id="password_error"></div>
</div>
<div class="form-group">
<label for="password_confirm">Confirm Password *</label>
<input type="password" id="password_confirm" required>
<div class="error" id="password_confirm_error"></div>
</div>
</div>
<!-- Step 3: Preferences -->
<div class="form-step" id="step-3">
<h3>Preferences & Settings</h3>
<div class="form-group">
<label for="account_type">Account Type *</label>
<select name="account_type" id="account_type" required onchange="toggleBusinessFields()">
<option value="">Select account type</option>
<option value="personal">Personal</option>
<option value="business">Business</option>
<option value="organization">Organization</option>
</select>
</div>
<!-- Business fields (shown conditionally) -->
<div id="business_fields" style="display: none;">
<div class="form-group">
<label for="company_name">Company Name</label>
<input type="text" name="company_name" id="company_name">
</div>
<div class="form-group">
<label for="company_size">Company Size</label>
<select name="company_size" id="company_size">
<option value="">Select 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="200+">200+ employees</option>
</select>
</div>
</div>
<div class="form-group">
<label for="interests">Areas of Interest</label>
<div class="checkbox-group">
<input type="checkbox" name="interests" value="technology" id="tech">
<label for="tech">Technology</label>
</div>
<div class="checkbox-group">
<input type="checkbox" name="interests" value="marketing" id="marketing">
<label for="marketing">Marketing</label>
</div>
<div class="checkbox-group">
<input type="checkbox" name="interests" value="finance" id="finance">
<label for="finance">Finance</label>
</div>
<div class="checkbox-group">
<input type="checkbox" name="interests" value="education" id="education">
<label for="education">Education</label>
</div>
</div>
<div class="form-group">
<div class="checkbox-group">
<input type="checkbox" name="newsletter" value="yes" id="newsletter">
<label for="newsletter">Subscribe to our newsletter</label>
</div>
</div>
<div class="form-group">
<div class="checkbox-group">
<input type="checkbox" name="sms_notifications" value="yes" id="sms">
<label for="sms">Receive SMS notifications</label>
</div>
</div>
</div>
<!-- Step 4: Review -->
<div class="form-step" id="step-4">
<h3>Review Your Information</h3>
<div id="review_content">
<!-- Review content will be populated by JavaScript -->
</div>
<div class="form-group">
<div class="checkbox-group">
<input type="checkbox" name="terms_accepted" value="yes" required id="terms">
<label for="terms">I agree to the Terms of Service and Privacy Policy *</label>
</div>
<div class="error" id="terms_error"></div>
</div>
</div>
<!-- Navigation Buttons -->
<div class="button-group">
<button type="button" class="btn btn-secondary" id="prevBtn" onclick="changeStep(-1)" style="display: none;">
Previous
</button>
<button type="button" class="btn btn-primary" id="nextBtn" onclick="changeStep(1)">
Next
</button>
<button type="submit" class="btn btn-primary" id="submitBtn" style="display: none;">
Create Account
</button>
</div>
</form>
</div>
<script>
let currentStep = 1;
const totalSteps = 4;
function showStep(step) {
// Hide all steps
for (let i = 1; i <= totalSteps; i++) {
document.getElementById(`step-${i}`).classList.remove('active');
document.getElementById(`step-${i}-progress`).classList.remove('active', 'completed');
}
// Show current step
document.getElementById(`step-${step}`).classList.add('active');
document.getElementById(`step-${step}-progress`).classList.add('active');
// Mark completed steps
for (let i = 1; i < step; i++) {
document.getElementById(`step-${i}-progress`).classList.add('completed');
}
// Update buttons
document.getElementById('prevBtn').style.display = step === 1 ? 'none' : 'inline-block';
document.getElementById('nextBtn').style.display = step === totalSteps ? 'none' : 'inline-block';
document.getElementById('submitBtn').style.display = step === totalSteps ? 'inline-block' : 'none';
}
function validateStep(step) {
let isValid = true;
const errors = document.querySelectorAll('.error');
errors.forEach(error => error.textContent = '');
if (step === 1) {
// Validate personal information
const firstName = document.getElementById('first_name').value.trim();
const lastName = document.getElementById('last_name').value.trim();
const birthDate = document.getElementById('birth_date').value;
const phone = document.getElementById('phone').value.trim();
if (!firstName) {
document.getElementById('first_name_error').textContent = 'First name is required';
isValid = false;
}
if (!lastName) {
document.getElementById('last_name_error').textContent = 'Last name is required';
isValid = false;
}
if (!birthDate) {
document.getElementById('birth_date_error').textContent = 'Date of birth is required';
isValid = false;
}
if (!phone) {
document.getElementById('phone_error').textContent = 'Phone number is required';
isValid = false;
}
}
if (step === 2) {
// Validate account details
const email = document.getElementById('email').value.trim();
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
const passwordConfirm = document.getElementById('password_confirm').value;
if (!email) {
document.getElementById('email_error').textContent = 'Email is required';
isValid = false;
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
document.getElementById('email_error').textContent = 'Please enter a valid email';
isValid = false;
}
if (!username) {
document.getElementById('username_error').textContent = 'Username is required';
isValid = false;
} else if (username.length < 3) {
document.getElementById('username_error').textContent = 'Username must be at least 3 characters';
isValid = false;
}
if (!password) {
document.getElementById('password_error').textContent = 'Password is required';
isValid = false;
} else if (password.length < 8) {
document.getElementById('password_error').textContent = 'Password must be at least 8 characters';
isValid = false;
}
if (password !== passwordConfirm) {
document.getElementById('password_confirm_error').textContent = 'Passwords do not match';
isValid = false;
}
}
if (step === 3) {
// Validate preferences
const accountType = document.getElementById('account_type').value;
if (!accountType) {
isValid = false;
alert('Please select an account type');
}
}
return isValid;
}
function changeStep(direction) {
if (direction === 1 && !validateStep(currentStep)) {
return;
}
if (direction === 1 && currentStep === 3) {
// Populate review before going to step 4
populateReview();
}
currentStep += direction;
if (currentStep < 1) currentStep = 1;
if (currentStep > totalSteps) currentStep = totalSteps;
showStep(currentStep);
}
function toggleBusinessFields() {
const accountType = document.getElementById('account_type').value;
const businessFields = document.getElementById('business_fields');
if (accountType === 'business' || accountType === 'organization') {
businessFields.style.display = 'block';
document.getElementById('company_name').required = true;
} else {
businessFields.style.display = 'none';
document.getElementById('company_name').required = false;
}
}
function populateReview() {
const formData = new FormData(document.getElementById('registrationForm'));
let reviewHtml = '<div style="background: #f9fafb; padding: 1rem; border-radius: 4px;">';
reviewHtml += '<h4>Personal Information</h4>';
reviewHtml += `<p><strong>Name:</strong> ${formData.get('first_name')} ${formData.get('last_name')}</p>`;
reviewHtml += `<p><strong>Email:</strong> ${formData.get('email')}</p>`;
reviewHtml += `<p><strong>Phone:</strong> ${formData.get('phone')}</p>`;
reviewHtml += `<p><strong>Birth Date:</strong> ${formData.get('birth_date')}</p>`;
reviewHtml += '<h4>Account Details</h4>';
reviewHtml += `<p><strong>Username:</strong> ${formData.get('username')}</p>`;
reviewHtml += `<p><strong>Account Type:</strong> ${formData.get('account_type')}</p>`;
if (formData.get('company_name')) {
reviewHtml += `<p><strong>Company:</strong> ${formData.get('company_name')}</p>`;
}
const interests = formData.getAll('interests');
if (interests.length > 0) {
reviewHtml += `<p><strong>Interests:</strong> ${interests.join(', ')}</p>`;
}
reviewHtml += '</div>';
document.getElementById('review_content').innerHTML = reviewHtml;
}
// Initialize
showStep(1);
</script>
</body>
</html>React Multi-Step Form
Advanced multi-step form component with React hooks and context.
import React, { createContext, useContext, useState } from 'react';
// Form Context
const FormContext = createContext();
const useFormContext = () => {
const context = useContext(FormContext);
if (!context) {
throw new Error('useFormContext must be used within FormProvider');
}
return context;
};
// Form Provider
const FormProvider = ({ children }) => {
const [currentStep, setCurrentStep] = useState(1);
const [formData, setFormData] = useState({
// Personal Info
firstName: '',
lastName: '',
email: '',
phone: '',
// Company Info
companyName: '',
jobTitle: '',
companySize: '',
industry: '',
// Project Info
projectType: '',
budget: '',
timeline: '',
description: '',
// Additional
hearAboutUs: '',
newsletter: false
});
const [errors, setErrors] = useState({});
const updateFormData = (field, value) => {
setFormData(prev => ({
...prev,
[field]: value
}));
// Clear error when user starts typing
if (errors[field]) {
setErrors(prev => ({
...prev,
[field]: ''
}));
}
};
const validateStep = (step) => {
const newErrors = {};
switch (step) {
case 1: // Personal Info
if (!formData.firstName) newErrors.firstName = 'First name is required';
if (!formData.lastName) newErrors.lastName = 'Last name is required';
if (!formData.email) newErrors.email = 'Email is required';
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
newErrors.email = 'Please enter a valid email';
}
if (!formData.phone) newErrors.phone = 'Phone number is required';
break;
case 2: // Company Info
if (!formData.companyName) newErrors.companyName = 'Company name is required';
if (!formData.jobTitle) newErrors.jobTitle = 'Job title is required';
if (!formData.companySize) newErrors.companySize = 'Please select company size';
if (!formData.industry) newErrors.industry = 'Please select industry';
break;
case 3: // Project Info
if (!formData.projectType) newErrors.projectType = 'Please select project type';
if (!formData.budget) newErrors.budget = 'Please select budget range';
if (!formData.timeline) newErrors.timeline = 'Please select timeline';
if (!formData.description) newErrors.description = 'Project description is required';
break;
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const nextStep = () => {
if (validateStep(currentStep)) {
setCurrentStep(prev => Math.min(prev + 1, 4));
}
};
const prevStep = () => {
setCurrentStep(prev => Math.max(prev - 1, 1));
};
const submitForm = async () => {
try {
const response = await fetch('https://connect.kitoform.com/f/YOUR_ENDPOINT_ID', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
...formData,
form_type: 'multi_step_inquiry'
}),
});
if (response.ok) {
alert('Form submitted successfully!');
// Reset form or redirect
} else {
throw new Error('Submission failed');
}
} catch (error) {
alert('Error submitting form. Please try again.');
}
};
return (
<FormContext.Provider value={{
currentStep,
formData,
errors,
updateFormData,
nextStep,
prevStep,
submitForm,
totalSteps: 4
}}>
{children}
</FormContext.Provider>
);
};
// Progress Bar Component
const ProgressBar = () => {
const { currentStep, totalSteps } = useFormContext();
const steps = [
'Personal Info',
'Company Details',
'Project Info',
'Review'
];
return (
<div className="mb-8">
<div className="flex justify-between">
{steps.map((step, index) => (
<div
key={index}
className={`flex-1 text-center py-2 px-1 text-sm font-medium ${
index + 1 < currentStep
? 'bg-green-500 text-white'
: index + 1 === currentStep
? 'bg-blue-500 text-white'
: 'bg-gray-200 text-gray-600'
} ${index === 0 ? 'rounded-l-lg' : index === steps.length - 1 ? 'rounded-r-lg' : ''}`}
>
<div className="flex items-center justify-center">
<span className="mr-2 w-6 h-6 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-xs">
{index + 1 < currentStep ? '✓' : index + 1}
</span>
{step}
</div>
</div>
))}
</div>
<div className="mt-2 bg-gray-200 rounded-full h-2">
<div
className="bg-blue-500 h-2 rounded-full transition-all duration-300"
style={{ width: `${(currentStep / totalSteps) * 100}%` }}
/>
</div>
</div>
);
};
// Form Field Component
const FormField = ({ label, name, type = 'text', required = false, options = [], children }) => {
const { formData, errors, updateFormData } = useFormContext();
const baseClasses = "w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2";
const errorClasses = errors[name] ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-blue-500";
if (type === 'select') {
return (
<div className="mb-4">
<label className="block text-sm font-medium mb-2">
{label} {required && '*'}
</label>
<select
value={formData[name]}
onChange={(e) => updateFormData(name, e.target.value)}
className={`${baseClasses} ${errorClasses}`}
>
<option value="">Select an option</option>
{options.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
{errors[name] && <p className="mt-1 text-sm text-red-600">{errors[name]}</p>}
</div>
);
}
if (type === 'textarea') {
return (
<div className="mb-4">
<label className="block text-sm font-medium mb-2">
{label} {required && '*'}
</label>
<textarea
value={formData[name]}
onChange={(e) => updateFormData(name, e.target.value)}
rows={4}
className={`${baseClasses} ${errorClasses}`}
/>
{errors[name] && <p className="mt-1 text-sm text-red-600">{errors[name]}</p>}
</div>
);
}
if (type === 'checkbox') {
return (
<div className="mb-4">
<label className="flex items-center">
<input
type="checkbox"
checked={formData[name]}
onChange={(e) => updateFormData(name, e.target.checked)}
className="mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<span className="text-sm">{label}</span>
</label>
</div>
);
}
return (
<div className="mb-4">
<label className="block text-sm font-medium mb-2">
{label} {required && '*'}
</label>
<input
type={type}
value={formData[name]}
onChange={(e) => updateFormData(name, e.target.value)}
className={`${baseClasses} ${errorClasses}`}
/>
{errors[name] && <p className="mt-1 text-sm text-red-600">{errors[name]}</p>}
</div>
);
};
// Step Components
const PersonalInfoStep = () => (
<div>
<h3 className="text-lg font-semibold mb-4">Personal Information</h3>
<div className="grid md:grid-cols-2 gap-4">
<FormField label="First Name" name="firstName" required />
<FormField label="Last Name" name="lastName" required />
</div>
<FormField label="Email Address" name="email" type="email" required />
<FormField label="Phone Number" name="phone" type="tel" required />
</div>
);
const CompanyInfoStep = () => (
<div>
<h3 className="text-lg font-semibold mb-4">Company Information</h3>
<FormField label="Company Name" name="companyName" required />
<FormField label="Job Title" name="jobTitle" required />
<FormField
label="Company Size"
name="companySize"
type="select"
required
options={[
{ value: '1-10', label: '1-10 employees' },
{ value: '11-50', label: '11-50 employees' },
{ value: '51-200', label: '51-200 employees' },
{ value: '201-1000', label: '201-1,000 employees' },
{ value: '1000+', label: '1,000+ employees' }
]}
/>
<FormField
label="Industry"
name="industry"
type="select"
required
options={[
{ value: 'technology', label: 'Technology' },
{ value: 'healthcare', label: 'Healthcare' },
{ value: 'finance', label: 'Finance' },
{ value: 'education', label: 'Education' },
{ value: 'retail', label: 'Retail' },
{ value: 'manufacturing', label: 'Manufacturing' },
{ value: 'other', label: 'Other' }
]}
/>
</div>
);
const ProjectInfoStep = () => (
<div>
<h3 className="text-lg font-semibold mb-4">Project Information</h3>
<FormField
label="Project Type"
name="projectType"
type="select"
required
options={[
{ value: 'web_development', label: 'Web Development' },
{ value: 'mobile_app', label: 'Mobile App' },
{ value: 'e_commerce', label: 'E-commerce' },
{ value: 'consulting', label: 'Consulting' },
{ value: 'design', label: 'Design Services' },
{ value: 'other', label: 'Other' }
]}
/>
<FormField
label="Budget Range"
name="budget"
type="select"
required
options={[
{ value: 'under_5k', label: 'Under $5,000' },
{ value: '5k_15k', label: '$5,000 - $15,000' },
{ value: '15k_50k', label: '$15,000 - $50,000' },
{ value: '50k_100k', label: '$50,000 - $100,000' },
{ value: 'over_100k', label: 'Over $100,000' }
]}
/>
<FormField
label="Timeline"
name="timeline"
type="select"
required
options={[
{ value: 'asap', label: 'ASAP' },
{ value: '1_month', label: '1 month' },
{ value: '3_months', label: '3 months' },
{ value: '6_months', label: '6 months' },
{ value: 'flexible', label: 'Flexible' }
]}
/>
<FormField
label="Project Description"
name="description"
type="textarea"
required
/>
<FormField
label="How did you hear about us?"
name="hearAboutUs"
type="select"
options={[
{ value: 'google', label: 'Google Search' },
{ value: 'social_media', label: 'Social Media' },
{ value: 'referral', label: 'Referral' },
{ value: 'advertisement', label: 'Advertisement' },
{ value: 'other', label: 'Other' }
]}
/>
<FormField
label="Subscribe to our newsletter for updates and tips"
name="newsletter"
type="checkbox"
/>
</div>
);
const ReviewStep = () => {
const { formData } = useFormContext();
return (
<div>
<h3 className="text-lg font-semibold mb-4">Review Your Information</h3>
<div className="bg-white p-6 rounded-lg space-y-4">
<div>
<h4 className="font-semibold text-[#26241e]">Personal Information</h4>
<p className="text-gray-600">
{formData.firstName} {formData.lastName}<br />
{formData.email}<br />
{formData.phone}
</p>
</div>
<div>
<h4 className="font-semibold text-[#26241e]">Company Information</h4>
<p className="text-gray-600">
{formData.companyName}<br />
{formData.jobTitle}<br />
Company Size: {formData.companySize}<br />
Industry: {formData.industry}
</p>
</div>
<div>
<h4 className="font-semibold text-[#26241e]">Project Details</h4>
<p className="text-gray-600">
Type: {formData.projectType}<br />
Budget: {formData.budget}<br />
Timeline: {formData.timeline}<br />
Description: {formData.description}
</p>
</div>
</div>
</div>
);
};
// Navigation Component
const Navigation = () => {
const { currentStep, totalSteps, nextStep, prevStep, submitForm } = useFormContext();
return (
<div className="flex justify-between pt-6 border-t">
<button
type="button"
onClick={prevStep}
disabled={currentStep === 1}
className="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-[#fbfbfb] disabled:opacity-50 disabled:cursor-not-allowed"
>
Previous
</button>
{currentStep < totalSteps ? (
<button
type="button"
onClick={nextStep}
className="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
>
Next
</button>
) : (
<button
type="button"
onClick={submitForm}
className="px-6 py-2 bg-green-500 text-white rounded-md hover:bg-green-600"
>
Submit
</button>
)}
</div>
);
};
// Main Form Component
const MultiStepForm = () => {
const { currentStep } = useFormContext();
const renderStep = () => {
switch (currentStep) {
case 1: return <PersonalInfoStep />;
case 2: return <CompanyInfoStep />;
case 3: return <ProjectInfoStep />;
case 4: return <ReviewStep />;
default: return <PersonalInfoStep />;
}
};
return (
<div className="max-w-2xl mx-auto p-6">
<div className="mb-6">
<h2 className="text-2xl font-bold text-[#26241e] mb-2">Get Started</h2>
<p className="text-gray-600">Tell us about your project and we'll get back to you.</p>
</div>
<ProgressBar />
<div className="bg-white border border-[#e2e1de] rounded-lg p-6">
{renderStep()}
<Navigation />
</div>
</div>
);
};
// App Component
const App = () => {
return (
<FormProvider>
<MultiStepForm />
</FormProvider>
);
};
export default App;Conditional Form Logic
Smart form that shows/hides fields based on user selections using vanilla JavaScript.
<!-- Conditional Logic Form -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST" id="conditionalForm">
<input type="hidden" name="form_type" value="conditional_inquiry">
<div class="form-container">
<h2>Service Inquiry</h2>
<!-- Basic Information -->
<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>
<!-- Service Type Selection (Triggers Conditional Logic) -->
<div class="form-group">
<label for="service_type">What service are you interested in? *</label>
<select name="service_type" id="service_type" required onchange="showServiceFields()">
<option value="">Select a service</option>
<option value="web_development">Web Development</option>
<option value="mobile_app">Mobile App Development</option>
<option value="design">Design Services</option>
<option value="consulting">Consulting</option>
<option value="maintenance">Website Maintenance</option>
</select>
</div>
<!-- Web Development Fields -->
<div id="web_development_fields" class="conditional-section" style="display: none;">
<h3>Web Development Details</h3>
<div class="form-group">
<label for="website_type">Type of Website *</label>
<select name="website_type" id="website_type" onchange="showWebsiteFields()">
<option value="">Select type</option>
<option value="business">Business Website</option>
<option value="ecommerce">E-commerce Store</option>
<option value="portfolio">Portfolio</option>
<option value="blog">Blog</option>
<option value="custom">Custom Application</option>
</select>
</div>
<!-- E-commerce specific fields -->
<div id="ecommerce_fields" class="sub-conditional" style="display: none;">
<div class="form-group">
<label for="products_count">Estimated number of products</label>
<select name="products_count" id="products_count">
<option value="">Select range</option>
<option value="1-50">1-50 products</option>
<option value="51-200">51-200 products</option>
<option value="201-1000">201-1,000 products</option>
<option value="1000+">1,000+ products</option>
</select>
</div>
<div class="form-group">
<label for="payment_methods">Preferred payment methods</label>
<div class="checkbox-group">
<label><input type="checkbox" name="payment_methods" value="stripe"> Stripe</label>
<label><input type="checkbox" name="payment_methods" value="paypal"> PayPal</label>
<label><input type="checkbox" name="payment_methods" value="square"> Square</label>
<label><input type="checkbox" name="payment_methods" value="other"> Other</label>
</div>
</div>
</div>
<div class="form-group">
<label for="cms_preference">Do you need a content management system?</label>
<select name="cms_preference" id="cms_preference" onchange="showCMSFields()">
<option value="">Select preference</option>
<option value="yes">Yes, I want to manage content myself</option>
<option value="no">No, you can manage it</option>
<option value="unsure">I'm not sure</option>
</select>
</div>
<!-- CMS Fields -->
<div id="cms_fields" class="sub-conditional" style="display: none;">
<div class="form-group">
<label for="cms_type">Preferred CMS</label>
<select name="cms_type" id="cms_type">
<option value="">No preference</option>
<option value="wordpress">WordPress</option>
<option value="shopify">Shopify</option>
<option value="webflow">Webflow</option>
<option value="custom">Custom CMS</option>
</select>
</div>
</div>
</div>
<!-- Mobile App Fields -->
<div id="mobile_app_fields" class="conditional-section" style="display: none;">
<h3>Mobile App Development</h3>
<div class="form-group">
<label for="app_platforms">Which platforms? *</label>
<div class="checkbox-group">
<label><input type="checkbox" name="app_platforms" value="ios" required> iOS</label>
<label><input type="checkbox" name="app_platforms" value="android" required> Android</label>
<label><input type="checkbox" name="app_platforms" value="both" required> Both</label>
</div>
</div>
<div class="form-group">
<label for="app_type">Type of App</label>
<select name="app_type" id="app_type">
<option value="">Select type</option>
<option value="business">Business App</option>
<option value="ecommerce">E-commerce App</option>
<option value="social">Social App</option>
<option value="utility">Utility App</option>
<option value="game">Game</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="app_features">Key Features Needed</label>
<div class="checkbox-group">
<label><input type="checkbox" name="app_features" value="user_auth"> User Authentication</label>
<label><input type="checkbox" name="app_features" value="push_notifications"> Push Notifications</label>
<label><input type="checkbox" name="app_features" value="payment"> Payment Integration</label>
<label><input type="checkbox" name="app_features" value="gps"> GPS/Location</label>
<label><input type="checkbox" name="app_features" value="camera"> Camera Integration</label>
<label><input type="checkbox" name="app_features" value="offline"> Offline Functionality</label>
</div>
</div>
</div>
<!-- Design Services Fields -->
<div id="design_fields" class="conditional-section" style="display: none;">
<h3>Design Services</h3>
<div class="form-group">
<label for="design_type">Type of Design Work *</label>
<select name="design_type" id="design_type">
<option value="">Select type</option>
<option value="logo">Logo Design</option>
<option value="branding">Complete Branding Package</option>
<option value="web_design">Web Design</option>
<option value="print">Print Design</option>
<option value="ui_ux">UI/UX Design</option>
</select>
</div>
<div class="form-group">
<label for="design_style">Preferred Design Style</label>
<select name="design_style" id="design_style">
<option value="">No preference</option>
<option value="modern">Modern/Minimalist</option>
<option value="classic">Classic/Traditional</option>
<option value="creative">Creative/Artistic</option>
<option value="corporate">Corporate/Professional</option>
</select>
</div>
<div class="form-group">
<label for="brand_colors">Do you have existing brand colors?</label>
<select name="brand_colors" id="brand_colors" onchange="showColorFields()">
<option value="">Select option</option>
<option value="yes">Yes, I have specific colors</option>
<option value="no">No, I need help choosing</option>
</select>
</div>
<div id="color_fields" class="sub-conditional" style="display: none;">
<div class="form-group">
<label for="color_preferences">Color Preferences/Existing Colors</label>
<textarea name="color_preferences" id="color_preferences" rows="3"
placeholder="Describe your color preferences or provide hex codes..."></textarea>
</div>
</div>
</div>
<!-- Consulting Fields -->
<div id="consulting_fields" class="conditional-section" style="display: none;">
<h3>Consulting Services</h3>
<div class="form-group">
<label for="consulting_type">Type of Consulting *</label>
<select name="consulting_type" id="consulting_type">
<option value="">Select type</option>
<option value="strategy">Digital Strategy</option>
<option value="technical">Technical Consulting</option>
<option value="marketing">Marketing Consulting</option>
<option value="process">Process Improvement</option>
<option value="training">Training & Education</option>
</select>
</div>
<div class="form-group">
<label for="current_challenges">What challenges are you facing?</label>
<textarea name="current_challenges" id="current_challenges" rows="4"
placeholder="Describe your current challenges or what you hope to achieve..."></textarea>
</div>
</div>
<!-- Maintenance Fields -->
<div id="maintenance_fields" class="conditional-section" style="display: none;">
<h3>Website Maintenance</h3>
<div class="form-group">
<label for="website_url">Current Website URL</label>
<input type="url" name="website_url" id="website_url"
placeholder="https://yourwebsite.com">
</div>
<div class="form-group">
<label for="maintenance_type">Type of Maintenance Needed</label>
<div class="checkbox-group">
<label><input type="checkbox" name="maintenance_type" value="updates"> Regular Updates</label>
<label><input type="checkbox" name="maintenance_type" value="security"> Security Monitoring</label>
<label><input type="checkbox" name="maintenance_type" value="backup"> Backup Management</label>
<label><input type="checkbox" name="maintenance_type" value="performance"> Performance Optimization</label>
<label><input type="checkbox" name="maintenance_type" value="content"> Content Updates</label>
<label><input type="checkbox" name="maintenance_type" value="fixes"> Bug Fixes</label>
</div>
</div>
</div>
<!-- Common Fields for All Services -->
<div id="common_fields" style="display: none;">
<h3>Project Details</h3>
<div class="form-group">
<label for="budget">Budget Range</label>
<select name="budget" id="budget">
<option value="">Select budget range</option>
<option value="under_1k">Under $1,000</option>
<option value="1k_5k">$1,000 - $5,000</option>
<option value="5k_10k">$5,000 - $10,000</option>
<option value="10k_25k">$10,000 - $25,000</option>
<option value="25k_50k">$25,000 - $50,000</option>
<option value="over_50k">Over $50,000</option>
</select>
</div>
<div class="form-group">
<label for="timeline">Timeline</label>
<select name="timeline" id="timeline">
<option value="">Select timeline</option>
<option value="asap">ASAP</option>
<option value="1_month">Within 1 month</option>
<option value="3_months">Within 3 months</option>
<option value="6_months">Within 6 months</option>
<option value="flexible">Flexible</option>
</select>
</div>
<div class="form-group">
<label for="additional_info">Additional Information</label>
<textarea name="additional_info" id="additional_info" rows="4"
placeholder="Tell us more about your project, requirements, or any questions you have..."></textarea>
</div>
<div class="form-group">
<label for="contact_method">Preferred Contact Method</label>
<select name="contact_method" id="contact_method">
<option value="email">Email</option>
<option value="phone">Phone</option>
<option value="video_call">Video Call</option>
<option value="in_person">In Person (if local)</option>
</select>
</div>
</div>
<button type="submit" class="submit-btn">Send Inquiry</button>
</div>
</form>
<script>
function showServiceFields() {
const serviceType = document.getElementById('service_type').value;
// Hide all conditional sections
const sections = document.querySelectorAll('.conditional-section');
sections.forEach(section => section.style.display = 'none');
// Show common fields if a service is selected
const commonFields = document.getElementById('common_fields');
if (serviceType) {
commonFields.style.display = 'block';
// Show specific service fields
const serviceFields = document.getElementById(serviceType + '_fields');
if (serviceFields) {
serviceFields.style.display = 'block';
}
} else {
commonFields.style.display = 'none';
}
// Reset sub-conditionals
const subConditionals = document.querySelectorAll('.sub-conditional');
subConditionals.forEach(sub => sub.style.display = 'none');
}
function showWebsiteFields() {
const websiteType = document.getElementById('website_type').value;
// Hide all sub-conditionals first
const subConditionals = document.querySelectorAll('.sub-conditional');
subConditionals.forEach(sub => sub.style.display = 'none');
// Show e-commerce fields if selected
if (websiteType === 'ecommerce') {
document.getElementById('ecommerce_fields').style.display = 'block';
}
}
function showCMSFields() {
const cmsPreference = document.getElementById('cms_preference').value;
const cmsFields = document.getElementById('cms_fields');
if (cmsPreference === 'yes') {
cmsFields.style.display = 'block';
} else {
cmsFields.style.display = 'none';
}
}
function showColorFields() {
const brandColors = document.getElementById('brand_colors').value;
const colorFields = document.getElementById('color_fields');
if (brandColors === 'yes') {
colorFields.style.display = 'block';
} else {
colorFields.style.display = 'none';
}
}
</script>
<style>
.form-container {
max-width: 600px;
margin: 2rem auto;
padding: 2rem;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-family: Arial, sans-serif;
}
.form-container h2 {
text-align: center;
color: #1f2937;
margin-bottom: 2rem;
}
.form-container h3 {
color: #374151;
margin: 2rem 0 1rem 0;
padding: 1rem;
background: #f3f4f6;
border-radius: 4px;
border-left: 4px solid #3b82f6;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #374151;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 1rem;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.5rem;
margin-top: 0.5rem;
}
.checkbox-group label {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
cursor: pointer;
}
.checkbox-group input {
width: auto;
margin-right: 0.5rem;
}
.conditional-section {
margin-top: 2rem;
padding: 1rem;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 6px;
}
.sub-conditional {
margin-top: 1rem;
padding: 1rem;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 4px;
}
.submit-btn {
width: 100%;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
margin-top: 2rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
@media (max-width: 768px) {
.checkbox-group {
grid-template-columns: 1fr;
}
.form-container {
margin: 1rem;
padding: 1rem;
}
}
</style>