ray
136 lines
4.5 KiB
Markdown
136 lines
4.5 KiB
Markdown
# Contact Form Pattern (Web3Forms)
|
|
|
|
Static-site contact form that emails the business owner directly. No backend, no calendar, no payment.
|
|
|
|
## Form Fields
|
|
|
|
Keep it SHORT. Every extra field costs conversions.
|
|
|
|
| Field | Required | Type | Notes |
|
|
|-------|----------|------|-------|
|
|
| Name | Yes | text | `autocomplete="name"` |
|
|
| Phone | Yes | tel | THE most important field for phone-first businesses |
|
|
| Email | No | email | Optional — don't require it, it adds friction |
|
|
| Service Needed | Yes | select | Dropdown with all service types + "Other" |
|
|
| Project Details | Yes | textarea | 3-line minimum, gives context before callback |
|
|
| Lead Source | No | select | Google/Facebook/Neighbor/Other — helps measure marketing |
|
|
|
|
**Deliberately missing:** address, calendar, file upload, CAPTCHA (add only if spam), budget field.
|
|
|
|
## HTML Structure
|
|
|
|
```html
|
|
<div class="form-card" id="quote-form-wrapper">
|
|
<div class="form-error" id="form-error" role="alert">
|
|
Something went wrong. Please try again or call us directly.
|
|
</div>
|
|
|
|
<form id="quote-form" novalidate>
|
|
<!-- fields with .form-group > .form-label + .form-input/.form-select/.form-textarea + .field-error -->
|
|
<button type="submit" class="btn submit-btn">
|
|
<span class="btn-text">Get My Free Quote</span>
|
|
<span class="spinner"></span>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Success state (hidden by default) -->
|
|
<div class="form-success" id="form-success">
|
|
<div class="check-icon">✓</div>
|
|
<h3>Thanks, <span id="success-name">friend</span>!</h3>
|
|
<p>We'll reach out within 2 hours.</p>
|
|
<div class="emergency-note">
|
|
<strong>🚨 Emergency?</strong> Call now: <a href="tel:...">(XXX) XXX-XXXX</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## CSS States
|
|
|
|
```css
|
|
.form-input.error, .form-select.error, .form-textarea.error {
|
|
border-color: var(--color-emergency);
|
|
box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
|
|
}
|
|
.field-error { display: none; }
|
|
.field-error.visible { display: block; color: var(--color-emergency); }
|
|
.form-error { display: none; background: var(--color-emergency-light); }
|
|
.form-error.visible { display: block; }
|
|
.form-success { display: none; }
|
|
.form-success.visible { display: block; }
|
|
.submit-btn.loading .spinner { display: inline-block; }
|
|
.submit-btn.loading .btn-text { display: none; }
|
|
```
|
|
|
|
## JavaScript
|
|
|
|
```javascript
|
|
var WEB3FORMS_KEY = 'YOUR_ACCESS_KEY'; // Replace with real key
|
|
var WEB3FORMS_URL = 'https://api.web3forms.com/submit';
|
|
|
|
// Validation
|
|
function validate() {
|
|
var valid = true;
|
|
if (!nameField.value.trim()) { showErr('name'); valid = false; }
|
|
if (!phoneField.value.trim()) { showErr('phone'); valid = false; }
|
|
if (!detailsField.value.trim()) { showErr('details'); valid = false; }
|
|
if (!serviceField.value) { showErr('service'); valid = false; }
|
|
return valid;
|
|
}
|
|
|
|
// Clear errors on input
|
|
inputs.forEach(function(el) {
|
|
el.addEventListener('input', function() {
|
|
el.classList.remove('error');
|
|
getErrorEl(el.name).classList.remove('visible');
|
|
});
|
|
});
|
|
|
|
// Submit
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
if (!validate()) return;
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.classList.add('loading');
|
|
|
|
var payload = new FormData(form);
|
|
payload.append('access_key', WEB3FORMS_KEY);
|
|
payload.append('subject', 'New Quote Request — Business Name');
|
|
payload.append('from_name', 'Business Website');
|
|
|
|
fetch(WEB3FORMS_URL, { method: 'POST', body: payload })
|
|
.then(function(res) { return res.json(); })
|
|
.then(function(data) {
|
|
if (data.success) {
|
|
document.getElementById('success-name').textContent =
|
|
nameField.value.trim().split(' ')[0] || 'friend';
|
|
form.style.display = 'none';
|
|
successDiv.classList.add('visible');
|
|
} else {
|
|
throw new Error(data.message || 'Submission failed');
|
|
}
|
|
})
|
|
.catch(function(err) {
|
|
submitBtn.disabled = false;
|
|
submitBtn.classList.remove('loading');
|
|
errorBanner.classList.add('visible');
|
|
console.error('Form error:', err);
|
|
});
|
|
});
|
|
```
|
|
|
|
## Setup
|
|
|
|
1. Go to https://web3forms.com/ — create free account
|
|
2. Copy access key
|
|
3. Replace `YOUR_ACCESS_KEY` in the form script
|
|
4. Configure destination email in Web3Forms dashboard
|
|
|
|
## Testing
|
|
|
|
- `file://` CORS blocks fetch() — expected. Test from a real web server.
|
|
- Click submit with empty fields → validation errors on all required fields
|
|
- Fill all required fields, submit → loading spinner → success card (if key valid) or error banner (if invalid key)
|
|
- Success card shows customer's first name + emergency phone fallback
|