A complete portfolio website with contact forms, project galleries, and visitor analytics - all powered by StaticBox with zero backend setup.
Developers need professional portfolios that showcase their work and capture leads, but setting up contact forms, file uploads, and analytics typically requires backend infrastructure.
StaticBox provides instant form handling, file storage, and data collection APIs that integrate seamlessly with any static portfolio site.
Professional contact form with built-in honeypot traps and email notifications.
<!-- Simple HTML form with instant backend -->
<form action="https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit" method="POST">
<input name="name" type="text" placeholder="Your Name" required />
<input name="email" type="email" placeholder="your@email.com" required />
<textarea name="message" placeholder="Your message..." required></textarea>
<button type="submit">Send Message</button>
</form>
<!-- ✅ Automatic spam protection
✅ Email notifications
✅ Data storage included -->Allow visitors to submit their own projects or enable easy project showcasing.
// Upload project images and details
const formData = new FormData();
formData.append('title', 'My Awesome Project');
formData.append('description', 'Project description...');
formData.append('image', fileInput.files[0]);
formData.append('tech_stack', 'React, Node.js');
await fetch('https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit', {
method: 'POST',
body: formData
});
// Files automatically stored in CDN
// Data instantly queryable via APITrack page views, popular projects, and visitor engagement without Google Analytics.
// ⚠️ SECURITY WARNING: API keys must NEVER be used in frontend code!
// This code should run on your server-side (API routes, server actions, etc.)
// Server-side tracking (Next.js API route example)
// pages/api/track-event.js or app/api/track-event/route.js
export async function POST(request) {
const eventData = await request.json();
await fetch('https://staticbox.io/api/projects/[your-project-id]/datastores/[collection-name]/data', {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + process.env.STATICBOX_API_KEY, // Server-side only!
'Content-Type': 'application/json'
},
body: JSON.stringify({
event: eventData.event,
project_id: eventData.project_id,
visitor_id: eventData.visitor_id,
timestamp: new Date().toISOString(),
referrer: eventData.referrer
})
});
return Response.json({ success: true });
}
// Frontend code (safe - no API keys exposed)
fetch('/api/track-event', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
event: 'project_view',
project_id: 'portfolio-website',
visitor_id: generateVisitorId(),
referrer: document.referrer
})
});API Keys must NEVER be used in frontend code. StaticBox API keys should only be used in:
✅ Forms API can be used directly from frontend (no API key needed)
⚠️ DataStore API requires API keys and must be server-side only
Set up your project and get your API endpoints ready.
# No installation required!
# Just sign up and create a project at staticbox.io
# Get your project ID: [your-project-id]Your project ID will be used in all API calls
Replace your mailto links with a working contact form.
<!-- Replace this: -->
<a href="mailto:you@example.com">Contact Me</a>
<!-- With this: -->
<form action="https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit" method="POST">
<input name="name" type="text" placeholder="Your Name" required />
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" rows="5" required></textarea>
<button type="submit">Send Message</button>
</form>Enable visitors to submit projects or easily add your own.
<form action="https://staticbox.io/api/forms/[your-project-id]/projects/submit" method="POST" enctype="multipart/form-data">
<input name="title" type="text" placeholder="Project Title" required />
<textarea name="description" placeholder="Project Description" required></textarea>
<input name="tech_stack" type="text" placeholder="Technologies used" />
<input name="live_url" type="url" placeholder="Live Demo URL" />
<input name="github_url" type="url" placeholder="GitHub URL" />
<input name="image" type="file" accept="image/*" />
<button type="submit">Submit Project</button>
</form>Track visitor behavior and popular content with secure server-side implementation.
// ⚠️ SECURITY: API keys must be kept server-side only!
// 1. Create server-side API route (Next.js example)
// app/api/analytics/route.js
export async function POST(request) {
const data = await request.json();
const response = await fetch('https://staticbox.io/api/projects/[your-project-id]/datastores/analytics/data', {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + process.env.STATICBOX_API_KEY, // Secure!
'Content-Type': 'application/json'
},
body: JSON.stringify({
page: data.page,
title: data.title,
timestamp: new Date().toISOString(),
user_agent: data.user_agent
})
});
return Response.json({ success: response.ok });
}
// 2. Frontend tracking (safe - no API keys)
function trackPageView() {
fetch('/api/analytics', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
page: window.location.pathname,
title: document.title,
user_agent: navigator.userAgent
})
});
}
// Track on page load
trackPageView();Deploy to your favorite platform and configure notifications.
Works with Vercel, Netlify, GitHub Pages, or any static hosting. Configure email notifications in your StaticBox dashboard.
Start with StaticBox today and have your backend ready in minutes.
Start Building Now