HTML/Javascript Email Form Primer Tutorial
Today’s HTML/Javascript (and bit of CSS) topic will be very familiar to lots of people. It involves the “Contact Us” type of email form that makes use of a TextArea HTML tag.
So let’s summarise the points of interest with today’s (live run) tutorial … pros/cons:
- HTML Form (tag) used with single webpage usage (ie. no PHP/no “post” method) (ie. Javascript form validation/ use “get” method) and submitting to Email Client … simple
- Security features of passing email through the Email Client … avoids issues like phishing
- Implications of passing email through the Email Client … involves an extra button press
- Allow “behind the scenes peek” via a “just try” option showing the potential call of the Email Client … returning to webpage via “get” method
- Get query string values in Javascript … thanks to this link
- Use of mailto tag to reach Email Client … via “get” method … message size limit implication of using “get” rather than “post” … security concerns over “get” method usage … hence use of “small” (in the webpage wording)
- No email attachments with this method
- No CAPTCHA “non-robot” (ie. real person) confirmation with this method
- Logic to use of TextArea tag, in particular with respect to carriage return processing via use of Javascript encodeURIComponent()/decodeURIComponent()
- Logic to use of Check Box (for “mode of use” decision making)
- Logic to use of Radio Buttons (for other decision making)
- Use of Input tag type=’hidden’ form elements
- Use of Input tag type=’text’ form elements (mandatory … use of ‘*’ on form)
- Javascript form validation of mandatory Input tag type=’text’ with extra email address logic
- In an HTML form equivalent id= for each name= can be useful regarding Javascript DOM logic (as required)
- No Table nor Div HTML here, but can be a styling method to employ for such forms
Here is some downloadable HTML programming source code you could call EmailStyleForm.html
You will find, in the blogging world, with the major blogging software suites, that “Contact Us” email forms will have many plugins available for you to research and explore. The effectiveness of the plugins should be measured along with what your web/email hosting is capable of, because if your web/email hosting does not deliver what you want, then plugins do not normally fix the problem.
If this was interesting you may be interested in this too.
