Skip to main content
Backforms
BACKFORMS
Start Free

Enterprise Project Quote Request Form

A sophisticated project estimation and quote request form designed for agencies, software consultancies, and B2B SaaS teams. Built with a sculpted Soft UI dark aesthetic, featuring interactive service categorization, tactile budget range pills ($10k-$100k+), target timeline selectors, and client identity details. Pre-configured for Backforms with invisible honeypot anti-spam defense and instant CRM lead notifications.

Tactile investment budget tier selectors ($10k to $100k+)
Project scope and service architecture categorization
Target launch timeline options (< 1 mo, 2-3 mo, 3-6 mo, flexible)
Invisible honeypot (_gotcha) spam trap
Automated webhook sync to HubSpot, Salesforce, Slack & Email
Live Form PreviewComponent Sandbox

Request a Project Quote

Tell us about your project requirements and budget. Receive a detailed architectural estimate within 24 hours.

Estimated Investment Budget$25k - $50k
Target Launch Timeline2 - 3 Months
Pre-configured for Backforms endpoint with automated CRM lead routing & instant team alerts
Honeypot anti-spam active
Zero backend needed
style="color:#9ece6a;">"use client";

import { useState } from style="color:#9ece6a;">"react";
import { Calculator, Check, AlertCircle, ArrowRight } from style="color:#9ece6a;">"lucide-react";

export default function ProjectQuoteRequestForm() {
  const [formData, setFormData] = useState({
    name: style="color:#9ece6a;">"",
    email: style="color:#9ece6a;">"",
    company: style="color:#9ece6a;">"",
    service: style="color:#9ece6a;">"Full-Stack Web App",
    budget: style="color:#9ece6a;">"$25k - $50k",
    timeline: style="color:#9ece6a;">"2 - 3 Months",
    projectBrief: style="color:#9ece6a;">"",
  });
  const [status, setStatus] = useState<style="color:#9ece6a;">"idle" | style="color:#9ece6a;">"loading" | style="color:#9ece6a;">"success" | style="color:#9ece6a;">"error">(style="color:#9ece6a;">"idle");
  const [errorMessage, setErrorMessage] = useState(style="color:#9ece6a;">"");

  const services = [
    style="color:#9ece6a;">"Full-Stack Web App",
    style="color:#9ece6a;">"Mobile Application (iOS/Android)",
    style="color:#9ece6a;">"Cloud & DevOps Migration",
    style="color:#9ece6a;">"Enterprise AI & Automation",
    style="color:#9ece6a;">"UI/UX Design & Architecture",
  ];

  const budgetTiers = [style="color:#9ece6a;">"$10k - $25k", style="color:#9ece6a;">"$25k - $50k", style="color:#9ece6a;">"$50k - $100k", style="color:#9ece6a;">"$100k+"];
  const timelines = [style="color:#9ece6a;">"< 1 Month", style="color:#9ece6a;">"2 - 3 Months", style="color:#9ece6a;">"3 - 6 Months", style="color:#9ece6a;">"Flexible"];

  const handleSubmit = async (e: React.FormEvent<style="color:#f7768e;font-weight:600;">HTMLFormElement>) => {
    e.preventDefault();
    setStatus(style="color:#9ece6a;">"loading");
    setErrorMessage(style="color:#9ece6a;">"");

    try {
      const response = await fetch(style="color:#9ece6a;">"https:style="color:#565f89;font-style:italic;style="color:#9ece6a;">">//api.backforms.com/f/YOUR_FORM_ID", {
        method: style="color:#9ece6a;">"POST",
        headers: {
          style="color:#9ece6a;">"Content-Type": style="color:#9ece6a;">"application/json",
          Accept: style="color:#9ece6a;">"application/json",
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error(style="color:#9ece6a;">"Unable to transmit quote request. Please try again.");
      }

      setStatus(style="color:#9ece6a;">"success");
    } catch (err: unknown) {
      setStatus(style="color:#9ece6a;">"error");
      setErrorMessage(err instanceof Error ? err.message : style="color:#9ece6a;">"Something went wrong.");
    }
  };

  return (
    <style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"w-full max-w-xl mx-auto bg-[#12161f] rounded-2xl p-6 sm:p-8 text-zinc-200 border border-slate-700/60 shadow-[-2px_-2px_12px_rgba(255,255,255,0.02),6px_6px_20px_rgba(0,0,0,0.8)]">
      <style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"mb-6">
        <style="color:#f7768e;font-weight:600;">h3 className=style="color:#9ece6a;">"text-xl sm:text-2xl font-bold text-white tracking-tight">
          Request a Project Quote
        </style="color:#f7768e;font-weight:600;">h3>
        <style="color:#f7768e;font-weight:600;">p className=style="color:#9ece6a;">"text-xs text-zinc-400 mt-1 leading-relaxed">
          Tell us about your project requirements and budget. Receive a detailed architectural estimate within 24 hours.
        </style="color:#f7768e;font-weight:600;">p>
      </style="color:#f7768e;font-weight:600;">div>

      {status === style="color:#9ece6a;">"success" ? (
        <style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"py-8 px-4 bg-[#161b26] rounded-xl border border-slate-700/80 text-center space-y-4 shadow-inner">
          <style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"size-12 mx-auto rounded-full bg-emerald-950/70 border border-emerald-500/40 flex items-center justify-center text-emerald-400 shadow-md">
            <style="color:#f7768e;font-weight:600;">Check className=style="color:#9ece6a;">"size-6 stroke-[2.5]" />
          </style="color:#f7768e;font-weight:600;">div>
          <style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"space-y-1">
            <style="color:#f7768e;font-weight:600;">h4 className=style="color:#9ece6a;">"text-lg font-bold text-white">Quote Request Received</style="color:#f7768e;font-weight:600;">h4>
            <style="color:#f7768e;font-weight:600;">p className=style="color:#9ece6a;">"text-xs text-zinc-300 max-w-md mx-auto leading-relaxed">
              Thank you, {formData.name || style="color:#9ece6a;">"Partner"}. Our solutions architect will review your {formData.service} requirements ({formData.budget}) and send a proposal to {formData.email}.
            </style="color:#f7768e;font-weight:600;">p>
          </style="color:#f7768e;font-weight:600;">div>
        </style="color:#f7768e;font-weight:600;">div>
      ) : (
        <style="color:#f7768e;font-weight:600;">form onSubmit={handleSubmit} className=style="color:#9ece6a;">"space-y-4">
          {style=style="color:#9ece6a;">"color:#565f89;font-style:italic;">/* Honeypot Spam Trap */}
          <style="color:#f7768e;font-weight:600;">input type=style="color:#9ece6a;">"text" name=style="color:#9ece6a;">"_gotcha" tabIndex={-1} autoComplete=style="color:#9ece6a;">"off" className=style="color:#9ece6a;">"hidden" />

          {style=style="color:#9ece6a;">"color:#565f89;font-style:italic;">/* Primary Service */}
          <style="color:#f7768e;font-weight:600;">div>
            <style="color:#f7768e;font-weight:600;">label htmlFor=style="color:#9ece6a;">"quote-srv" className=style="color:#9ece6a;">"block text-xs font-medium text-zinc-300 mb-1.5">
              Primary Service or Architecture Required
            </style="color:#f7768e;font-weight:600;">label>
            <style="color:#f7768e;font-weight:600;">select
              id=style="color:#9ece6a;">"quote-srv"
              name=style="color:#9ece6a;">"service"
              value={formData.service}
              onChange={(e) => setFormData({ ...formData, service: e.target.value })}
              className=style="color:#9ece6a;">"w-full bg-[#181d28] text-zinc-100 border border-slate-700/80 rounded-lg px-3 py-2 text-xs shadow-[inset_1px_1px_3px_rgba(0,0,0,0.6)] focus:outline-none focus:border-emerald-400 transition-colors"
            >
              {services.map((s) => (
                <style="color:#f7768e;font-weight:600;">option key={s} value={s}>
                  {s}
                </style="color:#f7768e;font-weight:600;">option>
              ))}
            </style="color:#f7768e;font-weight:600;">select>
          </style="color:#f7768e;font-weight:600;">div>

          {style=style="color:#9ece6a;">"color:#565f89;font-style:italic;">/* Tactile Budget Range Pills */}
          <style="color:#f7768e;font-weight:600;">div>
            <style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"flex items-center justify-between text-xs font-medium text-zinc-300 mb-2">
              <style="color:#f7768e;font-weight:600;">span>Estimated Investment Budget</style="color:#f7768e;font-weight:600;">span>
              <style="color:#f7768e;font-weight:600;">span className=style="color:#9ece6a;">"text-emerald-400 font-bold">{formData.budget}</style="color:#f7768e;font-weight:600;">span>
            </style="color:#f7768e;font-weight:600;">div>
            <style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"grid grid-cols-2 sm:grid-cols-4 gap-2">
              {budgetTiers.map((tier) => (
                <style="color:#f7768e;font-weight:600;">button
                  key={tier}
                  type=style="color:#9ece6a;">"button"
                  onClick={() => setFormData({ ...formData, budget: tier })}
                  className={`py-2 px-2 text-xs rounded-lg border text-center transition-all cursor-pointer font-medium ${
                    formData.budget === tier
                      ? style="color:#9ece6a;">"bg-emerald-400 text-zinc-950 border-emerald-300 font-bold shadow-[inset_1px_1px_3px_rgba(0,0,0,0.6),inset_-1px_-1px_2px_rgba(255,255,255,0.04)]"
                      : style="color:#9ece6a;">"bg-[#181d28] text-zinc-300 border-slate-700/70 shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),2px_2px_5px_rgba(0,0,0,0.6)] hover:text-white"
                  }`}
                >
                  {tier}
                </style="color:#f7768e;font-weight:600;">button>
              ))}
            </style="color:#f7768e;font-weight:600;">div>
          </style="color:#f7768e;font-weight:600;">div>

          {style=style="color:#9ece6a;">"color:#565f89;font-style:italic;">/* Client Details (2 cols) */}
          <style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"grid grid-cols-1 sm:grid-cols-2 gap-3.5">
            <style="color:#f7768e;font-weight:600;">div>
              <style="color:#f7768e;font-weight:600;">label htmlFor=style="color:#9ece6a;">"quote-name" className=style="color:#9ece6a;">"block text-xs font-medium text-zinc-300 mb-1">
                Full Name
              </style="color:#f7768e;font-weight:600;">label>
              <style="color:#f7768e;font-weight:600;">input
                id=style="color:#9ece6a;">"quote-name"
                name=style="color:#9ece6a;">"name"
                type=style="color:#9ece6a;">"text"
                required
                placeholder=style="color:#9ece6a;">"Sarah Jenkins"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                className=style="color:#9ece6a;">"w-full bg-[#181d28] text-zinc-100 border border-slate-700/80 rounded-lg px-3 py-2 text-xs placeholder:text-zinc-500 shadow-[inset_1px_1px_3px_rgba(0,0,0,0.6)] focus:outline-none focus:border-emerald-400 transition-colors"
              />
            </style="color:#f7768e;font-weight:600;">div>

            <style="color:#f7768e;font-weight:600;">div>
              <style="color:#f7768e;font-weight:600;">label htmlFor=style="color:#9ece6a;">"quote-email" className=style="color:#9ece6a;">"block text-xs font-medium text-zinc-300 mb-1">
                Work Email
              </style="color:#f7768e;font-weight:600;">label>
              <style="color:#f7768e;font-weight:600;">input
                id=style="color:#9ece6a;">"quote-email"
                name=style="color:#9ece6a;">"email"
                type=style="color:#9ece6a;">"email"
                required
                placeholder=style="color:#9ece6a;">"sarah@acme-corp.com"
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className=style="color:#9ece6a;">"w-full bg-[#181d28] text-zinc-100 border border-slate-700/80 rounded-lg px-3 py-2 text-xs placeholder:text-zinc-500 shadow-[inset_1px_1px_3px_rgba(0,0,0,0.6)] focus:outline-none focus:border-emerald-400 transition-colors"
              />
            </style="color:#f7768e;font-weight:600;">div>
          </style="color:#f7768e;font-weight:600;">div>

          {style=style="color:#9ece6a;">"color:#565f89;font-style:italic;">/* Project Overview */}
          <style="color:#f7768e;font-weight:600;">div>
            <style="color:#f7768e;font-weight:600;">label htmlFor=style="color:#9ece6a;">"quote-brief" className=style="color:#9ece6a;">"block text-xs font-medium text-zinc-300 mb-1">
              Project Overview &amp; Requirements
            </style="color:#f7768e;font-weight:600;">label>
            <style="color:#f7768e;font-weight:600;">textarea
              id=style="color:#9ece6a;">"quote-brief"
              name=style="color:#9ece6a;">"projectBrief"
              rows={3}
              required
              placeholder=style="color:#9ece6a;">"Describe what you want to build and target integrations..."
              value={formData.projectBrief}
              onChange={(e) => setFormData({ ...formData, projectBrief: e.target.value })}
              className=style="color:#9ece6a;">"w-full bg-[#181d28] text-zinc-100 border border-slate-700/80 rounded-lg px-3 py-2 text-xs placeholder:text-zinc-500 shadow-[inset_1px_1px_3px_rgba(0,0,0,0.6)] focus:outline-none focus:border-emerald-400 transition-colors resize-none"
            />
          </style="color:#f7768e;font-weight:600;">div>

          {status === style="color:#9ece6a;">"error" && (
            <style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"flex items-center gap-2 p-3 bg-red-950/40 border border-red-500/30 rounded-lg text-xs text-red-400">
              <style="color:#f7768e;font-weight:600;">AlertCircle className=style="color:#9ece6a;">"size-4 shrink-0" />
              <style="color:#f7768e;font-weight:600;">span>{errorMessage}</style="color:#f7768e;font-weight:600;">span>
            </style="color:#f7768e;font-weight:600;">div>
          )}

          <style="color:#f7768e;font-weight:600;">button
            type=style="color:#9ece6a;">"submit"
            disabled={status === style="color:#9ece6a;">"loading"}
            className=style="color:#9ece6a;">"w-full mt-2 bg-emerald-400 hover:bg-emerald-300 text-zinc-950 font-bold text-xs py-2.5 px-4 rounded-lg shadow-[-1px_-1px_4px_rgba(255,255,255,0.04),3px_3px_8px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer disabled:opacity-60 flex items-center justify-center gap-2"
          >
            <style="color:#f7768e;font-weight:600;">Calculator className=style="color:#9ece6a;">"size-4 shrink-0" />
            <style="color:#f7768e;font-weight:600;">span>{status === style="color:#9ece6a;">"loading" ? style="color:#9ece6a;">"Transmitting RFQ..." : style="color:#9ece6a;">"Request Detailed Project Quote"}</style="color:#f7768e;font-weight:600;">span>
            <style="color:#f7768e;font-weight:600;">ArrowRight className=style="color:#9ece6a;">"size-3.5" />
          </style="color:#f7768e;font-weight:600;">button>
        </style="color:#f7768e;font-weight:600;">form>
      )}
    </style="color:#f7768e;font-weight:600;">div>
  );
}
Replace YOUR_FORM_ID with your Backforms key

Connect this component to your Backforms endpoint

Create a free form endpoint in under 30 seconds. Zero backend servers or databases required.

Get Free Endpoint Key

Frequently Asked Questions & Technical Integration

How are project quote inquiries routed to our sales or solutions team?

Backforms automatically dispatches every quote request submission to your designated email addresses and forwards webhook payloads directly to Slack, Discord, HubSpot, or Salesforce in <15ms.

Can Backforms trigger automated quote confirmation emails to clients?

Yes! You can configure a customized HTML autoresponder in Backforms settings with your scheduling link (e.g. Calendly, Cal.com) and an initial estimate confirmation receipt.

Does this template include honeypot spam protection?

Yes, an invisible _gotcha input is built into the form markup, protecting your lead pipeline from automated scrapers and spam submissions without requiring intrusive captchas.