11-Contact Setup

Key Objectives

• To use Formspree to send messages to your email.

Video

Overview

In this module we use a tool called Formspree that will allow users to fill out a form and contact us. Formspree is a tool that makes it easy for us to hook up a contact form without having to build our own custom server (we'll do that at a future date). It's intended for very lightweight traffic.

Notes/Tips

• Formspree can be finicky your first time setting it up. Use the code we give you.

• We recommend that you use our code verbatim (even if the form styling doesn't fit your theme).

• Do not worry about styling the form right now.

Steps

1. Go to the module-10-formspree branch.

2. Do a git pull to update the branch.

3. Important, please watch the video for this section before proceeding.

4. When you use our code, PLEASE BE SURE TO CHANGE THE EMAIL ADDRESS. If you don't change the email, we will receive all of your test emails.

5. Again, feel free to use the exact code in our contact form.

6. If you want to do more with Formspree, reference their docs. You do not need to buy an account with them. Usually, taking in an email and a message works just fine.

7. Test the form and make sure it's working by running the app and entering a proper email.

8. When it works, commit the code.

9. Go to the next module.

10. Here's the final code.

    • index.html

      • Contact Section

        <!--==========================
        Contact Section
        ============================-->
        
          <section id="contact">
              <div class="container">
                  <h2 class="text-center text-uppercase">Contact Me</h2>
                  <div class="row">
                      <form action="https://formspree.io/[e-mail]" method="POST">
                          <div class="control-group">
                              <div class="form-group">
                                  <label>Name</label>
                                  <input type="text" class="form-control" placeholder="Your Name" id="name" required="" data-validation-required-message="Please enter your name"
                                      name="name">
                                  <p class="help-block text-danger"></p>
        
                              </div>
                          </div>
                          <div class="control-group">
                              <div class="form-group">
                                  <label>Email Address</label>
                                  <input type="email" class="form-control" placeholder="Your Email" id="email" required="" data-validation-required-message="Please enter your email"
                                      name="_replyto">
                                  <p class="help-block text-danger"></p>
                              </div>
                          </div>
                          <div class="control-group">
                              <div class="form-group">
                                  <textarea class="form-control" rows="7" placeholder="Your Message" id="message" required="" data-validation-required-message="Please leave a message"
                                      name="message"></textarea>
                                  <p class="help-block text-danger"></p>
                              </div>
                          </div>
                          <div class="text-center">
                              <div id="success"></div>
                              <button type="submit" class="btn btn-lg btn-black">
                                  <i class="fa fa-paper-plane-o" aria-hidden="true"></i>Send Message</button>
                          </div>
                      </form>
                  </div>
              </div>
          </section>