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 HTML Forms Form Basics The Button Element

Shamez Walji
Shamez Walji
6,602 Points

How to add functionality to HTML forms

Hello so I am completing the HTML forms module and I have successfully applied a contact form to my personal website. However, it does not do anything when I hit submit. I was wondering how would I go about making the contact form work? What would be the next treehouse modules to learn from?

5 Answers

huckleberry
huckleberry
14,636 Points

JavaScript is the next step after you've got your HTML & CSS chops down. Those are the 3 languages that run the show 'round these here tubes.

  • HTML = Content
  • CSS = Presentation
  • JavaScript = Functionality

The trifecta.

You'll learn how to add functionality to your web pages as well as presentational 'flare' via both vanilla JS(term used for basic out-of-the-box core javascript without any fancy libraries handling the dirty work for you) and with the most popular JS library out there, JQuery.

Don't worry, treehouse has you covered ;)

Cheers,

Huck - :sunglasses:

I can't belive there hasn't been a defacto answer to your original question yet. Here is the course you need:

DOM Scripting by Example

https://teamtreehouse.com/library/dom-scripting-by-example

Shamez Walji
Shamez Walji
6,602 Points

So then are JavaScript and Jquery the next languages to learn to be able to submit the form? Or is a server-side language required like Phython, PHP or Ruby?

huckleberry
huckleberry
14,636 Points

Well, the thing is, 'submission' is already built in to the browser and the submit button is specifically built to tell the browser "ok, send this info somewhere!" and then the page refreshes... So, it's not the languages that allow you to 'submit' but rather the languages that allows you to build a script, have it on your server, and then use that script name to tell the browser WHAT to do with that information that's being 'submitted'. i.e. what script to send that stuff to.

Like, ok, you have a form and you've built it with several input fields and a submit button. You type stuff in and you hit submit. POOF! The page refreshes and it's all gone. It did go through the submit action it just didn't send it anywhere and it went nowhere and got discarded.

What you're thinking of with the PHP, Python, etc... is the script on the server side that you would send it to. And the answer is... any of those. You could have a PHP script a python script a perl script and now, you can use node.js for all that too.

When you have a form, you have those attributes of action and method, right? Well the method says what kind of submit you're rockin' (post/get) and the action tells the browser where to go to post OR get the information.

<!-- example using php-->
<form action="some-script-name.php" method="post">
    <!-- some form elements in here -->
</form>

<!-- example using python-->
<form action="some-script-name.py" method="post">
    <!-- some form elements in here -->
</form>

<!-- example using python-->
<form action="some-script-name.pl" method="post">
    <!-- some form elements in here -->
</form>

<!-- example using node-->
<form action="/someRefName" method="post"> <!-- someName sets a name that you can pass as a parameter in a function your refers to a function in your javascript file -->
    <!-- some form elements in here -->
</form>

So, your options are wide open as far as what you can actually use, it just depends on what you have running on your server that you're trying to communicate with.

But as far as the actual submission, that's just handled by the button/browser by default. What happens to the data after you hit submit, that's where you're using the server side scripts as a destination in the ~action~ attribute

Cheers,

Huck - :sunglasses:

p.s. If anyone wiser and more experienced with this stuff sees some incorrect info in the above, please, by all means, correct it.

I think your explanation is excellent huckleberry.

But I'm guessing what Shamez is asking is more specific to a "Contact" form as forms can be for anything e.i. login forms, newsletter forms, etc. For contact forms the most common action is to send an email confirmation to the admin of the site, so for that I'd say jump onto PHP lessons.

lauraniebel
lauraniebel
4,685 Points

What about the 'mailto' function? Could this be used for a simple contact form, before one has learned any server-side scripting?

Byron Glover
Byron Glover
5,772 Points

Thanks for all the great info so far, is it possible to submit the form to an email address like reception@company.com with out requiring some fancy back end code?