Digital Marketing

How to Add a Contact Form to a Website: HTML Code, WordPress and Shopify

To add a contact form to a website, you need two parts: the form visitors fill in and a backend that receives each submission and emails it to you. An HTML form can't send email by itself, so pair it with a form service, or use your platform's built-in form in WordPress, Shopify, Wix or Squarespace.

AI summarygeneral summary

How to add a contact form to a website in October 2026: tested, accessible HTML code with a Formcarry backend, WordPress (Jetpack Form block, Contact Form 7 with Flamingo, SMTP), Shopify's contact page, Wix, Squarespace and Jotform; where submissions go, spam protection with a honeypot and Turnstile, privacy and consent, and a short Popupsmart contact popup section.

Article facts

Written by
Berna Partal
Reviewed by
Mert Özeren
Published
December 21, 2023
Updated
October 10, 2026
Sections
12
Sources
9 cited

25 min read

Our editorial standardsHow we research, source and update every post.

Having a contact form on your website is essential for building solid relationships with your audience. It offers a convenient way for website visitors to contact you, whether they want to give feedback or have questions about your goods or services. Using a contact form, you can also keep your email address safe from scammers and guarantee that all queries are collected in one location.

However, you may be unsure how to add a contact form to a website. The good news is that you have various options, and this blog post will help you navigate them. We'll explain how you can add a contact form to your website using various methods, as they work in October 2026: plain HTML with a form backend (code we built and tested), WordPress, Shopify, Wix, Squarespace and an embedded form builder. Then we cover what every form needs once it's on the page: a place for submissions to go, spam protection and a privacy notice.

Which way to add a contact form fits your site

It depends on where your site runs. A site builder already has a contact form you can switch on. A hand-coded site needs an HTML form plus a backend to receive it.

Your site Easiest way Where messages go Code needed
Hand-coded HTML or a static site HTML form + a form backend (Formcarry, Formspree, Web3Forms) The backend's dashboard and your inbox Copy and paste
WordPress Jetpack's Form block, or a plugin such as Contact Form 7 Your inbox; a stored copy only if the plugin keeps one None
Shopify The built-in contact page Your store's sender email address None (extra fields need theme code)
Wix Wix Forms Forms & Submissions in the dashboard, plus email None
Squarespace A form block Email, with Google Drive, Mailchimp or Zapier as extras None
Any site An embedded form builder such as Jotform, or a popup form The tool's dashboard, plus email One snippet
Info
Pro Tip: If your platform has a contact form, use it. Platform forms come with spam filtering and somewhere to read messages, which you'd otherwise build yourself.

How to add a contact form with HTML

An HTML contact form is markup that collects a visitor's name, email address and message and posts them to the URL in its action attribute. HTML has no way to send email, so that URL has to belong to something that can: a script on your own server or a hosted form backend, also called a form endpoint. The backend stores the submission, emails it to you and shows the visitor a thank-you page.

If you want to create a contact form with HTML, you need to be familiar with basic coding. Although simple HTML contact forms are very basic, you might think of using this method as well, because you control every field and the page stays light.

An action="mailto:you@example.com" doesn't fix the email problem. The browser hands the message to the visitor's own email app, if one is set up, and many messages never leave their device. It trips up plenty of people: in October 2026, one of the top Google results for "html contact form" was a Reddit thread titled "Making a Functional HTML Contact Form".

You can add a contact form to your website by using a form endpoint/form backend tool. For this guide, we'll explain how to do that with Formcarry, as the earlier version of this post did. Its documentation is current (checked October 2026). Formspree and Web3Forms work the same way, with their own endpoint URLs and field names. We built the code below and tested it on 10 October 2026 in Chromium 153 and WebKit 26.6, the engine behind Safari: 28 checks per engine passed, including axe-core 4.14 with zero accessibility violations, keyboard-only use, a 375px phone screen and a submit with JavaScript turned off.

Here's how you can add a contact form using HTML. And when you add the code below to your website, the result will look like this when someone sends it with mistakes:

The tested HTML contact form showing inline errors: an incomplete email address and an empty message field, each outlined in red
The code in this section, running in Chromium after a submit with an incomplete email and no message (captured October 2026).

Step 1: Create a form and copy its endpoint

Note: You need to be a little familiar with HTML codes for this method, but you can copy every block below as it is.

You can create a form in Formcarry by signing up and clicking the Create Form button. That way, you can get your form backend URL. Create your form, give it a name, and save it; only you see the name. Then open the form's Setup tab and copy your form endpoint, a URL like https://formcarry.com/s/AbC123xyz. Notification emails go to your account's address until you change the recipients.

Step 2: Add the HTML form

You need to use the <form> element to process your code input, and your contact form's code can look like this. It will give you a basic contact form that has name, email and message areas, and a submit button. Copy your form endpoint, and paste it into your form code's action part: in the code below, replace YOUR_FORM_ID in the action with the end of your endpoint URL. Then paste the code where the form should appear.

<form id="contact-form" class="contact-form" action="https://formcarry.com/s/YOUR_FORM_ID" method="POST">
  <div class="field">
    <label for="cf-name">Your name</label>
    <input id="cf-name" name="name" type="text" autocomplete="name" required aria-describedby="cf-name-error">
    <p id="cf-name-error" class="field-error"></p>
  </div>

  <div class="field">
    <label for="cf-email">Email address</label>
    <input id="cf-email" name="email" type="email" autocomplete="email" required aria-describedby="cf-email-error">
    <p id="cf-email-error" class="field-error"></p>
  </div>

  <div class="field">
    <label for="cf-message">Message</label>
    <textarea id="cf-message" name="message" rows="6" maxlength="5000" required aria-describedby="cf-message-error"></textarea>
    <p id="cf-message-error" class="field-error"></p>
  </div>

  <!-- Honeypot: people never see it, bots fill it in, and the backend marks those submissions as spam -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden>

  <p class="form-note">We use your details only to reply to this message. Read our <a href="/privacy-policy">privacy policy</a>.</p>

  <button type="submit">Send message</button>
  <p id="cf-status" class="form-status" role="status"></p>
</form>

Then you structure your contact form's data by adding the fields you want. Each choice in this form has a reason:

  • Every field has a name. You name your fields by using the name attribute. The browser doesn't send a field without one, so it never reaches the backend. The old version of this post had that bug in its first Formcarry example.
  • method="POST". Without it, the browser sends a GET request and Formcarry answers with a "GET is not allowed" page.
  • The email field is named email. Formcarry uses it as the reply-to address of your notification, so you can answer by hitting Reply.
  • A visible <label> for every field, tied to it with for and id. W3C's forms tutorial (updated March 2026) asks for labels, instructions and clear messages about errors and success. A placeholder that disappears while you type isn't a label.
  • autocomplete lets browsers fill in the name and email address.
  • _gotcha is Formcarry's honeypot field. More on that under spam.
  • role="status" on the last paragraph makes screen readers announce "Sending" and "Thank you" when the script writes them there.

Step 3: Style it with CSS

You can add CSS to adjust your contact form's style. Your contact form can be modified to fit the branding and style of your website. Numerous widgets and plugins provide customization possibilities, and if you manually code your form, you may change the HTML and CSS to get the appearance and feel you want. Your CSS code can look like this, as a starting point. Labels sit above the fields, every control is at least 44px tall for thumbs, the keyboard focus ring stays visible, and an error shows as red text as well as a red border, so color isn't the only signal.

.contact-form {
  max-width: 32rem;
  font: 1rem/1.5 system-ui, sans-serif;
}

.field {
  margin-bottom: 1.25rem;
}

.contact-form label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  border: 1px solid #6b7280;
  border-radius: 6px;
  font: inherit;
}

.contact-form input[type="checkbox"] {
  width: 1.25rem;
  min-height: 0;
  margin: 0 0.5rem 0 0;
  vertical-align: middle;
}

.contact-form input[type="checkbox"] + label {
  display: inline;
  font-weight: 400;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

.contact-form [aria-invalid="true"] {
  border: 2px solid #b91c1c;
}

.field-error {
  margin: 0.375rem 0 0;
  color: #b91c1c;
}

.field-error:empty {
  display: none;
}

.contact-form button {
  min-height: 44px;
  padding: 0.625rem 1.5rem;
  border: 0;
  border-radius: 6px;
  background: #1d4ed8;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.contact-form button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

Step 4: Send it without leaving the page (optional JavaScript)

The form works without any JavaScript. The browser checks the required fields, posts the form and the visitor lands on Formcarry's thank-you page. This script keeps visitors on your page instead, puts a plain error message under each field that needs fixing and announces the result.

const form = document.getElementById("contact-form");
const statusBox = document.getElementById("cf-status");
const button = form.querySelector('button[type="submit"]');
const checkedFields = form.querySelectorAll("[aria-describedby]");
let sending = false;

// With JavaScript on, we show our own messages. Without it, the browser validates.
form.noValidate = true;

function setError(field, message) {
  document.getElementById(`${field.id}-error`).textContent = message;
  if (message) field.setAttribute("aria-invalid", "true");
  else field.removeAttribute("aria-invalid");
}

form.addEventListener("input", (event) => {
  const field = event.target;
  if (field.getAttribute("aria-invalid") === "true" && field.checkValidity()) {
    setError(field, "");
  }
});

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  if (sending) return;

  let firstInvalid = null;
  for (const field of checkedFields) {
    const valid = field.checkValidity();
    setError(field, valid ? "" : field.validationMessage);
    if (!valid && !firstInvalid) firstInvalid = field;
  }
  if (firstInvalid) {
    statusBox.textContent = "";
    firstInvalid.focus();
    return;
  }

  sending = true;
  button.setAttribute("aria-disabled", "true");
  statusBox.textContent = "Sending your message…";

  try {
    const response = await fetch(form.action, {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    const data = await response.json();

    if (data.code === 200) {
      form.reset();
      statusBox.textContent = "Thank you. Your message has been sent.";
    } else if (data.code === 422 && data.errors) {
      for (const [name, error] of Object.entries(data.errors)) {
        const field = form.elements[name];
        if (field && field.id) setError(field, error.message);
      }
      statusBox.textContent = "Please correct the fields marked above.";
    } else {
      statusBox.textContent = data.message || "Your message wasn't sent. Please try again.";
    }
  } catch {
    statusBox.textContent = "Your message wasn't sent. Check your connection and try again.";
  } finally {
    sending = false;
    button.removeAttribute("aria-disabled");
    // A Turnstile token works once, so ask for a new one after every attempt.
    if (window.turnstile) window.turnstile.reset();
  }
});

Details that matter if you adapt it:

  • Accept: application/json makes Formcarry answer with JSON (code, status, title, message). Without the header, the answer is the thank-you page's HTML and response.json() fails.
  • It reads data.code, not the HTTP status. When we sent a test to a form ID that doesn't exist on 10 October 2026, the HTTP status was 500 while the body said "code":401 and "Make sure you are using the correct form ID". The script shows that message, which helps while you set up.
  • A 422 carries an errors object when you've added validation rules in Formcarry; the script prints each message under its field.
  • Repeat clicks are ignored while a message is sending. Formcarry accepts one submission per 15 seconds per form and IP address and answers a second one with a 429.
  • Errors are tied to fields with aria-invalid and aria-describedby, and focus moves to the first field that needs fixing.
Careful
Common Mistake: Copying a contact form that posts to /action_page.php. That file is a placeholder from tutorial sites and doesn't exist on your server, so the form looks fine and every message is lost. The code that used to be in this post did exactly that, with a GET request that put the message in the URL.

Step 5: Test it before you go live

Run these five checks on the live page, not only on your computer:

  1. Submit the empty form: each required field should show a message and the cursor should jump to the first one.
  2. Type an incomplete address such as ada@: the email field should complain.
  3. Send a real message, then check your inbox, your spam folder and the form's page in the Formcarry dashboard.
  4. Fill in and send the form with the keyboard only (Tab, Space, Enter).
  5. Open the page on a phone and check nothing scrolls sideways.

You are done creating your form, and you can collect contact form submissions! If you want to monitor them, you can go to your Formcarry dashboard and check them from the Submissions part, which hides spam by default. You can monitor your form submissions from this part quickly. If you don't have an HTML form code and want to use one that can be customized, you can use Formcarry's Contact Form Generator. By adjusting your contact form in this generator, you can create and get your form's code; keep the labels and the name attributes when you adapt it.

Adding an HTML contact form can be restrictive for some people. For those who are not familiar with coding, this method might seem challenging, and the platform options below need no code at all.

How to add a contact form in WordPress

WordPress itself has no contact form block, so you add one with a plugin. Install counts below are from each plugin's WordPress.org page, read on 10 October 2026.

With Jetpack's Form block

Jetpack (3+ million active installations) adds a Form block to the editor. Open your contact page, type /form or pick Form from the block inserter, and choose the Contact pattern. Under Form notifications, enter the addresses in Send email notifications to, then publish.

Jetpack saves every response in WP Admin under Jetpack > Forms > Responses; storage is on by default. If Akismet is active on the site, submissions go to it for a spam check. These steps follow Jetpack's Form block guide.

With Contact Form 7 (and Flamingo to keep copies)

Contact Form 7 has 10+ million active installations. After you activate it, go to Contact > Add New: the default form already asks for a name, email, subject and message. Set the recipient on the Mail tab, save, and add the form to your contact page with the Contact Form 7 block.

Here's the catch that sends people searching for their contact form submissions: Contact Form 7 doesn't store them. Its readme says that with the default configuration it doesn't "write any user personal data to the database". If an email fails, the message is gone. Add Flamingo (800,000+ active installations), a "message storage plugin originally created for Contact Form 7", and every message appears in a Flamingo screen in WP Admin.

Note
Quick Insight: "Where do my contact form messages go?" usually has the answer "only to one inbox". Pick a tool that keeps a copy, or add one that does, before the first message goes missing.

Other form plugins

WPForms Lite (5+ million active installations) builds forms with drag and drop from templates, and its readme lists Cloudflare Turnstile, hCaptcha and reCAPTCHA among its spam options. Fluent Forms (700,000+) and Forminator (600,000+) are other free builders. Whichever you choose, check where it keeps entries before you rely on email alone.

Make sure the notification emails arrive

WordPress sends form notifications through wp_mail(), and WordPress's own reference for the function warns: "A true return value does not automatically mean that the user received the email successfully." So a form can say "Thank you" while the email never arrives.

Send yourself a test. If it's missing or in spam, route WordPress mail through a real mail provider with an SMTP plugin such as WP Mail SMTP (4+ million active installations).

How to add a contact form in Shopify

Every Shopify theme includes a built-in contact form, so a Shopify contact page takes no code. These steps follow Shopify's help center article on contact pages, read on 10 October 2026:

  1. From your Shopify admin, go to Online Store > Pages and click Add page.
  2. Enter a title, such as "Contact us", and any text you want above the form.
  3. In the Theme template menu, choose contact, then click Save.
  4. Add the page to your store's menu so customers can find it.

To show the form on another page, add the Contact form section to it in the theme editor, if your theme supports that section.

Where Shopify sends contact form messages

Shopify's contact form sends every submission to your store's sender email address, which you change on the Notifications settings page. You can't change the subject line. hCaptcha is on by default (Online Store > Preferences > Spam protection) and runs an invisible check on each submission. Shopify's filters also scan the message field and put "[SPAM]" in the subject of suspect messages, which still reach you, so an inbox filter on that word keeps them aside.

Add a field to the Shopify contact form

Shopify's built-in form has fixed fields; in Shopify's Horizon theme they're name, email, phone and message. To ask for something else, such as an order number, edit the theme's contact form code (in Horizon, blocks/contact-form.liquid) and add a field inside {% form 'contact' %}. Shopify's developer docs say custom fields need a name in the format contact[information_id], unique within the form; that title appears in the notification email.

<label for="ContactForm-order">Order number (optional)</label>
<input type="text" id="ContactForm-order" name="contact[order_number]" autocomplete="off">

Give the input the same class your theme uses on its other fields, and duplicate the theme before you edit it, because a theme update replaces edited files. If you'd rather not touch code, Shopify's free Forms app (rated 4.5 from 747 reviews on the Shopify App Store, read 10 October 2026) builds popup and inline forms whose answers are stored on the customer's profile. For ideas on what to ask, see these Shopify form examples.

Wix, Squarespace and any other site

On a site builder, the contact form is a built-in element:

  • Wix: in the Wix Editor, go to Add Elements > Contact & Forms, drag a form onto the page and use Edit Form for the fields. Submissions appear in Forms & Submissions in your dashboard, and each one is emailed to the site owner.
  • Squarespace: edit the page, click Add block and choose Form. Submissions are emailed to the person who added the form, and you can add Google Drive, Mailchimp or Zapier as extra storage (Mailchimp and Zapier need a Core, Plus, Advanced or certain legacy plan).

Any site: embed a form builder such as Jotform

You can add a contact form using a no-code form builder as well. There are various form builder tools, and they all end with a snippet you paste into your site. You can find out how to add a contact form with Jotform with the quick steps below, which follow its embedding guide (updated 30 September 2026):

  1. After you register and sign in to your account, you'll see your forms in My Workspace. For this guide, we'll select a template, but you can also create a form from scratch. From the templates page, you can find contact forms and click the Use template button.
  2. You can customize the template from the Build part.
  3. You can adjust your contact form's settings on the Settings part.
  4. Then, go to the Publish part and navigate to the Embed section to get your form's embed code.
  5. Click Copy Code. You can copy your code and paste it into your website's code injection part, or an HTML block where the form should appear.

Jotform keeps every submission in Jotform Tables, where you can read them and export them to Excel, CSV or PDF.

Where contact form submissions go

A contact form submission goes wherever the form's backend sends it: usually an email to you, plus a stored copy if the tool keeps one. Know both places for your setup before launch. One inbox is one point of failure.

Method Email goes to Stored copy
HTML + Formcarry Your account email, or the recipients you set Formcarry dashboard; you choose to keep it 30 days or forever, and export CSV or JSON
Jetpack Form block The post author, or the admin email Jetpack > Forms > Responses
Contact Form 7 The address on the Mail tab None, unless you add Flamingo
Shopify contact page Your store's sender email address Your inbox (Shopify's help names no admin copy)
Wix Forms The site owner Forms & Submissions
Squarespace form block The account email of whoever added the form In the block for 30 days, or until deleted if the form requires an email
Popupsmart popup form You, with Self Email Notification on The Leads section; export CSV, PDF or XLS

To get messages into a CRM, help desk or spreadsheet, connect the form to it: Formcarry has Zapier and webhooks, Squarespace has Zapier, and most WordPress plugins have add-ons. If several people answer messages, send them to a shared inbox rather than one person's mailbox.

Tip
Key Takeaway: A form that only emails one person can lose messages to a full inbox, a spam filter or a departed employee. Keep a stored copy, and test the email path whenever you change your mail settings.

How to stop contact form spam

Use two layers: a honeypot field that bots fill in and people never see, and a challenge such as Cloudflare Turnstile or reCAPTCHA that your backend checks on its server. Platform forms already include a filter. On Shopify, Wix and Squarespace, your job is mostly to leave it on.

Add a honeypot field

The _gotcha field in the code above is hidden and skipped by the keyboard, so people never fill it in. Many bots fill every field they find. Formcarry marks any submission with a value in _gotcha as spam, keeps it in a spam filter in your dashboard and, by default, sends no notification email for it. On Formcarry's free plan, spam still counts toward the monthly submission limit; on paid plans it doesn't.

Add Cloudflare Turnstile

Turnstile is Cloudflare's CAPTCHA-free way to check that a visitor is human. It has a free plan (up to 20 widgets per account), and Cloudflare's docs describe it as WCAG 2.2 AA compliant. Create a widget for your domain in the Cloudflare dashboard to get a site key and a secret key, then add two lines to the page:

<!-- In the <head>, once per page -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<!-- Inside the <form>, just above the submit button -->
<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>

Paste the secret key into your Formcarry form's settings, under Form Security. The widget alone protects nothing: Cloudflare says you must validate each token with its Siteverify API, and each token is valid for 300 seconds and works once. Formcarry runs that check for you, and the script in step 4 calls turnstile.reset() after every attempt so a second message gets a fresh token. In our test with Cloudflare's test keys, the token reached the backend, Siteverify accepted it, and the widget issued a new one after each submit.

Formcarry also supports reCAPTCHA v2 Checkbox and v3 (not v2 Invisible) and hCaptcha, set up the same way.

Use your platform's filter

  • Shopify: hCaptcha on contact and comment forms, on by default.
  • Wix: Settings > Spam filter settings in the form builder, with three levels that all include reCAPTCHA.
  • Squarespace: reCAPTCHA is on by default in form blocks.
  • WordPress: Akismet (5+ million active installations) works with Jetpack forms and Contact Form 7, and Contact Form 7 has a Turnstile integration.

You don't need a consent checkbox just to reply to someone who wrote to you. You need to tell people what you'll do with their details, and ask for separate, unticked consent only if you want to do something more, such as adding them to your newsletter.

The UK's data protection regulator, the ICO, puts it bluntly in its guidance on consent: if you would process the data anyway, asking for consent is "misleading and inherently unfair", because it "presents the individual with a false choice and only the illusion of control". For a reply someone asked for, it points to other lawful bases, such as a contract or legitimate interests. Rules differ by country, so treat this as general information, not legal advice.

What to do on the form:

  • A short notice next to the button, like the line in the code above, linking your privacy policy.
  • Only the fields you need to reply. A phone field "just in case" is data you have to look after.
  • A retention period. Delete old messages on a schedule; Formcarry lets you set 30 days to forever per form.
  • Know where the data is stored. Formcarry, for example, says it keeps submissions in EU data centers and acts as your data processor under a data processing agreement.
  • Marketing consent as its own checkbox, unticked, and optional for sending the message:
<div class="field">
  <input id="cf-newsletter" name="newsletter" type="checkbox" value="yes">
  <label for="cf-newsletter">Also send me the monthly newsletter (optional)</label>
</div>

A checkbox only sends its value when it's ticked, so a message with newsletter=yes is your record of the opt-in; we checked this in the same test.

Tips for effective contact forms that convert

  • Keep it simple: A contact form shouldn't be difficult to use or have too many fields or challenging queries. Ask for the required data to react to requests properly and keep your form short and easy.
  • Provide clear instructions: Make sure the information on your contact form on how to use it and what information to send is clear. Visitors will feel more comfortable using the form, as a result, increasing the likelihood that they will enter accurate information.
  • Say what happens next: Tell people when you usually reply, in the success message or next to the button.
  • Test your form regularly: Be sure to test your contact form frequently to ensure it is working properly and receiving all submissions. A/B testing can also test various form layouts and text to determine which is most successful.
  • Use an attractive & engaging style: You can add images and your brand logo and use consistent colors so that your forms can fit your brand identity.

By following these quick tips, you can make a contact form that works well, increases user engagement, and builds deeper connections with your audience. For layouts and copy that work, see these 15 website contact form examples.

Add a contact form popup with Popupsmart

A contact form popup is a popup with form fields that opens on top of the page, for example when someone clicks a "Contact us" button, so visitors can ask a question without leaving the page they're on. By including engaging and attractive form popups on your website, you can grab your visitors' attention and encourage them to fill out your contact form. Using Popupsmart, you can add contact form popups without code, and Popupsmart has a free plan. It collects each submission and passes it on; it doesn't replace the backend behind your other forms. See how you can do that with quick steps:

Popupsmart builder with a contact form popup and the Notifications panel: Self Email Notification and Autoresponder switched on
Popupsmart's form element, Notifications tab (captured December 2023).
  1. Go to the Websites part from your profile (Account at the bottom left of the dashboard), click New website and type down your website. You can copy and paste the embed code into your website's code injection part: go to your website's admin panel and paste your embed code just before the closing </body> tag (how to embed the code on your site).
  2. Go to the Campaigns section and create a new campaign by clicking on New Campaign and give a name to your campaign. You will be redirected to the template page, where you can select a ready-to-use popup template. For this guide, we selected a contact form popup template that fits our business goal, which is to collect form submissions. You can explore our conversion-ready popup templates from the popup templates page.
  3. After you select your popup template, you can customize it according to your needs and your website's style. By selecting the Form element, you can add new form elements and adjust them according to your goals, with Add a new form input for each field you need. Also, you can add new elements on the Customize step and adjust your popup as you like.
  4. By going to the Notifications part of your form element, you can set self-email notifications to be notified about your contact form (self-email notifications).
  5. Then, you can connect your favorite email service provider from the Integration part. Click Add integration and select from direct integration options or connect any app you like with Make.com and Zapier integrations. Every submission also lands in the Leads section of your dashboard.
  6. Popupsmart has various targeting solutions that you can find in the Segment section so that you can show your contact form popup to the right people at the right time, such as on a click of your contact button (a popup that opens on a button click).
  7. Once you complete all your adjustments, go to the Publish step to publish your popup campaign.

That's it! By following these steps, you can display attractive contact form popups to your visitors without having design or coding experience.

Keep the popup version short. In Popupsmart's 2026 benchmark, 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 and come from popups that collect an email or phone number, so they say nothing about a form on your contact page. For the full build, see how to create a popup form.

To cut a long story short

Including a contact form on your website is an essential first step in building a close relationship with your visitors. The process is quite simple, regardless of whether you're using a popup builder, form builder tool, or manually coding your form. You can develop a contact form that looks professional and makes it simple for site visitors to get in touch with you by following the instructions provided in this blog post. Whichever you pick, send one real test message, find it in both places it should land, and keep the spam filter on.

Frequently asked questions

How do I add a contact form to my website for free?

Use the form your platform already has: Shopify's contact page, Wix Forms, a Squarespace form block, or the free Contact Form 7 or Jetpack plugins on WordPress. On a hand-coded site, paste an HTML form and point it at a form backend with a free plan, such as Formcarry. Add Cloudflare Turnstile, which also has a free plan, if spam gets through the honeypot.

Can an HTML form send email without a backend?

No. HTML can collect the fields, but something has to receive the POST and send the email. That's your own server script or a hosted form backend. An action of mailto: only hands the message to the visitor's own email app, if one is set up, so many messages never leave their device.

Where do contact form submissions go?

They go wherever the form's backend sends them: an email to you, and on most tools a stored copy as well. Formcarry, Jetpack, Wix, Squarespace and Popupsmart keep one in a dashboard. Contact Form 7 only emails you unless you add Flamingo, and Shopify sends contact form messages to your store's sender email address.

Not just to reply to a message. Tell people what you do with their details and link your privacy policy next to the button. The UK regulator, the ICO, says asking for consent you don't need is misleading. Add a separate, unticked checkbox only for something extra, such as your newsletter. This is general information, not legal advice.

How do I stop spam on my contact form?

Combine a honeypot field, which bots fill in and people never see, with a challenge your backend verifies on its server, such as Cloudflare Turnstile or reCAPTCHA. Platform forms have filters built in: hCaptcha on Shopify, reCAPTCHA on Squarespace and Wix, and Akismet for WordPress plugins. Check the spam folder in your dashboard now and then.

Do I Need Technical Skills to Add A Contact Form to My Website?

It depends on the option you choose. You typically don't need technical skills if you're using a no-code tool or your platform's built-in form. If you're manually coding your form, you will need some coding skills, including knowledge of HTML and CSS, but you can start from the tested code in this guide: replace one URL and it works.

Berna Partal

Growth Marketing Specialist

All posts

Berna is a Growth Marketer with 5+ years of experience in digital marketing, specializing in conversion rate optimization and SEO-driven content strategy. Her work focuses on growth marketing, data-driven content, and lifecycle automation to support lead generation. She holds a degree in English Language and Literature from Hacettepe University, strengthening her expertise in strategic storytelling, copywriting, and audience-focused communication. Her core expertise includes SEO, content strategy, marketing automation, and lead generation.

Reviewed by Mert Özeren