# Quote request form template A free request a quote form with service, budget and project details. Copy the HTML, CSS and JS, or use it in React, Next.js, Vue, Svelte or Astro. This form asks for the service, a budget range and the project details, so you can reply with an estimate. Company and budget are optional. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/quote-request-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Name | `name` | Short text | Yes | | Email | `email` | Email | Yes | | Company | `company` | Short text | No | | Service | `service` | Dropdown (Website design, Web development, Branding, Something else) | Yes | | Budget | `budget` | Dropdown (Under $1,000, $1,000 to $5,000, $5,000 to $20,000, Over $20,000) | No | | Project details | `details` | Long text | Yes | ## How to use it 1. Create a free form at https://app.nisuform.com and copy its form key. 2. Paste the code where the form should appear and replace `YOUR_FORM_KEY` with your key. 3. Submit the form once. The submission appears in your Nisuform inbox and you get an email. ## Styled HTML, CSS and JavaScript The form with its styles and a small script that sends it without a page reload and shows the success message. ```html

Request a quote

Tell us about your project and we’ll send an estimate within two business days.

``` ## Unstyled HTML Bare markup that picks up your own CSS. It posts without JavaScript and keeps the hidden `_gotcha` field that stops bots. ```html
``` ## Framework components ### React ```jsx import { useRef, useState } from 'react' export function QuoteRequestForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks! We’ll send your quote soon.

return (
{status === 'error' &&

Something went wrong. Please try again.

}
) } ``` ### Next.js ```jsx 'use client' import { useRef, useState } from 'react' export function QuoteRequestForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks! We’ll send your quote soon.

return (
{status === 'error' &&

Something went wrong. Please try again.

}
) } ``` ### Vue ```vue ``` ### Svelte ```svelte {#if status === 'sent'}

Thanks! We’ll send your quote soon.

{:else}
{#if status === 'error'}

Something went wrong. Please try again.

{/if}
{/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" ---
``` ## When to use it - Agencies and freelancers selling design, development or marketing - Contractors, cleaners, movers and other local services - B2B products with custom pricing - Print shops, caterers and event suppliers ## Customize it ### List your own services and prices Edit the `