html checkbox send by email

Question

I'm new to HTML and I'm trying to create some pre-filled checkbox items (some being custom text, i.e. input boxes to enter your own value) for users to input data and check off of the list. In essence, I am creating something similar to a TO-DO-LIST.

I can't figure out how to add two things:

Ability for the user to save the form, navigate elsewhere and come back to continue
Ability for user to email the completed the form in a format that contains their checkbox values.

Can someone please help!

Morning Checklist

wake up
brush teeth
bla bla

Send by Email

This is going to require much more than just HTML. Probably JavaScript (though not necessarily) - But you'll definitely need a server with a Database and a server side language like PHP or Java (or C#, or Python, or any number of them). Why don't you start by answering this question: http://whathaveyoutried.com ? — FrankieTheKneeMan, Apr 13 '13 at 21:49
HTML cannot do that, you need to use server side scripting language such as **PHP** or **ASP**, as well as you'll need Database like **MySQL** to store user's info — Mr. Alien, Apr 13 '13 at 21:49

score 1 · Answer 1 · answered Apr 13 '13 at 22:14

1

Read here http://www.w3schools.com/php/php_mail.asp. You need a PHP script.

answered Apr 13 '13 at 22:14

BlackWhite

816
2
12
25

score 0 · Answer 2 · edited May 23 '17 at 12:12

Your task can be done with just some HTML and JavaScript. The jQuery, and Sisyphus JavaScript libraries help you here. And it is surprisingly easy to send mail with plain html/javascript.

I put you some example HTML together (It got a little more extensive, than I thought, but there you are):

<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <script type='text/javascript' src='http://sisyphus-js.herokuapp.com/assets/application-09059f9f54cc3c3bff98487cf866644b.js'></script>
    <script type='text/javascript'>
      function sendMail() {
        var mailbody = "My Checklist: \n\n"
                       + $('input[type="checkbox"]').map(
                            function(id, box){ return (box.checked ? "[x]" : "[ ]") + " " + box.name;}
                          ).get().join("\n");
        var link = "mailto:me@example.com"
                    + "?cc=myCCaddress@example.com"
                    + "&subject=" + escape("This is my subject")
                    + "&body=" + escape(mailbody);
        window.location.href = link;
      }

      $(function(){
        $( "#checklist" ).sisyphus();
      });
    </script>
  </head>
  <body>
    <form id="checklist">
      <label><input type="checkbox" name="buy" />Buy some tee</label><br />
      <label><input type="checkbox" name="brew" />Brew the tee</label><br />
      <label><input type="checkbox" name="drink" />Drink tee</label><br />
      <button onclick="sendMail(); return false">Send Mail</button>
  </form>
  </body>
</html>

Sisyphus is a library that save form data in your browsers local storage. This way you can leave the page, come back later and still have your form values present (if you come back on the same computer with the same browser).

The sendMail() function builds a mailto link, which opens your local email client with a new mail ready to send.

Edit: shortened example code

html checkbox send by email

Morning Checklist

Send by Email

2 Answers2