How do I add an email form into a html page?

Hi,

how can I add an email form to this page:
http://www.sancarlobasket.com/seriea.htm
so that the information collected (list ordered) are sent to an email address?

The best would be a code that I copy and past in the page itself, if it's possible

 

Since you posted this in the javascript section, you're hoping to send your email using a javascript code? The simple answer would be you can't do this using javascript alone. As a rule you need a server side handler to send emails. It can be done using a php script.

There's this simple php script that allows you to send emails via a form. For this script to work in your current htm file (seriea.htm) you will have to add this line of code to your .htaccess file:

AddType application/x-httpd-php .html .htm

If it doesn't make it work, change it to:

AddType application/x-httpd-php5 .html .htm

If your hosting provider doesn't allow .htaccess, simply rename your seriea.htm to seriea.php and it should work. If your hosting provider doesn't support PHP (which is rare but happens) then you will have to find one that does.

<?php
$action=$_REQUEST['action'];
if ($action=="")    /* display the contact form */
    {
    ?>
    <form  action="" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="action" value="submit">
    Your name:<br>
    <input name="name" type="text" value="" size="30"/><br>
    Your email:<br>
    <input name="email" type="text" value="" size="30"/><br>
    Your message:<br>
    <textarea name="message" rows="7" cols="30"></textarea><br>
    <input type="submit" value="Send email"/>
    </form>
    <?php
    }
else                /* send the submitted data */
    {
    $name=$_REQUEST['name'];
    $email=$_REQUEST['email'];
    $message=$_REQUEST['message'];
    if (($name=="")||($email=="")||($message==""))
        {
        echo "All fields are required, please fill <a href=\"\">the form</a> again.";
        }
    else{      
        $from="From: $name<$email>\r\nReturn-path: $email";
        $subject="Message sent using your contact form";
        mail("youremail@yoursite.com", $subject, $message, $from);
        echo "Email sent!";
        }
    }
?> 

Code (markup):

Make sure you change to your own email. (Note: it has to be a working email address you set up with your hosting provider, as an example: , etc.).

 

Hey thanks
I have renamed to .php and added an email form at my page: http://www.sancarlobasket.com/seriea.php
The problem is I want to send the email with the list ordered (top part) of the page together with the email
How to include that part?

 

QwikAd has it right in that neither JavaScript or HTML can do this on their own, they simply do not have access to the protocols needed to send an e-mail. This is on purpose as it would be a huge security risk and allow spamming on a massive scale.

A server side language like PHP, ASP, PERL, etc, etc... is required to send a mail from a contact form.

His example has some usability flaws (like the incomplete form), but for the most part is correct. It could also be simplified to not use the hidden input, though I'd probably add session validation to it. It would also be filling your log up with errors on first-load since it's not checking if that $_REQUEST "!isset" or properly using "empty", which would most certainly get logged, or hang if you turned on full error reporting. Likewise if value is empty you don't need to say value, and this is 2015 not 1997, you don't say "size" anymore as that's CSS' job. Also kinda funny you've got XML input with HTML breaks.... It's also invalid to say "POST" in upper-case in some flavors of HTML so just don't do that.

That said it does show the good practice of using the SAME file to both send the form and handle the form. This allows for things like re-sending the form client side if it fails server-side validation; even if you apply scripting based validation you should always re-check everything server side. (which the error inducing ="" that @qwikad tried to use is attempting to do... but again should be checking both "isset" and "empty" unless you want to fill your server log with errors.)

Gimme a few and I'll belt out a demo to show how I'd approach that. It will be a hair more complex, but it will also dot all the t's and cross all the i's... Wait, that's not right...

 

Uhm, what is that list even supposed to BE?!? Are those options the user is supposed to choose from, in which case they should be checkboxes or radio buttons?

 

That is a list, let's say a prevision about how a soccer league will end.
So I want the user to play with that list, re-order and send their list to my email

 

@deathshadow You may want to look deeper into that. I missed the part that @giusbit wants to send the list on that page (http://www.sancarlobasket.com/seriea.php) as part of an email. It would be easy to do if the list was always in the same order, but since it can be re-arranged I am not sure I know how to do that. Thanks.

 

To make things easier I could re-arrange the list with two static columns: the left is a drop-down menu with numbers from 1 to 20 and the right is the list of the 20 teams. So the user would individually assign the position (number) to each team.

I don't know how to do these 2 columns anyway

 

The problem is you want to do this simply by re-arranging the items and then getting them inserted in that order into the textarea. It's not an easy task.

What I'd do instead, I'd use jquery to let users insert products of their choosing into that text area onclick.

I've tested this. Seems to be working just fine. This is the jquery / html codes by themselves:

JS:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>

<script type="text/javascript">
$(window).load(function(){
$(".insert").click(function () {
    var insertText = $(this).text();
    $('#textarea').append(" " + insertText);
});
});
</script>

Code (markup):

HTML (add as many products / option as you wish):

<div class="insert">Your product 1</div>
<div class="insert">Your product 2</div>
<div class="insert">Your product 3</div>
<div class="insert">Your product 4</div>


<textarea name="message" rows="7" cols="30" id="textarea"></textarea>

Code (markup):

This is a working jsfiddle to see what it does: http://jsfiddle.net/Wkz6U/197/

So your overall code should look like this (copy and paste it into that page, to test):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style>
.insert {
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 1.3em;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>

<script type="text/javascript">
$(window).load(function(){
$(".insert").click(function () {
    var insertText = $(this).text();
    $('#textarea').append(" " + insertText);
});
});
</script>

</head>
<body>

<div class="insert">Your product 1</div>
<div class="insert">Your product 2</div>
<div class="insert">Your product 3</div>
<div class="insert">Your product 4</div>

<?php
$action=$_REQUEST['action'];
if ($action=="")    /* display the contact form */
    {
    ?>
    <form  action="" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="action" value="submit">
    Your name:<br>
    <input name="name" type="text" value="" size="30"/><br>
    Your email:<br>
    <input name="email" type="text" value="" size="30"/><br>
    Your message:<br>
    <textarea name="message" rows="7" cols="30" id="textarea"></textarea><br>
    <input type="submit" value="Send email"/>
    </form>
    <?php
    }
else                /* send the submitted data */
    {
    $name=$_REQUEST['name'];
    $email=$_REQUEST['email'];
    $message=$_REQUEST['message'];
    if (($name=="")||($email=="")||($message==""))
        {
        echo "All fields are required, please fill <a href=\"\">the form</a> again.";
        }
    else{    
        $from="From: $name<$email>\r\nReturn-path: $email";
        $subject="Message sent using your contact form";
        mail("youremail@yoursite.com", $subject, $message, $from);
        echo "Email sent!";
        }
    }
?>

</body>
</html>

Code (markup):

This also gives your users an option to choose what they want. I don't know maybe it is not what you're looking for, but as it is, it's a functional email sender with a select option.

PS Don't forget to change to your own email.

 

thank you for this...
http://www.sancarlobasket.com/gianlu.php
what I'd like is a better output so user can play with the items and re-order them as it was in the previous link.
Can you help me doing that?

 

No, I can't help you with that. Maybe someone else will be willing to make it work the way you want it to work, if they have time to do that.

 

ok anyone can help me more?

 

Well, the re-arranging part being scripttardery only capable REALLY would make me not put this concept on a website. Ever notice you don't see many if any "real" websites pulling these types of stunts? There's a reason for that.

Scripted drag nonsense (like most of the jquery based bull, and pretty much any of the useless inaccessible broken CRAP done with jquery-ui) is the antithesis of usability -- to then try and plug it into a form? Just begging for the page NOT to work.

BUT -- before I go dismissing the entire concept out of hand as "not viable for web deployment" I'd first be asking two questions:

1) What's the data?

2) Can we make some way to pass the data and have the user enter the information manually WITHOUT scripting, to then enhance it with scripting?

Both of these questions share an answer; the data is a bunch of labels each of which is assigned a number -- which mens they belong inside the form as precisely that: labels and input[number]! each entry would get something like:

<label for="element1">
  <input type="number" name="sort[1]" value="1">
  Describe this element here<br>
</label>

Code (markup):

Those are the elements that would be dragged and dropped. When they are "dropped" I'd walk the DOM to re-assign the values of the inputs in whatever order they end up in. I'd probably show the value of the input at all times, but when scripting is enabled (add a class to the parent fieldset -- as they ALL would go into a fieldset since it's, well... a set of fields) make the input "readonly" and style it so it just looks like a number.

Scripting off the user can manually edit the numbers, though you'd need a lot of back and forth between the server and user to make sure the entries are correct -- scripting on you enhance it with drag and drop, and MAYBE add some keyboard shortcuts too since not everyone using websites is relying on a mouse. Graceful degradation, it might not be pretty and might be hard to use without scripting, but at least it would be usable. It would also mean that client-side you wouldn't need to trap things like "onsubmit" since the form can do all the heavy lifting of sending your values to the server.

No clue how you would tie that into the trainwreck of scripttardery known as jQuery-UI, but that stems from the fact I'd never put the fat bloated steaming maggot ridden pile known as jQuery, much less massive interface asshattery based on it on a website in the first blasted place. (by itself jQuery being larger minified that I allow my HTML, CSS and scripts to reach without minification or whitespace stripping!)

Once you have that working on the server side you just process those input and add them to your message. Giving them all the same name as something like name="sort[3]" -- that would make them an array on the server-side that you could then walk for their values, using something like PHP's array sorting functions to put them into the order the user chose. Passing the index to it would let you index the list of labels server-side so you're passing less data back and forth. (since passing the entire label would suck on bandwidth like candy).

But really if this was a project I was working on, I'd be telling you not to even TRY and pull this type of stunt. Again there's a reason you don't see this being done on websites that actually care about people trying to use the page. Remember the unwritten rule of JavaScript -- if you can't make the page work without scripting FIRST, you likely have no business adding scripting to it!

THOUGH laughably I am working on something similar right now in terms of drag and drop for a scripted application (thats running on Electron, previously known as Atom Shell), just without the form or submit. (it's tabs). It's the only time I'd consider such UI stuff in JavaScript as crapplets operate on a whole different set of rules than a website.

If I have the time (kind of got waylaid by a paid project) I might take my stock form generator / validator and mailing script to try and add this functionality to it by tossing my own "drag and drop a list" script to it. No guarantees on when that might be though. While AGAIN I likely wouldn't put this on a website if I cared about people trying to use it, as an exercise in what's possible to do it's somewhat interesting.

 

Wow thanks for the long and detailed answer, really appreciated.
Hope you don't mind my answer is short....trying to simplify the communication here.
Anyway the datas are TEAMS and what I want to collect here is the prevision about how the soccer league is going to finish, so I ask the users to re-order the list based on their preference.
And I want that list to be sent via email