Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Benjamin Coulombe
PLUS
Benjamin Coulombe
Courses Plus Student 4,504 Points
Posted by Benjamin Coulombe
Benjamin Coulombe
Courses Plus Student 4,504 Points

Setting up "mailto: form in my website

Hi Team,

I'm trying to create a website for a friend using the "best city ever" template I learned in HTML. I want people to be able to submit an "order form," for what they would like to order, and have that order get sent to an email address once the end user clicks "send message"

Below is the link to website and HTML code I'm using for the mailto: form. Additionally, I'm using InMotion server hosting, do I need to change anything on my server side?

http://tasty-boards.com/shop

 <footer class="main-footer">

  <section id="order form">
    <section class="py-6">
      <div class="container">
        <header class="mb-5">
          <h2 class="text-uppercase h5">Order form</h2>
        </header>
        <div class="row">
          <div class="col-md-7 mb-5 mb-md-0">
            <form id="contact-form" method="post" action="contact.php" class="form">
              <div class="controls">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label for="name" class="form-label">First Name </label>
                      <input type="text" name="name" id="name" placeholder="Enter your firstname" required="required" class="form-control">
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label for="surname" class="form-label">Last Name </label>
                      <input type="text" name="surname" id="surname" placeholder="Enter your  lastname" required="required" class="form-control">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                    <form action="ben.coulombe@yahoo.com" method="get" enctype="text/plain">
                  <label for="email" class="form-label">Email </label>
                  <input type="email" name="email" id="email" placeholder="Enter your  email" required="required" class="form-control">
                  <form action="mailto:nicolewogberg@gmail.com" method="post" enctype="text/plain" >
                </div>
                <div class="form-group">
                  <label for="message" class="form-label">Order</label>
                  <textarea rows="4" name="message" id="message" placeholder="Enter your message" required="required" class="form-control"></textarea>
                </div>
                <div class="form-group">
                  <label for="message" class="form-label">Special Instructions</label>
                  <textarea rows="4" name="message" id="message" placeholder="Enter your Special Instructions" required="required" class="form-control"></textarea>
                <button type="submit" class="btn btn-outline-dark">Send message</button>

              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    </section>

        <span></span>
    </footer>
```html

PS - I was able to accomplish all of this by learning how to web develop through team treehouse's online school, so cool :) 

Thank you! 
Ben

1 Answer

Jeff Muday
MOD
Jeff Muday
Treehouse Moderator 28,716 Points
Jeff Muday
Jeff Muday
Treehouse Moderator 28,716 Points

This looks like a super-cool project!

Yes, this can work. Though... I noticed in your code is that the "name" parameter is "message" and is duplicated in the ORDER and SPECIAL INSTRUCTIONS form controls and one would override the other. Instead, make each of those unique names. Like "messageOrder" for the first textarea and "messageSpecialInstructions" for the second. This is so that data from both controls can be sent.

Another issue are the nested <form> tags. That will have unexpected results -- make sure to use a single overarching form.

Another caveat--

I have not had a lot of success with the consistency (on different computers) of "mailto:" as the form action. On many computers, people may have not set up their "mailto" application or browser security might be set up to specifically block it. On those computers, nothing would happen when you submit the form.

You could potentially set up your form to use a single PHP script to email the form parameters and skip the mailto altogther-- most servers have PHP module configuration enabled. It is convenient to use PHP since you have HTML skills and the PHP mailing script is added to the webpage inside of <?php> tag(s). Or could even be a separate PHP page that processes the GET or POST request from the first form page.

There are some very good courses on Treehouse on PHP. Below is a quick example of PHP mailing

https://www.w3schools.com/php/func_mail_mail.asp

https://www.lcn.com/support/articles/how-to-create-an-email-form-with-php

Another way would be to use client-side javascript to send the email. If you're into JavaScript this approach might appeal to you.

https://www.smtpjs.com/

Good luck!