Lead Generation

Contact Form Examples: 15 Real Forms and Samples to Copy

Contact form examples show which fields real businesses ask for and why. Below are 15 contact forms from brands such as K18, Klaviyo, Semrush, Basecamp and GOV.UK, each with its exact field list and what to copy, plus sample field sets for general, sales, support, quote, partnership and event forms.

AI summarygeneral summary

Contact form examples and samples: what a website contact form is, sample field sets for general, sales, support, quote, partnership and event forms, 15 real forms from brands such as K18, Klaviyo, Semrush, GOV.UK and Basecamp with their exact fields (14 checked on their live pages in October 2026), how to build a popup contact form in Popupsmart, placement and design practices, and common mistakes.

Article facts

Written by
Ece Sanan
Reviewed by
Berna Partal
Published
November 7, 2024
Updated
October 10, 2026
Sections
10
Sources
3 cited

31 min read

Our editorial standardsHow we research, source and update every post.
Contents31 min read
  1. What Is a Website Contact Form?
  2. Contact form samples to copy, by form type
  3. Why Contact Form Design Matters
  4. Key Elements of a High-Converting Contact Form
  5. 15 Website Contact Form Examples
    1. 1. K18: Order Support Inquiry Form
    2. 2. NYX Cosmetics: Customer Care Form With Hours of Operation
    3. 3. Salesforce: two-step newsletter sign-up
    4. 4. Bloomreach: Sales Inquiry With Smart Dropdown Routing
    5. 5. Kirrin Finch: Apparel Brand Standard Contact
    6. 6. Rothy's: Eco-Fashion Support With Phone Fallback
    7. 7. Artisaire: Artisan Brand With Contact Channel Choice
    8. 8. Bloom & Wild: business gifting enquiry form
    9. 9. Semrush: demo request with the payoff beside it
    10. 10. Klaviyo: Customer Support Form With Account Lookup
    11. 11. Semrush: Sales Inquiry Form With Company Context
    12. 12. GOV.UK: a feedback form that says what it can't do
    13. 13. Basecamp: a support form written as questions
    14. 14. Bloomreach: Newsletter Signup With Social Proof
    15. 15. Davines: Partnership Inquiry Form
  6. How to build a popup contact form in Popupsmart in 7 steps
    1. Step 1: Add the Embed Code to Your Site
    2. Step 2: Pick a "Collect Form Submission" Template
    3. Step 3: Open the Selected Template
    4. Step 4: Add the Form Fields You Need
    5. Step 5: Add a Privacy and Consent Checkbox
    6. Step 6: Set URL Targeting
    7. Step 7: Connect Integrations
  7. Best Practices for Contact Form Placement and Design
  8. Common Contact Form Mistakes to Avoid
  9. Audit Your Contact Form This Week
  10. Frequently Asked Questions
    1. What are the best practices for a high-converting contact form?
    2. How can I optimize my contact us page for mobile users?
    3. What elements should I include in my contact form design?
    4. How do I track submissions from my contact form?
    5. How many fields should a contact form have?
    6. Where should I put a contact form on my website?

A cover image with the title "15 Contact Form Examples (With Tips for Creating Your Own)" and visualization of contact notebook on the right.

What Is a Website Contact Form?

A website contact form is an embedded form that lets visitors send their name, email, message, and any extra context straight to your inbox or CRM without opening a separate mail client. It sits on a contact page, in a footer, inside a popup, or on a help page, and most forms collect three to seven fields: name, email, subject, message, and sometimes a topic dropdown or phone number.

Submissions get routed to a help desk, sales tool, or marketing platform depending on the use case. A good contact form removes friction (autofill, single column, real-time validation), proves trust (privacy text, response-time promise), and routes the lead correctly so nobody waits five days for a reply.

That sounds simple. The execution is where most teams lose conversions, and it's exactly what the examples below get right.

Contact form samples to copy, by form type

These sample contact forms are field sets you can lift as they are: each contact form sample in the table comes the patterns in the 15 examples further down: the fields the brands ask for, the dropdown options that route a message, and what to leave out. Read them as contact form ideas for six jobs, not as a rule that every form needs every field.

Form type Fields to ask for Subject or topic dropdown Leave out
General contact Name, email, subject (dropdown), message, privacy notice Question, Feedback, Press, Other Phone, company, job title
Sales inquiry First and last name, work email, company, company size (dropdown), phone (optional), message Pricing, Demo, Partnership, Other Budget fields on the first form
Support request Name, email, topic (dropdown), order or account number (optional), message, file upload (optional) Order status, Returns, Damaged item, Billing, Other Marketing checkboxes
Quote or enquiry Name, email, company (optional), phone (optional), what you need (description), quantity or date Product or service type A price field the visitor can't answer yet
Partnership Name, email, company, website, partnership type (dropdown), message Reseller, Affiliate, Wholesale, Other Anything you'd only ask after a first call
Event registration Name, email, company and role (optional), session or date choice, access needs (optional) Session or ticket type Phone, unless you send text reminders

Two lines go on every one of these forms: a short privacy notice next to the button that links your policy, and, only if you want to send marketing, a separate checkbox that starts unticked. When you're ready to build one, the HTML code and the WordPress, Shopify, Wix and Squarespace steps are in our guide on how to add a contact form to a website.

Info
Pro Tip: A subject dropdown is cheaper for the visitor than a subject line, and it routes the message for you. Four to six options plus "Other" is enough; K18, Rothy's, Artisaire and Klaviyo all work this way in the examples below.

Why Contact Form Design Matters

Form performance is a measurable line item, not a vibe. Zuko, a form-analytics company, reports from the forms it tracks that only 38% of users who interact with a contact form end up submitting it, according to its conversion rate statistics. Most of the people who start your form never reach you.

What happens after the submit button counts too. Chili Piper's 2025 form conversion report, built on about 4 million mostly B2B form submissions from 2024, found that 66.7% of qualified form fills turned into booked meetings when people could schedule a meeting straight after submitting, against what it calls an industry average of 30%. The method and the full data set are in Chili Piper's report.

So the design decisions you make on a single page (field count, label placement, post-submit flow) decide how many of the people who start your form actually get a reply. The 15 examples below are the patterns in the brands that get this right.

Key Elements of a High-Converting Contact Form

Before the examples, here's what the strongest forms on the list share. These are the eight elements to check first when you audit a contact page.

• A short, scoped field set: Three to five fields covers most contact use cases. Every field you add is one more reason to stop, so cut anything you would not act on inside 24 hours.

Info
By the Numbers: In popups, Popupsmart's 2026 popup benchmark found that popups asking for one or two fields convert 0.88% and 0.94%, against 0.56% for three fields (median campaign; spin-to-win and other gamified popups are counted separately). Those rates are per popup display, so they describe popup forms, not the form on your contact page.

• Labels above fields, not floating placeholders only: Placeholders disappear once typing starts, which forces users to remember what each field asked. Persistent labels stop the second-guessing and reduce error rates on mobile.

• One column, never two: Two-column forms feel compact but actually slow users down because the eye zigzags. A single column reads top to bottom and works on every screen size.

• Real-time inline validation: Show the green check or the red error message as the user leaves the field, not after they hit submit. Users fix issues while context is fresh.

• A topic or reason-for-inquiry dropdown: A four-to-six option dropdown routes the message to the right team without forcing the user to write a long subject line. It also lets you trigger conditional fields (order number for support, company size for sales) only when relevant.

• A specific, action-oriented button: "Send My Message" or "Get My Quote" tells people what happens when they click; "Submit" doesn't. The button copy should restate the value, not the action.

• Visible trust signals near the submit button: A privacy line, a response-time promise ("We reply within one business day"), or a small lock icon does more work than any badge in the footer. These elements sit where the hesitation peaks.

• A real confirmation, not a vanish: After submission, show a confirmation panel with what happens next, optional links to documentation or a calendar booking, and the original message echoed back. Replacing the form with blank space looks broken.

If you want a deeper field-by-field breakdown, our guide on lead capture forms walks through each component. For longer flows, multi-step forms let you split a 10-field beast into three painless steps.

15 Website Contact Form Examples

These 15 contact form examples cover e-commerce support, B2B sales, newsletters, quotes, partnerships and site feedback. We checked each form on the brand's live page in October 2026 and list its fields as the form shows them. One brand, NYX, blocks automated visits, so its entry uses our November 2024 capture and says so. Each example below covers what the form does, why the structure works, and the one thing you should steal for your own page.

# Brand Form type What to copy
1 K18 Support Topic dropdown plus optional order number
2 NYX Cosmetics Customer care Support hours above the form
3 Salesforce Newsletter Topics first, email second
4 Bloomreach Sales and general Pick a reason before the form appears
5 Kirrin Finch General contact Four fields, nothing more
6 Rothy's Support Optional file upload for photos
7 Artisaire Support Chat, email and phone beside the form
8 Bloom & Wild Quote enquiry One description field for the brief
9 Semrush Demo request What you get, next to the form
10 Klaviyo Account support Account details separate from the reply address
11 Semrush Sales inquiry A separate form for sales
12 GOV.UK Site feedback Say what the form can't do
13 Basecamp Support Labels written as questions
14 Bloomreach Newsletter One field, persuasive panel
15 Davines Partnership Qualify partners before the call
Note
Quick Insight: Semrush, Bloomreach and Davines each run more than one form, one per audience. That's why this list has two Semrush forms and two Bloomreach forms: compare each brand's sales form with its other one.

1. K18: Order Support Inquiry Form

K18 hair care contact form with name, email, optional phone, topic dropdown, optional order number, salon name and message fields
K18's support form, captured November 2024; the fields matched the live page in October 2026.

What it does: K18's support form asks for first and last name and email, then an optional phone number and a required topic dropdown ("Select your topic") with six choices: Order Status, Product Information, Damaged or Missing Product, Shipping, Professional Account Inquiry and Other. An optional order number field and a "Salon Name (if applicable)" field come next, then the message. Beside the form, K18 sets the reply window: "please allow 24 hours during business hours for a reply," with business hours of Monday to Friday, 9am to 5pm PT.

Why it works: The topic dropdown is doing routing work that would otherwise sit on K18's support team. By collecting the order number only when it matters, the form respects users who are asking about ingredients or refills and do not have an order to reference, and the salon-name field does the same for professionals. The 24-hour line next to the form removes the "did this go through?" anxiety before anyone types a word.

Key takeaway: Use a topic dropdown to route inquiries, and make context fields like an order number optional. You still collect the right context per request type without blocking people who don't have it.

2. NYX Cosmetics: Customer Care Form With Hours of Operation

NYX Professional Makeup contact form with hours of operation above two-column name, email, phone, subject and order number fields
NYX's customer care form, captured November 2024. The live page blocked our automated check in October 2026.

What it did: When we captured it in November 2024, NYX put its customer care hours above the form: phone and email from 9AM to 8PM EST, live chat from 10AM to 8PM EST, and the holidays it closes. A small line said required fields are marked with an asterisk. The fields sat in two columns: first and last name, email, phone, a subject dropdown and an optional order number, then a message box limited to 3,500 characters. A paragraph on how NYX uses the data sat between the message and the Send Message button.

Why it works: Listing the support hours upfront pre-empts the "why has nobody replied?" frustration when someone submits at 11pm on a Saturday. The data-handling note doubles as a trust signal without dragging users to a separate privacy page. The two-column layout breaks the one-column rule above, though: the pairs are related (first and last name, email and phone), which makes them easier to scan than unrelated fields side by side.

Key takeaway: Tell users when they will hear back and how their data is used in two short lines above the first field. Trust-building copy belongs at the entry point, not buried in the fine print.

3. Salesforce: two-step newsletter sign-up

Salesforce newsletter sign-up step one with eight newsletter cards to tick, each showing a monthly or biweekly frequency Salesforce newsletter step two asking only for email and country, with a consent line, Subscribe button and Step 2 of 2 label
Salesforce's newsletter sign-up, steps one and two, captured October 2026.

What it does: Salesforce splits its newsletter sign-up into two steps. Step one lists eight newsletters as cards with checkboxes, each with its frequency: Sales, Service, Marketing, IT, Commerce, Developer and Admin go out monthly, 360 Highlights biweekly. Step two, "Let us know where to send it," asks for just an email and a country or region (prefilled from the visitor's location), with a consent line, a Subscribe button and a "Step 2 of 2" label.

Why it works: Most newsletter forms ask for too little (just email, no segmentation) or too much (10 fields for a free PDF). Salesforce gets the balance right by letting the reader do the segmenting: ticking topics is the segmentation, and it costs no typing. The email field arrives only after the visitor has chosen what they want, so it reads as the last step of a choice, not a toll. Nothing is collected for the sake of a CRM record.

Key takeaway: If you ask for an extra field, you should be able to name the email or workflow that uses it. Newsletter forms can carry segmentation work, but only if every field maps to a downstream send.

4. Bloomreach: Sales Inquiry With Smart Dropdown Routing

Bloomreach contact page asking What Can We Help You With with four cards for sales, HR, a general inquiry and partnerships Bloomreach sales contact form with a reason dropdown, name, business email, phone, country, referral source and message fields
Bloomreach's contact page and the form behind its Sales card, captured October 2026.

What it does: Bloomreach's contact page asks "What Can We Help You With?" and shows four cards before any field appears: contact sales, contact HR, a general inquiry, or a partnership. Sales and general inquiries open the same form, with a dropdown at the top that can still switch the reason, then first and last name, business email, phone number, country, "How did you hear about Bloomreach?" and an optional message. The partnership card opens a different form that asks for job title, partner company name and partner website. Below it all, an email address for general inquiries catches anyone who'd rather write directly.

Why it works: One page replaces what most B2B sites split across three or four landing pages (demo, sales, press, partnerships). Visitors land in one place, self-select, and never see fields meant for someone else. That cuts cognitive load and keeps the routing logic in marketing's hands instead of forcing engineering to build a separate page per use case. The cost is the required "How did you hear about Bloomreach?" field, which serves attribution more than the visitor.

Key takeaway: Let visitors pick their reason first, from cards or a single dropdown, and show only the fields that reason needs. You ship faster, route better, and avoid the SEO mess of half-baked single-purpose pages.

5. Kirrin Finch: Apparel Brand Standard Contact

Kirrin Finch contact form with name, email, phone and comment fields and a Submit button, no heading or intro text
Kirrin Finch's contact form, captured October 2026.

What it does: Kirrin Finch runs Shopify's plain contact form: name, email (the only required field), phone and a comment box, then Submit. In October 2026 there's no heading, intro copy or reply-time line above it; the page goes straight from the navigation to the fields.

Why it works: Apparel customers usually contact a brand for sizing, returns, or restock questions: three use cases that fit a free-form message field better than a dropdown maze. Stripping the form down to four fields removes the friction that bigger e-commerce sites pile on for routing they could handle in support tooling. What's missing is a voice. Nothing tells the shopper who reads the message or when they'll hear back, the exact line K18 and Artisaire put next to their forms.

Key takeaway: If your support team can route messages from the body text alone, you do not need a topic dropdown. Skip it, and add one sentence that says who replies and when.

6. Rothy's: Eco-Fashion Support With Phone Fallback

Rothy's contact form with inquiry type dropdown, name, email, optional phone, message and a file attachment box
Rothy's support form, captured November 2024; the fields matched the live page in October 2026.

What it does: Rothy's combines a required Inquiry Type dropdown with eight options, from General Product Question and Returns/Exchanges to Wholesale Inquiries, with a required name and email, an optional phone field, the message, and an attachments box that takes JPG, JPEG, PNG, GIF and PDF files. Customers contacting about a defect can upload a photo of the damage right inside the form.

Why it works: The optional phone field gives a customer with a complicated return a way to be called instead of trading long email threads, without forcing a number on everyone else. The attachment field cuts the typical photo-by-email back-and-forth that frustrates both sides. By marking these fields optional rather than required, Rothy's avoids punishing users who only want a simple text reply.

Key takeaway: Add a file upload field if your team would otherwise ask for a photo over email. One upfront upload saves a whole reply cycle.

7. Artisaire: Artisan Brand With Contact Channel Choice

Artisaire wax seal brand contact form with name, email, an I Need Help dropdown and message, beside chat and email links
Artisaire's contact page, captured November 2024; the form matched the live page in October 2026.

What it does: Artisaire's contact page pairs a four-field form (name, email, an "I Need Help" dropdown with My Order, Product Questions, Volume/Specialty Order and Other, and a message) with its other channels right next to it: a Start Chat link, a care email address, a phone number and its postal address. A line above the form promises a reply "within 1 business day."

Why it works: Some users will never fill a form, no matter how short it is. Putting chat and email in the same visual block means you do not lose those people to the back button. The channel choice also smooths out support load. Quick "do you ship to Canada?" questions go to chat, specialty orders go through the form. The brand-aligned visual treatment keeps everything feeling like one experience instead of three different help systems bolted together.

Key takeaway: List your alternative contact channels next to the form, not at the bottom of a sidebar. Chat and email options pick up users who would otherwise leave.

8. Bloom & Wild: business gifting enquiry form

Bloom and Wild business gifting enquiry form with full name, email, company, phone and a gifting needs description below a How it works list
Bloom & Wild's business gifting enquiry form, captured October 2026.

What it does: Bloom & Wild's business page explains the process before the form under "How it works": set up an account, order online with an exclusive discount, or, for bulk orders, "let us know below and we'll organise it all for you," with a phone number for anyone who'd rather call. The enquiry form asks for full name, email, company name, phone number and "A quick description of your gifting needs," then a checkbox ("By passing over these details you agree to us contacting you") and a Get in touch button.

Why it works: A quote or bulk-order enquiry can't be priced from a form, and this one doesn't pretend otherwise. One open description field collects the brief, and a person takes it from there. The steps above the form tell a business buyer what happens after they click, which is the question that stops most people on an enquiry form. If you searched for enquiry form examples, this is the pattern: contact details, one open field, a clear next step.

Key takeaway: For quote and bulk-order enquiries, keep the form to contact details plus one description field, and explain the next step above it.

9. Semrush: demo request with the payoff beside it

Semrush demo request page with three listed benefits on the left and a form for name, business email, country, phone and company size
Semrush's demo request form, captured October 2026.

What it does: Semrush's demo request page puts the form on the right and the reason to fill it in on the left: "Join us for a free demo," with three checked benefits, from meeting "your dedicated Semrush expert" to a follow-up email with resources for your needs. The form ("Fill in the request") asks for first and last name, business email, country, a contact phone number and company size, with a label above every field, an unticked checkbox for Semrush news and a single Request button.

Why it works: The benefit list answers "what do I get for my phone number?" before the visitor reaches the phone field. Company size is the only qualification question, and it's a dropdown, so it costs a click, not typing. Keeping it short signals the form is a real channel, not a black hole.

Key takeaway: Put what the visitor gets next to a sales form, not under it, and keep qualification to one or two dropdowns.

10. Klaviyo: Customer Support Form With Account Lookup

Klaviyo account access request form with issue dropdown, name, account name, account email, additional recipients, website URL and description
Klaviyo's account access request form, captured October 2026.

What it does: Klaviyo's account access form, on its help center, starts with an Issue dropdown (Account disabled, Forgot password, Invoice inquiry, Multifactor authentication support, Setting up a new device, Update account owner). It then asks for your name, the account name, the Klaviyo account email address, optional additional recipients, the website URL and "What do you need help with?"

Why it works: Asking for the account name and the email on the account upfront solves a real support headache: people often write from a different address than the one on the account, and someone locked out may not have access to it at all. Those fields let the support team pull up the account on the first reply instead of asking "can you tell me which account this is about?" and burning a day. The additional recipients field keeps a colleague in the loop without forwarding.

Key takeaway: If your product has accounts, ask for the account details separately from the reply address. It is a single extra field that eliminates one full reply cycle.

11. Semrush: Sales Inquiry Form With Company Context

Semrush sales inquiry form with placeholder-only fields for name, business email, country, company, phone, company size and needs
Semrush's sales inquiry form, captured October 2026.

What it does: Semrush runs a separate sales-inquiry form that asks for first name, last name, business email, country, company name, phone number, company size (1-99, 100-250, 251-999 or 1000+ employees) and a required message: "Tell us about your needs and our team will find the perfect solution for you!" A news opt-in checkbox sits unticked above the Submit button.

Why it works: This is a different form for a different funnel. That distinction matters. By separating sales from general contact, Semrush can ask qualification questions that would feel intrusive on a normal contact page. Company size is the field that decides which sales team a lead goes to, so collecting it upfront skips a discovery question. The opt-in box is where it should be: unticked, not a pre-checked default. Two things to avoid copying: the fields show placeholders but no visible labels, so a field's name disappears once someone starts typing, and the legal line reads "By clicking Request Demo" above a button that says Submit.

Key takeaway: Build a separate sales form rather than overloading your general contact form, and give every field a label that stays visible.

12. GOV.UK: a feedback form that says what it can't do

Contact GOV.UK form explaining what it is for, with a whole site or specific page choice, a details box and optional reply details
GOV.UK's contact form, captured October 2026.

What it does: GOV.UK's contact form opens by saying what it's for (issues with the GOV.UK website: a question, a problem or a suggestion) and what it can't do: "We can't reply to you with advice," and the team has no access to information government departments hold about you. Then comes a choice ("What's it to do with?": the whole site or a specific page), a details box with an example hint and a warning not to include personal or financial information, and a 1,200-character counter. Name and email come last, under "If you want a reply (optional)," with the line "We'll only use this to reply to your message."

Why it works: Saying what the form can't do filters out the messages it can't help with before anyone writes them. It also points those people somewhere useful. Making contact details optional lowers the bar for a two-line bug report. The warning about personal data sits right above the box where people would type it, which is the only place it can do its job.

Key takeaway: Tell people what your form is not for, and make contact details optional when you don't need to reply.

13. Basecamp: a support form written as questions

Basecamp support form with question-style labels and helper text for the issue type, message, file upload, email and account URL
Basecamp's support form, captured October 2026.

What it does: Basecamp's support form ("Friendly folks, standing by") writes every label as a question with a one-line reason under it: "What do you need help with? This helps make sure you get the right answer fast." The fields are a reason dropdown with eight options, from "I can't access my account" to "I think something is broken," the message, an optional file upload for a screenshot or document, the email address ("This is where we'll get back to you. Double check that it's right.") and an optional account URL with an example. Required fields carry a green REQUIRED tag, and the intro line promises: "We read and respond to every message."

Why it works: Each helper line answers the question a hesitant person has at that exact field: why you want it, and what happens if they get it wrong. The email hint heads off the most common support failure, a reply sent to a mistyped address. Marking required fields with a tag instead of an asterisk makes the optional ones obvious.

Key takeaway: Write labels the way you'd ask in person, and add one short line explaining why you need the field.

14. Bloomreach: Newsletter Signup With Social Proof

Bloomreach blog newsletter signup with three reader avatars, a headline about competitors reading the emails and one business email field
Bloomreach's blog newsletter signup, captured October 2026.

What it does: Bloomreach's blog signup is a single field, business email, next to a Subscribe button. The panel beside it does the persuading, with three reader avatars and the headline "Your competitors are reading these emails. Shouldn't you?" A privacy paragraph and a reCAPTCHA notice sit under the field.

Why it works: Form copy can only do so much. Putting faces and a peer-pressure headline inside the same visual block as the form gives hesitant users the nudge they need to type their email. The "your peers already read this" effect is hard to manufacture inside the form fields themselves, so the design lets the surrounding context carry the trust load. It also explains why the form gets away with a single email field: the headline has already done the convincing.

Key takeaway: Keep your newsletter form to one field and let the panel around it do the persuading. The form stays short, the page does the selling.

15. Davines: Partnership Inquiry Form

Davines Become a Davines Salon application form with business, address, staff, product line and preferred contact method fields
Davines' salon partnership form, captured October 2026.

What it does: Davines splits its contact page into three tabs: Contact Us, I'm a Professional and Become a Davines Salon. The salon tab is a full application: name, email and phone numbers, company name with a "Future opening" checkbox, position, website and Instagram business page, the business address, number of employees, who the salon's operators are, how they heard about Davines, what they like most about it, whether they're considering it for retail or colour, current colour and product lines, a preferred contact method (call, text, email, Instagram message or in-person visit) and a note.

Why it works: A partnership form has to filter out the wrong-fit submissions before they hit the team. Asking for location, staff size and current product lines upfront lets Davines route applications to the right region and weed out requests that do not match their channel strategy. The website and Instagram fields double as a quick credibility check, so the partnerships team can size up the prospect before booking any time. It is long, and most of those questions are required, which only works because the people filling it in want something substantial in return.

Key takeaway: For partnership and reseller forms, ask the questions you would otherwise have to ask in the first reply. Front-load the qualification so your team only takes warm calls.

How to build a popup contact form in Popupsmart in 7 steps

A popup contact form is a contact form that opens on top of the page, for example when someone clicks a "Contact us" button or reaches your pricing page, so they can ask a question without leaving. If you want to build something similar to the examples above without writing code, here is how I'd do it inside Popupsmart, which has a free plan. Popupsmart collects each submission and passes it to the tool you connect; replying happens there. We checked every step against Popupsmart's help center in October 2026; the app screenshots are from November 2024. For the full popup-form walkthrough, see how to create a popup form.

Step 1: Add the Embed Code to Your Site

Popupsmart Embed Code window with tabs for custom website, Shopify, GTM and WordPress and an instruction to paste before the closing body tag
Popupsmart's Embed Code window, captured November 2024.

After you sign up, the dashboard hands you a single embed snippet: click Embed Code in the left bar and copy it. Paste it into your site's template just before the closing </body> tag, or add it with Google Tag Manager as a Custom HTML tag that fires on all page views. From that point forward, every form you build inside Popupsmart goes live on your site without touching the code again. Then add your domain under Websites and verify it, so your popups can show on it.

Step 2: Pick a "Collect Form Submission" Template

Popupsmart template gallery filtered to Collect Form Submission templates, with form field filters such as email, phone and opinion scale
Popupsmart's template gallery, Collect Form Submission category, captured November 2024.

Click New Campaign, name it, choose the website, and you land in the template gallery. The Collect Form Submission category groups templates that already carry a form, including a contact us popup, so you can start from a layout that matches your goal instead of dragging a blank canvas; you can browse the same designs on the popup templates page. A blank template works too if you'd rather build from scratch.

Step 3: Open the Selected Template

Popupsmart Customize step with a Contact Us popup template showing email, phone and message fields and a Send button
A contact us popup template in Popupsmart's Customize step, captured November 2024.

The template loads in a visual editor, starting with the Customize step. Swap the headline copy, tweak colors to match your brand in the Style step, and resize the form panel. If you have ever used a slide editor, this is the same pattern: click an element, edit the panel on the left. Nothing here requires CSS.

Step 4: Add the Form Fields You Need

Popupsmart Add a New Element panel with form elements such as email, phone, short text, long input, dropdown and notice and consent
Popupsmart's form elements, captured November 2024.

This is where you customize for your use case. Select the Form element and click Add a new form input for each field: short text, long input for the message, email, phone, a dropdown for the topic, single or multiple choice, date, rating or opinion scale, and notice and consent (how to add form fields). Stick to the rule from the Key Elements section: every field needs a downstream use, otherwise cut it. For most contact use cases, four or five fields is the sweet spot.

In popups, Popupsmart's 2026 benchmark found that adding a name field alongside the email shows no reliable effect: the overall gap in its favour (1.25% vs 0.88% for email only) reverses among campaigns whose form rarely changed (0.74% vs 0.79%). So ask for a name when your reply uses it, not because you hope it lifts sign-ups.

Note
Quick Insight: Popupsmart's form elements don't include a file upload. If a request needs a photo or a document, like Rothy's and Basecamp's forms collect, ask for it in your reply or keep that request on your contact page form.
Popupsmart Notice and Consent input with privacy policy text and the Required toggle, shown as a checkbox above the Send button
A Notice and Consent input in Popupsmart, captured November 2024.

Add a Notice and Consent input above the submit button and link the copy to your actual privacy policy. For a reply someone asked for, a notice is enough. If you also want to add people to your newsletter, make that its own checkbox. Keep it unchecked by default. Pre-checked boxes break GDPR consent rules in the EU and look shady everywhere else; Recital 32 says "pre-ticked boxes" should not constitute consent. Turn on Required only for a box people must tick to send the message. This is general information, not legal advice.

Step 6: Set URL Targeting

Popupsmart Segment step with URL targeting set to show the popup on pages matching /contactus, plus device and visitor options
URL targeting in Popupsmart's Segment step, captured November 2024.

Pick the pages where the form should appear. In the Segment step, add URL targeting and choose specific pages. A contact form usually targets the contact page, but you can also trigger it on pricing, support docs, or specific blog posts. Combine URL rules with device targeting (mobile-only, desktop-only) and trigger conditions like exit intent, scroll depth or a click on your "Contact us" button. A form that only shows where it is relevant stays out of the way everywhere else.

Step 7: Connect Integrations

Popupsmart Integrations window listing Mailchimp, ActiveCampaign, Customer.io, Drip, EmailOctopus and Brevo
Popupsmart's integrations list, captured November 2024.

Pick where submissions should land: click Add integration and choose the tool, such as HubSpot or Salesforce for sales leads, or Mailchimp or Klaviyo for newsletter signups. To reach a tool without a direct integration, a help desk for example, use Zapier, Make or a webhook; the full list is on the integrations page. Every submission is also kept in your dashboard's Leads section, where you can export it as CSV, PDF or XLS. The integration is the difference between a form that creates a CRM record and one that creates an inbox-only message nobody acts on. Hit publish, and the form is live.

Best Practices for Contact Form Placement and Design

The form itself is half the battle. Where it sits and how it behaves on different devices decides whether anyone gets to fill it out. Get these right before you touch a single field.

Place the form where users already are. The default contact form lives on a /contact page nobody visits. Better placements: in your site footer (sitewide reach), inside a help-center sidebar (catches frustrated users), as an exit popup on pricing pages (rescues bouncing buyers), or as an inline form at the bottom of long-form blog posts. Treat the contact page as one of several entry points, not the only one.

Design for thumbs first. Mobile makes or breaks contact forms. In Zuko's 2025 industry data, 55.5% of people who start a form finish it on desktop, against 47.5% on mobile. The breakdown by sector is in Zuko's industry figures. The fix isn't a tighter mobile breakpoint. It's a different layout: bigger tap targets (minimum 44px), a single column always, native input types so the right keyboard pops up (numeric for phone, email keyboard for email), and a sticky submit button that stays visible while users scroll the message field.

Split long forms into steps. Anything over six fields is a candidate for a multi-step layout. Splitting a 12-field B2B sales inquiry into three steps of four fields each shows users a progress bar instead of a wall, and lets you collect easy fields first (name, email) before the heavier ones (budget, timeline). Our walkthrough on multi-step forms covers when and how to split.

Careful
Common Mistake: Assuming steps always help. In popups, Popupsmart's 2026 benchmark found that multi-step forms show no measurable conversion advantage over single-step forms once step-1 clicks without contact details are excluded. Test a split against the single-step version; the popup case is covered in multistep popups.

Use trust signals where hesitation lives. The hesitation moment for a contact form is right above the submit button. That is where you should put your privacy line ("We never share your email"), your response-time promise ("Replies within one business day"), and your social proof if you have it ("Join 5,000+ marketers"). Stuffing these signals at the top of the form, before the user even reads the fields, wastes them.

Match the form to the funnel stage. A top-of-funnel newsletter signup should be one field. A bottom-of-funnel demo request can ask for company size and role. Mixing these up (long form for newsletter, short form for demo) leaks both ways. The form should ask for as much as the next step justifies, no more.

Test the post-submit experience. The "thank you" screen is where you can add a calendar booking link, a downloadable PDF, or a follow-up question. Chili Piper's report above says that letting people book a meeting immediately after form fill "doubles your inbound conversion rate." A blank "we'll be in touch" screen is wasted real estate.

Common Contact Form Mistakes to Avoid

These five mistakes are easy to spot on a live form. Each one is a quick fix, too.

Mistake 1: Asking for a phone number you will not use. If your team's first response is always email, the phone field is friction with no payoff. In popups, Popupsmart's 2026 benchmark found that forms that ask for a phone number instead of an email look weakest (0.46% vs 0.88% for email only), though that gap is not statistically reliable. Either drop the field or mark it optional and stop asking for it as a required entry.

Mistake 2: Generic "Submit" button copy. "Submit" tells users nothing about what happens next. "Send My Message," "Get My Quote," or "Request a Demo" restates the value and gives the user a final cue that this is the action they wanted. Button copy is the cheapest test you will ever run.

Mistake 3: Showing all errors only after submit. Users hit submit, see five red error messages they could have caught one at a time, and bounce. Inline validation that fires on field-blur (when the user clicks out of a field) catches mistakes while context is fresh and stops the "wall of red" panic.

Mistake 4: Replacing the form with blank space after submit. The screen flashes, the form vanishes, and the user has no idea if anything went through. Replace the form with a confirmation panel that echoes back the message, gives a response-time promise, and offers a next step (book a call, browse docs, follow on social).

Mistake 5: No spam protection visible. Either you have CAPTCHA in a place that frustrates real users, or you have no spam protection and your form fills with junk submissions that bury the real ones. Use invisible reCAPTCHA or a honeypot field. Both block bots without making humans solve puzzles.

For the e-commerce specific equivalent of these patterns, opt-in page examples and gated content forms apply most of the same rules at the offer level.

Audit Your Contact Form This Week

Pick one contact form on your site and run it through the eight-element checklist above. Count the fields, check the column count, look at where the privacy line sits, and submit a test on your phone. Each fix is a 10-minute job, not a redesign.

Once you've cleaned up the existing form, build the second one. A separate sales-inquiry form, a feedback form on the help docs, an event signup tied to your email tool: each of these picks up submissions your single contact form misses. Several brands in the list above don't run one form: Semrush, Bloomreach and Davines each run separate forms for separate audiences. For forms built to collect leads rather than questions, see these lead generation form examples.

If you want to ship those forms without writing code, the seven-step walkthrough above gets a popup contact form live inside Popupsmart. Pick the template, swap the copy, drop the embed snippet, and the form starts collecting submissions as soon as you publish.

Frequently Asked Questions

What are the best practices for a high-converting contact form?

The shortlist: keep fields to the three to five you'll actually use, place labels above fields rather than relying on placeholder text, use a single column, fire inline validation as users leave each field, and write a specific submit button like "Send My Message" instead of "Submit." Add a privacy line and a response-time promise above the submit button, because that's where hesitation peaks. For longer forms (six fields and above), split into multi-step layouts with a progress bar so the length feels intentional.

How can I optimize my contact us page for mobile users?

Three changes do most of the work. First, switch to a single-column layout that doesn't reflow on mobile, because two-column desktop forms break visually on small screens. Second, set every input to use the right native type (email, tel, number) so the correct keyboard appears. Third, make tap targets at least 44px tall and keep the submit button sticky while users scroll the message field. In Zuko's 2025 industry data, 55.5% of people who start a form finish it on desktop, against 47.5% on mobile.

What elements should I include in my contact form design?

The non-negotiables: name, email, message, a submit button, and a privacy line. The high-value additions: a topic dropdown that routes inquiries (cuts triage time on the support side), conditional fields tied to that dropdown (only shows what's relevant), inline validation, a file upload if your team would otherwise ask for a photo over email, and a confirmation panel after submit. Skip phone numbers unless you actually call leads, and skip job-title fields unless you segment newsletter sends by role.

How do I track submissions from my contact form?

Set up four tracking layers and you'll cover everything. Configure a form-submit event in Google Analytics 4, which gives you source, medium, and conversion path. Pipe submissions into your CRM (HubSpot, Salesforce, or whatever you run) so the lead lives outside your inbox. Tag the form's URL with UTM parameters when you link to it from emails or social so you can see which channels drive submissions. And turn on email notifications for the team handling replies: that's the safety net for when an integration silently breaks.

How many fields should a contact form have?

Three to five for general contact, four to seven for sales inquiries, six to ten (split into steps) for custom orders or B2B qualification. The question isn't "what would be nice to know"; it's "what does the next reply absolutely require?" If you can't name the email or workflow that uses a field, cut it.

Where should I put a contact form on my website?

Put it on a dedicated contact page first, then wherever people get stuck: the site footer, a help-center sidebar, the bottom of long articles, or a popup on pricing and support pages. Treat the contact page as one entry point, not the only one, and link it from your main navigation so nobody has to search for it.

Related Articles You Might Find Useful

7 Essential Lead Capture Forms Components in 2026

Top 17 Shopify Form Examples for Creating Effective Forms

Popup Surveys: 9 Examples to Collect Feedback

Ece Sanan

Content Marketing Specialist

All posts

I'm a Content Marketing Specialist at Popupsmart. I started content writing in 2013, inspired by reading poetry and amazed by how words could create unique images in each reader's mind. Today, I bring that love for writing into my work at Popupsmart, focusing on content that truly connects with people.

Reviewed by Berna Partal