Designed Contact Form with FormSubmit: Simple & Secure Setup

Simple Contact Form with FormSubmit is an easy-to-use and professional way to collect user queries, feedback, or requests on your website. Using FormSubmit, it sends submissions directly to your email, offering a clean, responsive, and user-friendly interface.

This form is ideal for blogs, business websites, or any platform needing feedback, inquiries, or support requests. It’s fully responsive for mobile and desktop, requires no backend coding, and offers an optional reCAPTCHA for spam protection.

The code uses HTML, CSS, and JavaScript to create a seamless experience. Choose between a basic version (without reCAPTCHA) or an advanced version (with reCAPTCHA).

Generate automatic Contact Form

Fill in a few details such as your email address, contact page URL, website name, and reCAPTCHA site key, and instantly create your own contact form. Generate reCAPTCHA site key

Email * Contact Page URL * Website Name *

Add reCAPTCHA

Contact Form Generator Tool Documentation

A simple web tool to generate HTML contact forms for FormSubmit.co, with optional Google reCAPTCHA v2. Creates responsive forms with user inputs for email, redirect URL, and website name.

Features

Input fields: Email, Contact Page URL, Website Name, reCAPTCHA (optional).
Preview form with/without reCAPTCHA.
Generate, copy, or download HTML code.
Validates inputs (email, URL, site key if reCAPTCHA).
Clear all inputs and reset UI.
Responsive design (max-width: 700px for tool, 480px for form).

How to Use

Save code as .html and open in a browser.
Enter:
1. Email: Where submissions go (e.g., [email protected]).
2. Contact Page URL: Redirect after submission (e.g., https://example.com/thanks).
3. Website Name: Email subject (e.g., MySite).
4. reCAPTCHA: Check to add; provide site key.
Click Preview to see form mockup.
Click Generate Code to create HTML.
Copy to clipboard, Download as contact-form.html, or Clear inputs.
Paste generated code into your website.

Input Fields

Field	Required	Description
Email	Yes	For FormSubmit.co submissions.
Contact Page URL	Yes	Redirect URL after submission.
Website Name	Yes	Email subject for submissions.
reCAPTCHA Checkbox	No	Enables reCAPTCHA v2.
reCAPTCHA Site Key	Yes (if checked)	Google reCAPTCHA v2 key.

Generated Output

Without reCAPTCHA:

Form with First Name, Last Name, Email, Phone (optional), File, Message.
Direct submit (type="submit").
No JavaScript or error div.
CSS for responsive layout (480px max-width).

With reCAPTCHA:

Adds error div, reCAPTCHA checkbox, and JavaScript for validation.
Submit button (type="button") shows reCAPTCHA before submission.
Includes <script src="https://www.google.com/recaptcha/api.js">.

Troubleshooting

Empty fields error: Fill all required fields; provide site key if reCAPTCHA checked.
Invalid email/URL: Use [email protected], https://example.com.
reCAPTCHA fails: Verify site key; check browser console.
Copy fails: Copy manually; needs HTTPS for modern Clipboard API.
Form not working: Confirm FormSubmit.co setup; test in browser.

Generate an Automatic Contact Form

Fill in your details such as email address, contact page URL, website name, and reCAPTCHA site key to instantly create your own contact form. Or, if you want to create the form manually, carefully check the code below, read it thoroughly, and replace the details as needed.

Designed Contact Form with FormSubmit: Simple & Secure Setup

Note: Follow the steps carefully to avoid errors. Basic HTML/CSS knowledge is assumed, and a Google account is needed for reCAPTCHA setup.

Table of Contents

Google reCAPTCHA v2 Setup for Your Website

In this guide, you will learn how to generate your website's YOUR_SITE_KEY for Google reCAPTCHA v2 'I'm not a robot' checkbox. We will walk you through the step-by-step process, including setting a label, selecting the challenge type, and adding your domain, so you can properly implement reCAPTCHA on your site.

Note: Google reCAPTCHA v2 allows up to 10,000 assessments per month for free. If your site exceeds this limit, you may need to enable billing for your Google Cloud project. For more information, visit the reCAPTCHA pricing page.

Go to Google reCAPTCHA admin.
Add Label (e.g., yourblog)
Choose Challenge (v2) and Select "I'm not a robot" tickbox
Add your website domain (e.g., example.com) and generate keys.
Copy the Site Key for the form code.

Note: The reCAPTCHA version requires a Site Key. Without it, verification won’t work. The basic version doesn’t need reCAPTCHA setup.

Secure Contact Form (With reCAPTCHA)

The Secure Contact Form combines FormSubmit with Google reCAPTCHA to block spam while collecting user messages. It verifies submissions with a checkbox, ideal for professional websites needing security.

With a simple setup, add your email and reCAPTCHA Site Key to ensure safe and reliable form submissions. The form’s design adapts to all screen sizes for a user-friendly experience.

Below is the HTML, CSS, and JavaScript code for the form with reCAPTCHA.

Copy the code below.

<div class="cfBox">
 <form id="WEBNAME" target="_blank" action="https://formsubmit.co/[email protected]" method="POST" enctype="multipart/form-data"> 
   
   <input type="hidden" name="_subject" value="WEBNAME contact">
      
  <input type="hidden" name="_next" value="https://www.example.com/contact">
   
   <input type="hidden" name="_captcha" value="false">

  <div class="form-group">
   <div class="form-row">
    <div class="col">
     <input type="text" name="First-Name" id="fname" class="form-control" placeholder="First Name" required>
    </div>
    <div class="col">
     <input type="text" name="Last-Name" id="lname" class="form-control" placeholder="Last Name" required>
    </div>
   </div>
  </div>

  <div class="form-row"> 
   <div class="col">
    <input type="email" name="email" id="email" class="form-control" placeholder="Email Address" required>
   </div>
  </div><br>   

  <div class="form-row"> 
   <div class="col">
    <input type="tel" name="phone" class="form-control" placeholder="Phone Number (optional)">
   </div>
  </div><br>  

  <div class="form-group">
   <div class="form-row">
    <div class="col">
     <input type="file" name="attachment">
    </div>
   </div>
  </div>

  <label for="Message"><b>Message *</b></label>
  <div class="form-group">
   <textarea placeholder="Message" class="form-control" id="message" name="message" rows="5" required></textarea>
  </div>

  <!-- Error message container -->
  <div id="errorMsg" style="display:none; color:#b71c1c; background:#ffebee; padding:10px; border-radius:6px; margin-bottom:10px; font-weight:500; font-size:13px"></div>

  <!-- reCAPTCHA v2 checkbox -->
  <div id="captchaBox" style="display:none; margin: 15px 0;">
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="recaptchaVerified"></div>
  </div>

  <div class="btns">
    <button type="reset">Reset</button>
    <button type="button" id="submitBtn" class="btn btn-lg btn-dark btn-block">Submit Form</button>
  </div>
 </form>
</div>

<style>    
  .cfBox{max-width:480px;margin:auto;font-family:system-ui,sans-serif;font-size:16px;color:#2c3e50}    
  .cfBox input,.cfBox textarea{width:100%;padding:12px;margin:10px 0 5px;border:1px solid #ccc;border-radius:8px;background:var(--iB);font-size:16px;box-sizing:border-box;transition:border-color 0.2s}    
  .cfBox input:focus,.cfBox textarea:focus{border-color:#1976d2;outline:none}    
  .cfBox small{font-size:14px;color:var(--bodyC);display:block;margin-bottom:8px}    
  .cfBox .btns{display:flex;gap:10px;margin-top:12px}    
  .cfBox button{padding:10px 18px;font-size:15px;border-radius:6px;border:none;background-color:#1976d2;color:white;cursor:pointer}    
  .cfBox button[type="reset"]{background-color:#6c757d;opacity:0.9}    
</style>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<script>
  const submitBtn = document.getElementById("submitBtn");
  const captchaBox = document.getElementById("captchaBox");
  const myForm = document.getElementById("myForm");
  const errorMsg = document.getElementById("errorMsg");
  function allRequiredFilled() {
    return (
      document.getElementById("fname").value.trim() !== "" &&
      document.getElementById("lname").value.trim() !== "" &&
      document.getElementById("email").value.trim() !== "" &&
      document.getElementById("message").value.trim() !== ""
    );
  }
  submitBtn.addEventListener("click", function(){
    if(allRequiredFilled()){ 
      errorMsg.style.display = "none";  
      captchaBox.style.display = "block"; 
      submitBtn.style.display = "none";   
    } else {
      errorMsg.textContent = "Please fill all required fields before submitting.";
      errorMsg.style.display = "block";
      errorMsg.scrollIntoView({behavior: "smooth", block: "center"});    
      setTimeout(() => {
        errorMsg.style.display = "none";
      }, 1000);     
    }
  });
  function recaptchaVerified() {
    myForm.submit();
  }
</script>

Paste the HTML into your webpage.
Replace the email address in the form action → [email protected]
Replace the Website/Project name in the hidden _subject field → WEBNAME
Redirect URL After Submit → Replace https://www.example.in/contact with your own contact page URL
Replace the reCAPTCHA site key with your own key → data-sitekey="YOUR_SITE_KEY"
Publish webpage and make it live on your website.
Test with a sample submission.

Basic Contact Form (Without reCAPTCHA)

The Basic Contact Form with FormSubmit is a straightforward way to collect user feedback or inquiries without complex setup. Simply add your email to the form’s action URL for direct submissions to your inbox.

This form is perfect for blogs or small websites, requiring no backend server. Its responsive design ensures a seamless user experience across all devices.

Below is the HTML and CSS code for the basic form without reCAPTCHA.

Copy the code below.

<div class="cfBox">  
 <form target="_blank" action="https://formsubmit.co/[email protected]" method="POST" enctype="multipart/form-data">    
   
   <input type="hidden" name="_subject" value="WEBNAME contact">
   
   <!-- Redirect after submit -->    
   <input type="hidden" name="_next" value="https://www.example.incontact"> 
   
   <input type="hidden" name="_captcha" value="false">
   
   <div class="form-group">  
   <div class="form-row">  
    <div class="col">  
     <input type="text" name="First-Name" class="form-control" placeholder="First Name" required>  
    </div>  
    <div class="col">  
     <input type="text" name="Last-Name" class="form-control" placeholder="Last Name" required>  
    </div>  
   </div>  
  </div>    
   <div class="form-row">   
   <div class="col">  
    <input type="email" name="email" class="form-control" placeholder="Email Address" required>  
   </div>  
  </div>
   <br>       
   <!-- Phone number (optional) -->    
   <div class="form-row">   
   <div class="col">  
    <input type="tel" name="phone" class="form-control" placeholder="Phone Number (optional)">  
   </div>  
  </div><br>      
   <div class="form-group">  
   <div class="form-row">  
    <div class="col">  
     <input type="file" name="attachment">  
    </div>  
   </div>  
  </div>  
   <label for="Message"><b>Message *</b></label>

  <div class="form-group">  
   <textarea placeholder="Message" class="form-control" name="message" rows="5" required></textarea>  
  </div>    
   <!-- Reset + Submit buttons ek hi line me -->    
   <div class="btns">  
    <button type="reset">Reset</button>  
    <button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>  
  </div>  
 </form>  
</div>  
<style>      
  .cfBox{max-width:480px;margin:auto;font-family:system-ui,sans-serif;font-size:16px;color:#2c3e50}      
  .cfBox input,.cfBox textarea{width:100%;padding:12px;margin:10px 0 5px;border:1px solid #ccc;border-radius:8px;background:var(--iB);font-size:16px;box-sizing:border-box;transition:border-color 0.2s}      
  .cfBox input:focus,.cfBox textarea:focus{border-color:#1976d2;outline:none}      
  .cfBox small{font-size:14px;color:var(--bodyC);display:block;margin-bottom:8px}      
  .cfBox .btns{display:flex;gap:10px;margin-top:12px}      
  .cfBox button{padding:10px 18px;font-size:15px;border-radius:6px;border:none;background-color:#1976d2;color:white;cursor:pointer}      
  .cfBox button[type="reset"]{background-color:#6c757d;opacity:0.9}      
  .cfSuccess{margin-top:10px;color:green;font-size:14px;padding:6px 10px;border-radius:6px;display:none}      
</style>

Paste the HTML into your webpage.
Replace Email Address → [email protected]
Replace Website/Project Name → WEBNAME
Redirect URL After Submit → Replace https://www.example.in/contact with your own contact page URL:
Publish webpage and make it live on your website.
Test with a sample submission.

FormSubmit Contact Form Setup Guide for Your Website

Important: Before using the FormSubmit contact form, it is essential to follow these steps so that your email gets verified and the form works properly. First, send a test message yourself. Then, a FormSubmit verification email will arrive in your inbox, which you need to verify. Only after verification can you fully use the contact form and start receiving submissions.

First, fill out the form and send a test message yourself.
Then, check your Gmail inbox for a verification email from FormSubmit.
Open the email and click on the Verify / Confirm link.
Once your email is verified, you can fully use the contact form and receive submissions.

Where Can You Use It?

The FormSubmit Contact Form offers versatile use cases, with the Basic version ideal for collecting inquiries on blogs and small websites, requiring no backend setup, while the Secure version with reCAPTCHA suits business sites needing spam protection. Its responsive design ensures seamless performance across devices, making it a reliable choice for various online platforms.

Blogs for reader feedback and inquiries.
Business Websites for client communication.
E-commerce Portals for secure customer support.
Personal Portfolios for contact options.

Contact Form FAQ

Can I add custom fields to the form?

Yes, add custom fields by including new <input> tags in the HTML. Name them uniquely (e.g., custom-field) to receive data in your email. Test after adding to ensure FormSubmit processes them correctly, keeping the form functional.

How do I track form submissions?

To track submissions:

Use a third-party analytics tool like Google Analytics.
Add a tracking code to the thank-you page URL: https://your-site.com/thanks.html.
Monitor data in your analytics dashboard for submission counts.

This helps measure user engagement without altering the form.

Can I use multiple forms on one page?

Yes, add multiple forms with unique action URLs for each email. Ensure each form has distinct IDs and names to avoid conflicts. Test thoroughly to confirm all submissions reach the correct inboxes.

How do I change the submit button text?

Edit the <button type="submit"> tag in the HTML to change text (e.g., from "Submit" to "Send Message"). Update CSS if needed for styling. Test to ensure the button still triggers the form submission.

How do I CC multiple email addresses?

To CC multiple emails, add a hidden input <input type="hidden" name="_cc" value="[email protected],[email protected]">. List emails separated by commas, ensuring they’re valid. Test to confirm all recipients receive the submission copy.

Final Thought

FormSubmit Contact Form is a simple, responsive, and secure solution for collecting user messages. With FormSubmit and optional reCAPTCHA, you can easily manage submissions without backend coding.

Use the provided HTML, CSS, and JS to set up this form quickly. Try it on your site and share your feedback in the comments below!

EduSynth

Designed Contact Form with FormSubmit: Simple & Secure Setup

Generate automatic Contact Form

Generated Code