Need some help with a HTML form, anyone?

Things · Oct 6, 2010

Hey guys, I've been asked by my teacher to create him a website for his holiday program. I have created the website, however he was asking if I could add a application form. I have created almost all of the forms, but I am having difficulty figuring out how I have the form collect all the entered data, and email it off.

I also have added a captcha, but not sure how to make it interact with the form and let you know you got it wrong etc.

I know I probably won't get much help with this, as it's unpaid, but if anyone has the time and knows about it, I'd truly appreciate it.

Unfortunatly, I've had to create the site in Adobe Dreamweaver, so sorry about the state of the code. I will get to cleaning it up and removing some unneeded stuff shortly, but I'd like to try get this thing online ASAP.

So, if it could just email the data like:

Childs name: Herp Derp
Parents Name: Hurr Durr
Address: 123 Bob Street

And, for the dates of attendences mess of checkboxes, maybe just have it mention the unticked ones. Like, if I untick the 12th of January box and 20th of December box, it'll just send:

Not attending: 12th January : 20th December

Is this possible, or am I asking too much?

Heres the (dreadful) code. I've tried the mailto: method, but it doesn't work on pretty much every browser these days, so not quite sure how to do it.

HTML | <!DOCTYPE html PUBLIC "-//W3C/ - Anonymous - XYx8ZmjR - Pastebin.com

Cheers,
Dan

Rafa · Oct 6, 2010

Can you run PHP in the server you're going to use? If so, it will be pretty easy, I can help.

udanis · Oct 6, 2010

If your having trouble with the script on the server google docs offers an easy way to set up a web form if that helps

comradmax · Oct 6, 2010

Is this what you tried? It works on FF and IE for me, but this could be controlled by my browser settings...

Code:

<form action="mailto:myforms@mydomain.com">

You have 2 choices:
- "passive": rely on user's computer to have an email client and use the 'mailto:'
- "active": using a script on the webserver (PHP, Perl, etc)

http://www.html-form-guide.com/email-form/html-email-form.html

Possibly the user's computer must have a default email client defined. The link above says you have to have Outlook, so even worse...

Things said:
And, for the dates of attendences mess of checkboxes, maybe just have it mention the unticked ones. Like, if I untick the 12th of January box and 20th of December box, it'll just send:

Not attending: 12th January : 20th December

This will not be possible without scripting, if what you want to see are JUST the unchecked boxes in your email. Try this trick with hidden field: http://iamcam.wordpress.com/2008/01/15/unchecked-checkbox-values/.

Things · Oct 7, 2010

Yeah, I'd like to do it through something like PHP so I don't have to rely on the mailto: method. Problem? I don't know any PHP or how to set it up

Anyways, I've chosen just a basic template for now to make the code a little less uglier, and the page.

Damn it, pastebin is down. I wonder if LPF has code tags ...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Pioneer Arts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mm_entertainment.css" type="text/css" />
<style type="text/css">
<!--
.style1 {font-size: 9px}
-->
</style>
</head>
<body bgcolor="#14285f">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="02021e">
    <td width="400" colspan="4" rowspan="2" nowrap="nowrap"><img src="mm_entertainment_image.jpg" alt="Header image" width="400" height="140" border="0" /></td>
    <td width="360" height="58" nowrap="nowrap" id="logo" valign="bottom">Pioneer Arts</td>
    <td width="100%"> </td>
  </tr>
  <tr bgcolor="02021E">
    <td height="57" nowrap="nowrap" id="tagline" valign="top"> </td>
	<td width="100%"> </td>
  </tr>
  <tr>
    <td colspan="6" bgcolor="#cc3300"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>
  </tr>

   <tr>
    <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>
  </tr>

   <tr>
    <td colspan="6" bgcolor="#cc3300"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
  </tr>

   <tr>
    <td colspan="6"> <br />
	 <br />	</td>
  </tr>
  <tr>
    <td width="155" valign="top" height="370">
	<table border="0" cellspacing="0" cellpadding="0" width="155" id="navigation">
        <tr>
          <td width="155" height="40"><a href="index.html">Home</a></td>
        </tr>
        <tr>
          <td width="155" height="40"><a href="program.html">Program</a></td>
        </tr>
        <tr>
          <td width="155" height="40"><a href="application.html">Application Form</a></td>
        </tr>
         <tr>
           <td width="155" height="40"><a href="dates.html">Dates</a></td>
        </tr>
        <tr>
           <td width="155" height="40"><a href="media.html">Media</a></td>
        </tr>
        <tr>
           <td width="155" height="40"><a href="policies.html">Policies</a></td>
        </tr>
        <tr>
           <td width="155" height="40"><a href="about.html">About</a></td>
        </tr>
        <tr>
           <td width="155" height="40"><a href="contact.html">Contact</a></td>
        </tr>
         <tr>
           <td width="155" height="40"><a href="links.html">Links</a></td>
        </tr>
      </table></td>
    <td width="1" bgcolor="#445DA0"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
    <td width="50"><img src="mm_spacer.gif" alt="" width="50" height="1" border="0" /></td>
    <td width="304" colspan="2" valign="top"><img src="mm_spacer.gif" alt="" width="304" height="1" border="0" /><br />
	<table border="0" cellspacing="0" cellpadding="0" width="474">
        <tr>
          <td width="474" height="41" class="pageName">Application Form</td>
        </tr>
        <tr>
          <td class="bodyText"><p>You may book your childs into Pioneer Arts' blah blah through this online form. Blah blah ...</p>
            <p> </p>
            <table width="463" height="820" border="0" align="center">
              <tr>
                <th width="125" scope="col"><div align="right"><strong>Childs Name</strong></div></th>
                <th width="17" scope="col"> </th>
                <th width="133" scope="col"><div align="left">
                  <form id="form1" name="form1" method="post" action="">
                    <label>
                      <input name="childname" type="text" id="childname" size="40" />
                      </label>
                  </form>
                  </div></th>
              </tr>
              <tr>
                <td><div align="right"><strong>Parents Name</strong></div></td>
                <td> </td>
                <td><div align="left">
                  <form id="form2" name="form2" method="post" action="">
                    <label>
                      <input name="parentname" type="text" id="parentname" size="40" />
                      </label>
                  </form>
                  </div></td>
              </tr>
              <tr>
                <td><div align="right"><strong>Address</strong></div></td>
                <td> </td>
                <td><div align="left">
                  <form id="form3" name="form3" method="post" action="">
                    <label>
                      <textarea name="address" cols="37" rows="4" id="address"></textarea>
                      </label>
                  </form>
                  </div></td>
              </tr>
              <tr>
                <td><div align="right"><strong>Email</strong></div></td>
                <td> </td>
                <td><div align="left">
                  <form id="form4" name="form4" method="post" action="">
                    <label>
                      <input name="email" type="text" id="email" size="40" />
                      </label>
                  </form>
                  </div></td>
              </tr>
              <tr>
                <td><div align="right"><strong>Home Phone</strong></div></td>
                <td> </td>
                <td><div align="left">
                  <form id="form5" name="form5" method="post" action="">
                    <label>
                      <input name="hphone" type="text" id="hphone" size="40" />
                      </label>
                  </form>
                  </div></td>
              </tr>
              <tr>
                <td><div align="right"><strong>Mobile Phone</strong></div></td>
                <td> </td>
                <td><div align="left">
                  <form id="form6" name="form6" method="post" action="">
                    <label>
                      <input name="mphone" type="text" id="mphone" size="40" />
                      </label>
                  </form>
                  </div></td>
              </tr>
              <tr>
                <td valign="top"><div align="right"><strong>Dates of Attendance</strong></div></td>
                <td> </td>
                <td><div align="left">
                  <table width="221" height="200" border="0" align="left">
                      <tr>
                        <th width="104" scope="col">December</th>
                        <th width="101" scope="col">January </th>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d12" type="checkbox" id="d12" checked="checked" />
                        12th</label></td>
                        <td><label>
                          <input name="j3" type="checkbox" id="j3" checked="checked" />
                        3rd</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d13" type="checkbox" id="d13" checked="checked" />
                        13th</label></td>
                        <td><label>
                          <input name="j4" type="checkbox" id="j4" checked="checked" />
                        4th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d14" type="checkbox" id="d14" checked="checked" />
                        14th</label></td>
                        <td><label>
                          <input name="j5" type="checkbox" id="j5" checked="checked" />
                        5th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d15" type="checkbox" id="d15" checked="checked" />
                        15th</label></td>
                        <td><label>
                          <input name="j6" type="checkbox" id="j6" checked="checked" />
                        6th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d16" type="checkbox" id="d16" checked="checked" />
                        16th</label></td>
                        <td><label>
                          <input name="j7" type="checkbox" id="j7" checked="checked" />
                        7th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d17" type="checkbox" id="d17" checked="checked" />
                        17th</label></td>
                        <td><label>
                          <input name="j8" type="checkbox" id="j8" checked="checked" />
                        8th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d18" type="checkbox" id="d18" checked="checked" />
                        18th</label></td>
                        <td><label>
                          <input name="j9" type="checkbox" id="j9" checked="checked" />
                        9th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d19" type="checkbox" id="d19" checked="checked" />
                        19th</label></td>
                        <td><label>
                          <input name="j10" type="checkbox" id="j10" checked="checked" />
                        10th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d20" type="checkbox" id="d20" checked="checked" />
                        20th</label></td>
                        <td><label>
                          <input name="j11" type="checkbox" id="j11" checked="checked" />
                        11th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d21" type="checkbox" id="d21" checked="checked" />
                        21st</label></td>
                        <td><label>
                          <input name="j12" type="checkbox" id="j12" checked="checked" />
                        12th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d22" type="checkbox" id="d22" checked="checked" />
                        22nd</label></td>
                        <td><label>
                          <input name="j13" type="checkbox" id="j13" checked="checked" />
                        13th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d23" type="checkbox" id="d23" checked="checked" />
                        23rd</label></td>
                        <td><label>
                          <input name="j14" type="checkbox" id="j14" checked="checked" />
                        14th</label></td>
                      </tr>
                      <tr>
                        <td><label>
                          <input name="d24" type="checkbox" id="d24" checked="checked" />
                        24th</label></td>
                        <td><label>
                          <input name="j15" type="checkbox" id="j15" checked="checked" />
                        15th</label></td>
                      </tr>
                                  </table>
                </div></td>
              </tr>
              <tr>
                <td><div align="right"><strong>Times</strong></div></td>
                <td> </td>
                <td><form id="form10" name="form10" method="post" action="">
                  <label>
                    <select name="from" size="1" id="from">
                      <option value="f8">8:00am</option>
                      <option value="f830">8:30am</option>
                      <option value="f9">9:00am</option>
                      <option value="f930">9:30am</option>
                      <option value="f10">10:00am</option>
                      <option value="f1030">10:30am</option>
                      <option value="f11">11:00am</option>
                      <option value="f1130">11:30am</option>
                      <option value="f12">12:00pm</option>
                    </select>
                    </label>
                to 
                <label>
                <select name="to" id="to">
                  <option>10:00am</option>
                  <option>10:30am</option>
                  <option>11:00am</option>
                  <option>11:30am</option>
                  <option>12:00pm</option>
                  <option>12:30pm</option>
                  <option>1:00pm</option>
                  <option>1:30pm</option>
                  <option>2:00pm</option>
                  <option>2:30pm</option>
                  <option>3:00pm</option>
                  <option>3:30pm</option>
                  <option>4:00pm</option>
                  <option>4:30pm</option>
                  <option>5:00pm</option>
                  <option>5:30pm</option>
                  <option>6:00pm</option>
                </select>
                </label>
                </form>
                </td>
              </tr>
              <tr>
                <td><div align="right"><strong>Emergency Contact</strong></div></td>
                <td> </td>
                <td><div align="left">
                  <form id="form7" name="form7" method="post" action="">
                    <label>
                      <input name="emrgycontact" type="text" id="emrgycontact" size="40" />
                      </label>
                  </form>
                  </div></td>
              </tr>
              <tr>
                <td><div align="right"><strong>Childs Date of Birth</strong></div></td>
                <td> </td>
                <td><div align="left">
                  <form id="form8" name="form8" method="post" action="">
                    <label>
                      <input name="cdob" type="text" id="cdob" value="DD/MM/YYYY" size="40" maxlength="10" />
                      </label>
                  </form>
                  </div></td>
              </tr>
              <tr>
                <td><div align="right"><strong>Medical Conditions</strong></div></td>
                <td> </td>
                <td><div align="left">
                  <form id="form9" name="form9" method="post" action="">
                    <label>
                      <textarea name="medcond" cols="37" rows="3" id="medcond"></textarea>
                      </label>
                  </form>
                  </div></td>
              </tr>
              <tr>
                <td><p>Verification</p>
                <p class="style1">(This is just to make sure you are human and not an automated spam bot)</p></td>
                <td> </td>
                        <td><div align="left">  <script type="text/javascript"
     src="http://www.google.com/recaptcha/api/challenge?k=6LfCpL0SAAAAAI3ay64TarLhBnHsTmwBOe46jYQf">
  </script>
  <noscript>
     <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfCpL0SAAAAAI3ay64TarLhBnHsTmwBOe46jYQf"
         height="300" width="500" frameborder="0"></iframe><br />
     <textarea name="recaptcha_challenge_field" rows="3" cols="40">
     </textarea>
     <input type="hidden" name="recaptcha_response_field"
         value="manual_challenge" />
  </noscript></div></td>
              </tr>
            </table>
            <p align="center">Insert funkeh submit button here ...</p>
            <p> </p>            </td>
        </tr>
      </table>	</td>
    <td width="100%"> </td>
  </tr>
  <tr>
    <td width="155"> </td>
    <td width="1"></td>
    <td width="50"> </td>
    <td width="194"> </td>
    <td width="110"> </td>
    <td width="100%"> </td>
  </tr>
</table>
</body>
</html>

yay.

Still gotta figure out how to make the captcha work though, and make a submit button.

Rafa · Oct 7, 2010

First you have to put all the options of the form in one big <form> tag, wich should be like this:

<form id="Form" name="Form" method="post" action="sendmail.php">

Give me all the option's names and id's and I can make the sendmail.php for you if you want to.

Things · Oct 7, 2010

Ok well, from 1:20pm this afternoon till 12pm tonight, I have been working on the form, and I have got it to the stage where it now accepts input from the form, and emails it to me

However, I have 3 more, probably very simple things I need help with.

1. reCaptcha. I want to put a reCaptcha on the page to prevent people abusing the form, however I'm not sure how to code it in to work with my current setup (the application.html form submits to result.php when the Submit button is clicked)

2. Prevent the form from continuing if the Policies agreement box above the submit button is not checked. maybe have it grey out the submit button?

3. Make all the forms required, except maybe the medical conditions. I have seen javascript that does this easily, but I haven't been able to get this to work.

If anyone could help me with these 3, probably very simple things, I'd appreciate it. My head is hurting from trying to learn HTML, Javascript and PHP all in the same day

Here is the application page: http://pastebin.com/H674MiYf

A live version of this code can be found here: Pioneer Arts

And the results page: PHP | <!DOCTYPE html PUBLIC "-//W3C/ - Anonymous - abHrX7YW - Pastebin.com

And you can get to the results page just by clicking the Submit button, as it is, nothing is required to be filled out to submit the form (Which I'm trying to fix above).

It is currently setup to send me emails though, so don't abuse it too much

Mm yeah, so if anyone could help me out with those few things

Cheers,
Dan

Trevor · Oct 7, 2010

I'll be on laserchat in 25 minutes.

-Trevor

Things · Oct 7, 2010

Ok, it's 12:30am but I guess I can stay a bit longer!

Need some help with a HTML form, anyone?

Things

0

Rafa

0

udanis

0

comradmax

0

Things

0

Rafa

0

Things

0

Trevor

0

Things

0

Online statistics

Forum statistics

Share this page