How To Add A Contact Form To Your Website

In this post, I’ll show you how to add a contact form to your UpDog site, like this one:

https://contact-form-example.updog.co/

In order to start receiving messages from your site’s visitors, you’ll need to add an HTML form. The minimum required code to set this up is:

<form method='post'>
  <textarea name='message'></textarea>
  <button type='submit'>Submit</button>
</form>

Required Code

The two most important parts of the above code are:

<form method='post'>

which tells UpDog to process a form request instead of loading a file from your Dropbox folder.

and

<input name='message'>

Every form input on your site with a name attribute, will be collected and formatted into a table before arriving in your inbox.

You can have as many form inputs as you like.

Confirming a Successful Form Submission

By default, visitors who submit the contact form will be redirected back to the page with the contact form.

If instead, you’d like to redirect to a thank you or confirmation page, add a hidden input with the name redirect, like:

<input type='hidden' name='redirect' value='/thanks.html'>

The Complete Code

<!-- index.html -->
<h1>An Example Contact Form</h1>
<form method='post'>
  <label>Your Email</label>
  <input required type='email' name='email' placeholder='jane@doe.com'>
  <label>Your Message</label>
  <textarea required name='message'></textarea><br>
  <input type='hidden' value='/thanks.html' name='redirect'>
  <button type='submit'>Submit</button>
</form>

<!-- thanks.html -->
<h1>Thank You!</h1>
<p>Your form was sent successfully.</p>

Questions? Contact us.