Web3Forms
  • Introduction
  • Getting Started
    • Installation
    • Customizations
      • Email Subject line
      • Success / Thank You Page
      • Custom Redirection
      • Captcha & SPAM
        • hCaptcha
        • reCaptcha & Turnstile
        • Honeypot
        • Report Spam
      • Custom Reply-To
      • From Name
    • Pro Features
      • reCaptcha Integration
      • Cloudflare Turnstile Captcha
      • Add CC Email
      • Autoresponder (Auto-Reply)
      • File Attachments
      • Advanced File Uploader
      • Webhooks
      • Restrict to Domain
      • Intro Text
    • Examples
      • Basic HTML Contact Form
      • Advanced - All Options
      • Ajax Contact Form using Javascript
      • Multi Column Contact Form
      • Javascript Form Validation
      • Contact Form with Dark Mode
      • Raw Contact Form
      • Google reCaptcha v3
      • File Upload Form
      • With Multiple Checkbox
    • Integrations
      • Zapier
      • Integromat
      • Examples
        • Google Sheets
        • Airtable
        • Telegram Notifications
    • Options Reference
    • API Reference
    • Troubleshooting
    • FAQ
  • How-to Guides
    • HTML & JavaScript
    • JS Frameworks
      • React JS
        • Web3Forms React Plugin
        • React Hook Form
        • Simple React Contact Form
        • React File Upload Form
        • React Google ReCaptcha v3
        • React Hook Form File Upload
      • Vue JS
      • Svelte
      • Angular JS
      • Alpine.js
    • Site Builders
      • Webflow
      • Framer
      • Carrd.co
      • Squarespace
      • Wix
      • Dorik
    • Static Site Generators
      • Next.js
      • Astro
      • Nuxt.js
      • Hugo
      • Jekyll
      • Gatsby
      • Gridsome
      • Eleventy
    • Hosting Providers
      • Vercel
      • Netlify
      • Digital Ocean
      • AWS
      • Github
      • Cloudflare
    • JAM Stack
    • Landing Page Builders
      • Unbounce
      • Instapage
      • Pagewiz
      • Groovefunnels
    • WordPress
      • Elementor
      • Oxygen Builder
Powered by GitBook
On this page
  • HTML
  • CSS

Was this helpful?

Edit on Git
  1. Getting Started
  2. Examples

Raw Contact Form

PreviousContact Form with Dark ModeNextGoogle reCaptcha v3

Last updated 3 years ago

Was this helpful?

HTML

<!-- 
    =======================================================================

    This is a working contact form. To receive email, 
    Replace YOUR_ACCESS_KEY_HERE with your actual Access Key.

    Create Access Key here 👉 https://web3forms.com/

    =======================================================================
 -->

<form action="https://api.web3forms.com/submit" method="POST" id="form">
  <fieldset>
    <legend>Contact Form</legend>
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
    <input type="hidden" name="subject" value="New Submission from Web3Forms" />
    <input
      type="hidden"
      name="redirect"
      value="https://web3forms.com/success"
    />
    <input type="checkbox" name="botcheck" id="" style="display: none;" />
    <div>
      <label for="name">Full Name</label><br />
      <input
        type="text"
        name="name"
        id="name"
        placeholder="John Doe"
        required
      />
      <br /><br />
    </div>
    <div>
      <label for="email">Email Address</label><br />
      <input
        type="email"
        name="email"
        id="email"
        placeholder="you@company.com"
        required
      /><br /><br />
    </div>
    <div>
      <label for="phone">Phone Number</label>
      <br />
      <input
        type="text"
        name="phone"
        id="phone"
        placeholder="+1 (555) 1234-567"
        required
      /><br /><br />
    </div>
    <div>
      <label for="message">Your Message</label>
      <br />
      <textarea
        rows="5"
        name="message"
        id="message"
        placeholder="Your Message"
        required
      ></textarea
      ><br /><br />
    </div>

    <button type="submit">Send Message</button>
  </fieldset>
</form>

CSS

form {
  max-width: 500px;
  margin: 150px auto;
}

fieldset {
  padding: 30px;
}

input,
textarea,
button {
  width: 100%;
}
Check it out on Codepen