MailThis is completely free to use and even has documentation on their website. I’ll be covering many core features, but one thing I won’t do is setup an email alias.
Since your e-mail address goes inside the POST form URL(ex:mailthis.to/youremail@gmail.com), it’s very easy for a spammer or spambot to examine your code and start spamming the address.
MailThis can provide a free alias which masks your real email in the form’s code. I would highly recommend doing this for every live project using MailThis.
To do so visit the homepage and setup your preferred e-mail with an alias username.
Next we’ll create the form itself. You’ll notice MailThis provides a sample form, but I’ve coded my own with some extra features.

Building the Form

Since the exact syntax is very important, I’ve broken down my source into two blocks of code for explanation. Here’s the first part:
1<form action="http://mailthis.to/youremailhere@gmail.com"method="post">
2 
3  <div class="inputblock">
4    <label for="email">Email Address:</label>
5    <input type="email" name="email" id="name" class="txt">
6  </div>
7 
8  <div class="inputblock">
9    <label for="_subject">Subject</label>
10    <div class="select-style">
11    <select name="_subject">
12      <option value="General Inquiry">General Inquiry</option>
13      <option value="Support">Support</option>
14      <option value="Advertising">Advertising</option>
15      <option value="Press or Media">Press or Media</option>
16    </select>
17    </div>
18  </div>
19   
20  <div class="inputblock">
21    <label for="message">Message:</label>
22    <textarea cols="40" rows="8" name="message" class="txt"></textarea>
23  </div>
The form action attribute must be set to this specific syntax, always using a POST command. Simply replace the email address with your own(or specifically your new alias).
Each input field has a naming convention which must be maintained. An input with the nameemail holds the sender’s e-mail(the “from” field).
An input with the name _subject contains the message subject. MailThis suggests creating a hidden input with this value, but I’ve taken it one step further with a dropdown menu. This allows users to select a subject from a predefined list of your choosing.
The subject itself can also be set manually, or added to an input text field instead. No matter what you choose just make sure the field’s value attribute contains the exact text you want for the e-mail subject line.
Then finally a textarea with the name message contains the body message. All HTML characters still remain so users can e-mail you hyperlinks by writing HTML code.
1  <input type="hidden" name="_replyto" value="%email">
2  <input type="hidden" name="_valid[email]" value="valid_email">
3  <input type="hidden" name="_valid[message]"value="min_length[10]">
4  <!-- OPTIONAL REDIRECT
5  <input type="hidden" name="_after" value="http://vandelaydesign.com/demo/mailthis/success.html">
6  -->
7   
8  <div class="inputblock">
9    <input type="submit" class="submit-btn" value="Send Message">
10  </div>
11   
12</form>
Here’s the second half of the form. The only other visible input is a submit button which actually sends the form data to MailThis’ server.
All other input types are hidden because they don’t require user input. These are actually rules for how each form input should behave, also called validation fields in the MailThis documentation.
Visit the MailThis webpage to find a table full of these validation fields with proper syntax. My demo has 3 active validation fields with an optional 4th you can use in your own projects.
The first field _replyto sets the e-mail’s replyto address. Most people want to reply directly to the person who sent the e-mail, and we can pull this info directly from their email input with the syntax %email.
Next I have two fields with the name _valid using suffix codes for which inputs are being targeted. For example my first validity check targets the input with a name of email. The value check is valid_email which should be self-explanatory.
You don’t have to write a single line of JavaScript or anything to get these validations working. MailThis handles everything with pre-built validation checks.
I’m using a similar check on the message field with a value of min_length[10]. Again hopefully self-explanatory, this forces users to enter at least 10 characters into their e-mail message before it’ll be considered valid.
Lastly I have a hidden input stored in an HTML comment. The name is _after which behaves as a redirect field. Instead of loading the default MailThis sent page, you can instead devise your own “email sent successfully” page.
The benefit is that you’ll keep visitors on your domain rather than redirecting them over to MailThis. It’s not necessary for the sake of my demo, but in a real-world project it could be very useful.
To find more of these validation checks visit the MailThis documentation to see if there’s anything else you could implement.

TAGS :