You can use many methods on your website to allow users to securely send emails to you. One example is using the mailto attribute on a contact form. The mailto attribute opens an installed mail application for the user to enter a message.

For a better experience, consider integrating a tool like Formspree. Formspree acts as an intermediary, recording form data and sending it to your specified email address.

What Is Formspree and How Does It Work?

Formspree is an emailing service that you can integrate onto a custom contact form. When you log into Formspree, you can specify your target email address for a form. Formspree handles form submissions on your behalf. It lets you create a free contact form, like Google Forms, but you host the actual form markup on your own site.

Formspree will generate an endpoint, which you will need to add to your custom form. When a user presses the "Submit" button, the form will use the endpoint to call Formspree's API service. This will generate an email with the contents of the contact form.

Formspree will send this email to the target email you listed in your Formspree account. You will then receive the email in your inbox. Your Formspree account also has a place where you can view your contact form submissions.

How to Register a Contact Form in Formspree

To register your email with Formspree, log in and enter the target email address for your form.

  1. Log into Formspree. If you do not have an account, you will need to enter your email address and a password. Register using the email address you want the contact form to send submissions to. You may also need to verify this email address during the signup process.
    Formspree open showing the Register page
  2. Once the signup process is complete, the "Forms" page will open. Click on New Form.
    Formspree Forms Page - New Forms Button
  3. Enter any name for your contact form and leave the default project settings. Enter the target email address in the "Send emails to" field. This is where Formspree will send your contact form submissions. Once completed, click on Create Form.
    Formspree Create a Form opened with details filled
  4. Formspree will provide you with an endpoint, and examples of how to use it. You will need to add this endpoint to your custom contact form on your website (more on this later).
    Create form completed, with a Generated Endpoint being displayed
  5. By default, Formspree stores your form under a project called "My First Project". If you want to change the name of this, go back to the "Forms" page. Click on Settings next to the name of the project.
    Formspree Rename Projects button
  6. Here, you can change the name of your project to something else. For example, you can rename it to have the same name as your website. You can also add the URL for your website.
    Formspree open to Project Settings page

How to Integrate Formspree Onto Your Contact Form

You will need to add the endpoint provided by Formspree into the contact form in your website's code.

  1. Add the endpoint into the "action" attribute for the form. This will cause a user's browser to send the form to that URL when they submit it. 
            <form action="https://formspree.io/f/xjvlaqpe" method="POST">
        <!-- Your form here -->
        <button type="submit" class="button"> Submit </button>
    </form>
  2. Add inputs to your form. You can use this example form which uses the Bootstrap CSS framework: 
            <form action="https://formspree.io/f/mbjqjrdl" class="extra-padding" method="POST">
        <div class="form-group">
            <label for="replyTo"> Your Email address </label>
            <input type="email" class="form-control" id="replyTo" name="_replyto" ngModel="reply" aria-describedby="emailHelp" placeholder="test@example.com">
            <small id="emailHelp" class="form-text text-muted"> Your email will not be shared with anyone else. </small>
        </div>
        <div class="form-group">
            <label for="message"> Your message </label>
            <textarea name="message" style="height:200px" class="form-control" id="message" placeholder="Hey there! I'm contacting you because..."> </textarea>
        </div>
        <button type="submit" class="button"> Submit </button>
    </form>

How to Test if Formspree Is Working on Your Contact Form

To test if Formspree is working, send yourself a message using the contact form, press Submit, and check your email's inbox.

  1. Run your website and open the page that has the contact form. Enter a message into the contact form and press Submit.
    Contact Form Of Website
  2. You will receive the contact form message in your inbox.
    New Contact Form Submission Email
  3. If you go back to Formspree, click on the Submissions tab. Here you will also be able to see submitted messages from your contact form.
    Formspree List of Contact Form Submissions

Learning More About Contact Forms

Formspree is one of the many services you can use to integrate a custom contact form onto your site. It allows you to quickly start accepting user feedback without having to worry about the backend details.

If you're new to creating forms with HTML and JavaScript, you can also learn more about client-side form validation. This helps to ensure that your contact forms can validate all user input.