---
name: Form Builder
slug: form-builder
description: Create fillable forms, surveys, and interactive documents with validation and data collection
category: document-creation
complexity: complex
version: "1.0.0"
author: "ID8Labs"
triggers:
- "create form"
- "build survey"
- "generate form"
- "make questionnaire"
- "fillable form"
tags:
- forms
- surveys
- questionnaires
- data-collection
- interactive
---
# Form Builder
The Form Builder skill automates the creation of fillable forms, surveys, questionnaires, and interactive documents. It handles various form types including registration forms, feedback surveys, applications, intake forms, and assessment tools. The skill supports multiple output formats (PDF with fillable fields, HTML forms, Google Forms integration) with validation rules, conditional logic, and data collection capabilities.
Generate professional forms with proper field types, validation, styling, and submission handling for any data collection need.
## Core Workflows
### Workflow 1: Create PDF Fillable Form
**Purpose:** Generate a PDF with interactive fillable fields
**Steps:**
1. Define form structure and fields
2. Set field types (text, checkbox, radio, dropdown, date)
3. Add validation rules for each field
4. Configure field properties (required, maxLength, etc.)
5. Apply styling and layout
6. Add instructions and help text
7. Generate PDF with fillable fields
8. Test form functionality
**Implementation:**
```javascript
const { PDFDocument, PDFTextField, PDFCheckBox, PDFDropdown, rgb } = require('pdf-lib');
const fs = require('fs');
async function createFillablePDFForm(formData, outputPath) {
const pdfDoc = await PDFDocument.create();
const page = pdfDoc.addPage([612, 792]); // Letter size
const { width, height } = page.getSize();
const fontSize = 11;
const labelFontSize = 10;
// Add title
page.drawText(formData.title, {
x: 50,
y: height - 50,
size: 18,
color: rgb(0.2, 0.2, 0.2)
});
// Add instructions
if (formData.instructions) {
page.drawText(formData.instructions, {
x: 50,
y: height - 80,
size: 10,
color: rgb(0.4, 0.4, 0.4),
maxWidth: width - 100
});
}
let currentY = height - 120;
// Add form fields
for (const field of formData.fields) {
// Draw field label
page.drawText(field.label + (field.required ? ' *' : ''), {
x: 50,
y: currentY,
size: labelFontSize,
color: rgb(0, 0, 0)
});
currentY -= 25;
// Create field based on type
switch (field.type) {
case 'text':
case 'email':
case 'number':
const textField = pdfDoc.getForm().createTextField(field.name);
textField.addToPage(page, {
x: 50,
y: currentY,
width: 300,
height: 20,
borderColor: rgb(0.5, 0.5, 0.5),
borderWidth: 1
});
if (field.placeholder) {
textField.setText(field.placeholder);
}
if (field.maxLength) {
textField.setMaxLength(field.maxLength);
}
break;
case 'textarea':
const textArea = pdfDoc.getForm().createTextField(field.name);
textArea.addToPage(page, {
x: 50,
y: currentY - 40,
width: 500,
height: 60,
borderColor: rgb(0.5, 0.5, 0.5),
borderWidth: 1
});
textArea.enableMultiline();
currentY -= 40;
break;
case 'checkbox':
field.options.forEach((option, index) => {
const checkbox = pdfDoc.getForm().createCheckBox(`${field.name}_${index}`);
checkbox.addToPage(page, {
x: 50,
y: currentY - (index * 20),
width: 12,
height: 12,
borderColor: rgb(0.5, 0.5, 0.5),
borderWidth: 1
});
page.drawText(option, {
x: 70,
y: currentY - (index * 20) + 2,
size: 10,
color: rgb(0, 0, 0)
});
});
currentY -= field.options.length * 20;
break;
case 'radio':
const radioGroup = pdfDoc.getForm().createRadioGroup(field.name);
field.options.forEach((option, index) => {
radioGroup.addOptionToPage(option, page, {
x: 50,
y: currentY - (index * 20),
width: 12,
height: 12,
borderColor: rgb(0.5, 0.5, 0.5),
borderWidth: 1
});
page.drawText(option, {
x: 70,
y: currentY - (index * 20) + 2,
size: 10,
color: rgb(0, 0, 0)
});
});
currentY -= field.options.length * 20;
break;
case 'dropdown':
const dropdown = pdfDoc.getForm().createDropdown(field.name);
dropdown.addOptions(field.options);
dropdown.addToPage(page, {
x: 50,
y: currentY,
width: 200,
height: 20,
borderColor: rgb(0.5, 0.5, 0.5),
borderWidth: 1
});
break;
case 'date':
const dateField = pdfDoc.getForm().createTextField(field.name);
dateField.addToPage(page, {
x: 50,
y: currentY,
width: 150,
height: 20,
borderColor: rgb(0.5, 0.5, 0.5),
borderWidth: 1
});
dateField.setText('MM/DD/YYYY');
break;
}
// Add help text if provided
if (field.helpText) {
page.drawText(field.helpText, {
x: 370,
y: currentY + 5,
size: 8,
color: rgb(0.6, 0.6, 0.6),
maxWidth: 200
});
}
currentY -= 40;
// Add new page if running out of space
if (currentY < 100) {
const newPage = pdfDoc.addPage([612, 792]);
currentY = height - 50;
}
}
// Add submit button placeholder (text)
page.drawText('Please save and email this completed form to: ' + formData.submitEmail, {
x: 50,
y: 50,
size: 9,
color: rgb(0.3, 0.3, 0.3)
});
const pdfBytes = await pdfDoc.save();
fs.writeFileSync(outputPath, pdfBytes);
return outputPath;
}
```
### Workflow 2: Generate HTML Form
**Purpose:** Create interactive HTML form with client-side validation
**Steps:**
1. Define form structure and fields
2. Generate HTML markup
3. Add CSS styling for professional appearance
4. Implement JavaScript validation
5. Handle form submission
6. Add accessibility features (ARIA labels, keyboard navigation)
7. Make responsive for mobile devices
8. Test across browsers
**Implementation:**
```javascript
function generateHTMLForm(formData, outputPath) {
const html = `
${formData.title}
`;
fs.writeFileSync(outputPath, html, 'utf8');
return outputPath;
}
function generateFieldHTML(field) {
const requiredAttr = field.required ? 'required' : '';
const requiredLabel = field.required ? '*' : '';
switch (field.type) {
case 'text':
case 'email':
case 'number':
case 'tel':
case 'date':
return `
`;
case 'textarea':
return `
`;
case 'select':
return `
`;
case 'checkbox':
return `
`;
case 'radio':
return `
`;
default:
return '';
}
}
function generateValidationScript(formData) {
return `
const form = document.getElementById('mainForm');
const submitBtn = document.getElementById('submitBtn');
const successMessage = document.getElementById('successMessage');
// Validation rules
const validationRules = {
email: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/,
phone: /^[\\d\\s\\-\\(\\)]+$/
};
// Real-time validation
form.addEventListener('input', (e) => {
validateField(e.target);
});
// Form submission
form.addEventListener('submit', async (e) => {
e.preventDefault();
// Validate all fields
let isValid = true;
const fields = form.querySelectorAll('input, textarea, select');
fields.forEach(field => {
if (!validateField(field)) {
isValid = false;
}
});
if (!isValid) {
return;
}
// Disable submit button
submitBtn.disabled = true;
submitBtn.textContent = 'Submitting...';
try {
// Collect form data
const formData = new FormData(form);
const data = Object.fromEntries(formData);
// Submit to server
${formData.submitUrl ? `
const response = await fetch('${formData.submitUrl}', {
method: '${formData.method || 'POST'}',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (response.ok) {
successMessage.style.display = 'block';
form.reset();
} else {
alert('Submission failed. Please try again.');
}
` : `
// No submit URL - just show success
console.log('Form data:', data);
successMessage.style.display = 'block';
form.reset();
`}
} catch (error) {
alert('An error occurred. Please try again.');
console.error(error);
} finally {
submitBtn.disabled = false;
submitBtn.textContent = 'Submit';
}
});
function validateField(field) {
const errorEl = document.getElementById(field.name + '-error');
if (!errorEl) return true;
let isValid = true;
let errorMessage = '';
// Required check
if (field.hasAttribute('required') && !field.value.trim()) {
isValid = false;
errorMessage = 'This field is required';
}
// Email validation
if (field.type === 'email' && field.value && !validationRules.email.test(field.value)) {
isValid = false;
errorMessage = 'Please enter a valid email address';
}
// Pattern validation
if (field.hasAttribute('pattern') && field.value) {
const pattern = new RegExp(field.getAttribute('pattern'));
if (!pattern.test(field.value)) {
isValid = false;
errorMessage = 'Please enter a valid value';
}
}
// Update UI
if (isValid) {
field.classList.remove('invalid');
errorEl.classList.remove('visible');
} else {
field.classList.add('invalid');
errorEl.textContent = errorMessage;
errorEl.classList.add('visible');
}
return isValid;
}
`;
}
```
### Workflow 3: Survey/Questionnaire Generator
**Purpose:** Create comprehensive surveys with multiple question types and logic
**Steps:**
1. Define survey structure and sections
2. Add various question types (multiple choice, rating, text, etc.)
3. Implement conditional logic (skip patterns)
4. Add validation rules
5. Configure answer choices and scales
6. Design results collection and analysis
7. Generate survey in preferred format
8. Set up response tracking
**Implementation:**
```javascript
async function generateSurvey(surveyData, outputPath) {
const survey = {
title: surveyData.title,
description: surveyData.description,
sections: surveyData.sections.map(section => ({
title: section.title,
questions: section.questions.map((q, idx) => ({
id: `q${section.id}_${idx + 1}`,
type: q.type,
text: q.text,
required: q.required !== false,
options: q.options,
validation: q.validation,
conditionalLogic: q.conditionalLogic
}))
})),
settings: {
allowAnonymous: surveyData.allowAnonymous !== false,
showProgress: surveyData.showProgress !== false,
randomizeQuestions: surveyData.randomizeQuestions || false,
allowMultipleSubmissions: surveyData.allowMultipleSubmissions || false
}
};
// Generate HTML survey
const html = generateSurveyHTML(survey);
fs.writeFileSync(outputPath, html, 'utf8');
return {
surveyPath: outputPath,
questionCount: survey.sections.reduce((sum, s) => sum + s.questions.length, 0),
settings: survey.settings
};
}
function generateSurveyHTML(survey) {
return `
${survey.title}
${survey.title}
${survey.description}
${survey.settings.showProgress ? `
` : ''}
`;
}
function generateQuestionHTML(question) {
const requiredMark = question.required ? '*' : '';
switch (question.type) {
case 'multipleChoice':
return `
${question.text} ${requiredMark}
${question.options.map((opt, idx) => `
`).join('\n')}
`;
case 'rating':
const scale = question.scale || 5;
return `
${question.text} ${requiredMark}
${Array.from({ length: scale }, (_, i) => i + 1).map(num => `
${num}
`).join('\n')}
`;
case 'text':
return `
${question.text} ${requiredMark}
`;
case 'checkbox':
return `
${question.text} ${requiredMark}
${question.options.map((opt, idx) => `
`).join('\n')}
`;
default:
return '';
}
}
function generateSurveyScript(survey) {
return `
function selectRating(questionId, value) {
// Remove previous selection
const container = document.querySelector(\`[data-question-id="\${questionId}"]\`);
container.querySelectorAll('.rating-option').forEach(opt => {
opt.classList.remove('selected');
});
// Add new selection
event.target.classList.add('selected');
document.getElementById(questionId).value = value;
}
// Form submission
document.getElementById('surveyForm').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const responses = Object.fromEntries(formData);
console.log('Survey responses:', responses);
// Submit to server or save locally
alert('Thank you for completing the survey!');
e.target.reset();
});
// Progress tracking
${survey.settings.showProgress ? `
const questions = document.querySelectorAll('.question');
const progressFill = document.getElementById('progressFill');
document.addEventListener('input', updateProgress);
function updateProgress() {
let answered = 0;
questions.forEach(q => {
const inputs = q.querySelectorAll('input, textarea');
const hasAnswer = Array.from(inputs).some(input => {
if (input.type === 'radio' || input.type === 'checkbox') {
return input.checked;
}
return input.value.trim() !== '';
});
if (hasAnswer) answered++;
});
const progress = (answered / questions.length) * 100;
progressFill.style.width = progress + '%';
}
` : ''}
`;
}
```
### Workflow 4: Form Data Processing
**Purpose:** Handle form submissions and process collected data
**Steps:**
1. Set up submission endpoint
2. Validate submitted data
3. Process and sanitize inputs
4. Store data in database or spreadsheet
5. Send confirmation email
6. Generate summary reports
7. Export data for analysis
### Workflow 5: Multi-Page Form with Progress
**Purpose:** Create long forms split into multiple pages with progress tracking
**Steps:**
1. Divide form into logical sections
2. Create page navigation
3. Implement progress bar
4. Save progress between pages
5. Add validation at each step
6. Allow going back to edit
7. Submit all data at the end
## Quick Reference
| Action | Command/Trigger |
|--------|-----------------|
| PDF fillable form | "create fillable PDF form" |
| HTML form | "generate HTML form with [fields]" |
| Survey | "build survey about [topic]" |
| Contact form | "create contact form" |
| Registration form | "make registration form" |
| Feedback form | "generate feedback survey" |
| Multi-step form | "create multi-page form" |
## Best Practices
- **Clear Labels:** Use descriptive, concise labels for all fields
- **Logical Grouping:** Group related fields together
- **Required Fields:** Clearly mark required fields with asterisks
- **Help Text:** Provide guidance for complex fields
- **Validation:** Implement both client-side and server-side validation
- **Error Messages:** Show clear, helpful error messages
- **Accessibility:** Include ARIA labels, keyboard navigation
- **Mobile Responsive:** Ensure forms work on all devices
- **Progress Indicators:** Show progress for long forms
- **Save Progress:** Allow users to save and resume
- **Confirmation:** Show success message after submission
- **Security:** Use CSRF protection, sanitize inputs
## Common Patterns
**Contact Form:**
```javascript
{
fields: [
{ name: 'name', type: 'text', label: 'Full Name', required: true },
{ name: 'email', type: 'email', label: 'Email', required: true },
{ name: 'phone', type: 'tel', label: 'Phone Number' },
{ name: 'subject', type: 'text', label: 'Subject', required: true },
{ name: 'message', type: 'textarea', label: 'Message', required: true }
]
}
```
**Event Registration:**
```javascript
{
fields: [
{ name: 'attendeeName', type: 'text', required: true },
{ name: 'email', type: 'email', required: true },
{ name: 'ticketType', type: 'select', options: ['General', 'VIP'], required: true },
{ name: 'dietaryRestrictions', type: 'checkbox', options: ['Vegetarian', 'Vegan', 'Gluten-Free'] },
{ name: 'specialRequests', type: 'textarea' }
]
}
```
## Dependencies
Install required packages:
```bash
npm install pdf-lib # For PDF forms
npm install express # For form submission handling
npm install validator # For input validation
npm install nodemailer # For email confirmations
```
## Error Handling
- **Validation Errors:** Show specific field-level errors
- **Network Errors:** Handle submission failures gracefully
- **Data Loss:** Auto-save progress to prevent data loss
- **Browser Compatibility:** Test across different browsers
## Advanced Features
**Conditional Logic:**
```javascript
conditionalLogic: {
showIf: { field: 'employment', value: 'employed' },
hideIf: { field: 'student', value: 'yes' }
}
```
**File Upload:**
```javascript
{
name: 'resume',
type: 'file',
accept: '.pdf,.doc,.docx',
maxSize: 5242880 // 5MB
}
```
**Auto-Save:**
```javascript
setInterval(() => {
const formData = new FormData(form);
localStorage.setItem('formDraft', JSON.stringify(Object.fromEntries(formData)));
}, 30000);
```