Creating a basic form

[kazual90]

Hi...I have a basic form that I need "tweaked" so that I can add company name and also maybe some check boxes so the information will be send to my e-mail and then sent back to my home page...below is the form that I would like to use...

I would like
Name
Company Name
e-mail address
"check box" transcription needs
"check box" mass mailing needs
"other"
comments
submit Reset

Any help would be GREAT appreciated...I know nothing about HTML and keep taking bits and pieces from different websites dedicated to HTML beginners

again thank you!!!

<FORM action="mailto:lindad@justyourtypeservice.com" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>

also, when it comes up now after you hit submit, I would only like it to say, thank you or something like that

[Mhtml]

Well firstly, I think that it's time you jump into the deep end and start learning HTML. Try http://www.w3schools.com ..

Secondly do you mean the alert that pops up after you submit? You can't do anything about that because the way you are sending your email is a security risk.

Thirdly here is your html:

<form action="mailto:youraddy@yourdomain.com">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="Name"/></td>
</tr>
<tr>
<td>Company name:</td>
<td><input type="text" name="CompanyName"/></td>
</tr>
<tr>
<td>Email address:</td>
<td><input type="text" name="Email"/></td>
</tr>
<tr>
<td>Transcription needs:</td>
<td><input type="checkbox" name="TransactionNeeds"/></td>
</tr>
<tr>
<td>Mass mailing needs:</td>
<td><input type="checkbox" name="MassMail"/></td>
</tr>
<tr>
<td>Other:</td>
<td><textarea cols="30" rows="4" name="Other"></textarea></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea cols="30" rows="4" name="Comments"></textarea></td>
</tr>
<td colspan="2"><input type="submit"/>&nbsp;<input type="reset"/></td>
</tr>
</table>
</form>


Some validation would be good in that..

[kazual90]

okay, just tried it and it takes me a blank outlook screen instead of just going back to my home page and "virtually" submitting the message

[oracleguy]

Frankly, I'm a little confused by what you mean when you say "virtually" submitting the message.

Do you mean that it emails you the information without user intervention like not bringing up outlook and such?

[zoobie]

Try this:

<input type="submit" onClick="window.location='next_page.html'">

Been a long time... :D

Btw, it's not a good idea to use mailto: because
1) They may not have a default email client
2) Ugly prompts
3) Spam bots

This is why server-side mailing would be much better using a host with asp, php, or cgi capabilities.

If your host doesn't have these or you're using a free host, try the free form service at Bravenet.com for smooth operation. :thumbsup:

[Mhtml]

Yeah that'll work zoobster, I forgot to include it ..oops ;)

Also I'd recommend that you don't use mailto: as an action, I personally don't use mailto: links very often, and when I do I send it from my hotmail account..

[brothercake]

Ahem :p It's semantically wrong to use a table to lay out a form; and you're missing some important accessibility markup. A form should be more like:


<form action="" method="post">

<fieldset>

<legend>Personal information</legend>

<input type="text" name="realname" id="realname" value="" />
<label for="realname">&nbsp;Name</label>
<br />
<input type="text" name="companyname" id="companyname" value="" />
<label for="companyname">&nbsp;Company name</label>
<br />
<input type="text" name="email" id="email" value="" />
<label for="email">&nbsp;Email address</label>

</fieldset>

<fieldset>

<legend>Your business needs</legend>

<input type="text" name="transcription" id="transcription" value="" />
<label for="transcription">&nbsp;Transcription needs</label>
<br />
<input type="text" name="massmailing" id="massmailing" value="" />
<label for="massmailing">&nbsp;Mass mailing needs</label>
<br />
<input type="text" name="other" id="other" value="" />
<label for="other">&nbsp;Other needs</label>

</fieldset>

<fieldset>

<legend>Miscellaneous</legend>

<input type="text" name="comments" id="comments" value="" />
<label for="comments">&nbsp;General comments</label>

</fieldset>

<br />
<input type="submit" />

</form>

[Mhtml]

I've always wondered about <fieldset> you happen to know where it is on w3c? I'd be very interested in getting up to date. :)

[brothercake]

Check this http://www.w3.org/TR/html4/interact/forms.html

[bazz]

Sorry if I'm butting in here but, I have used your (better looking) script as follows. The response message is shown beneath.


<!DOCTYPE HTML PUBLIC "-//SoftQuad//DTD HoTMetaL PRO 5.0::19981022::extensions to HTML 4.0//EN" "hmpro5.dtd">

<HTML>

<HEAD>
<TITLE></TITLE>
<META NAME="DESCRIPTION" CONTENT="">
<META NAME="KEYWORDS" CONTENT="">
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<P><B>Form</B></P>
<P ALIGN="LEFT">Please complete all sections of our online form and click the Submit button.</P>

<form action="http://www.metronet.co.uk/cgi-bin/formmail.pl" method="post">

<input type="hidden" name="recipient" value="me@mydomain.com">
<fieldset>

<legend>Personal information</legend>

<input type="text" name="realname" id="realname" value="" />
<label for="realname"> Name</label>
<br />
<input type="text" name="companyname" id="companyname" value="" />
<label for="companyname"> Company name</label>
<br />
<input type="text" name="email" id="email" value="" />
<label for="email"> Email address</label>

</fieldset>

<fieldset>

<legend>Your business needs</legend>

<input type="text" name="transcription" id="transcription" value="" />
<label for="transcription"> Transcription needs</label>
<br />
<input type="text" name="massmailing" id="massmailing" value="" />
<label for="massmailing"> Mass mailing needs</label>
<br />
<input type="text" name="other" id="other" value="" />
<label for="other"> Other needs</label>

</fieldset>

<fieldset>

<legend>Miscellaneous</legend>

<input type="text" name="comments" id="comments" value="" />
<label for="comments"> General comments</label>

</fieldset>

<br />
<input type="submit" />

</form>
</BODY>
</HTML>



Below is the confirmation message. As you can see, not all the fields are being submitted. What am I doing wrong???

Thanks.

Below is what you submitted to on Sunday, April 6, 2003 at 02:39:40


--------------------------------------------------------------------------------

companyname: test

transcription: test

massmailing: test

other: test

comments: test

[Mhtml]

Hmm.. well I've never used formmail. Does it just collect everything in the post array? Or do you have to specify?

If it's the former than I see no reason for why it isn't working, if it's the later possibly you have the field names wrong or maybe even you have a limit on the number of forms being posted?

Hmm.. anyone? :confused:

Also thanks for the URL Bro! :)

[kazual90]

hi...i want to thank everyone very much for all of their help but I just want a very simple form, like the one that I had but just adding a couple more lines, like someone had given me and I want the e-mail to be sent without user intervention like outlook...

Can anyone just tweak the code that I had so it will be sent without user intervention like outlook?

thank you

[zoobie]

Without user intervention?

Please clarify what exactly you want to happen...if anything. :rolleyes:

[ronaldb66]

Brothercake,

I could have expected you to introduce some lesser know elements again; thanks a buch for that since I happen to be busy with a form for someone, too.
How do UA's render these elements? I saw in the DTD that the legend element is inline and that fieldset is a flow element; I guess that makes it similar to a div, with the added specific use for grouping elements in forms.

[kazual90]

okay what I need is, when someone fills in their information that it automatically goes to MY e-mail...emailto:

Like I said previous, I am not HTML savy and take bits and pieces from different sites and try and figure out how to make it work.

thanks

[zoobie]

Ok...You've tried the above suggestions and it didn't work? You're using <FORM action="mailto:lindad@justyourtypeservice.com"> ?
Like I said, the user has to have an email client (Outlook, Pegasus, etc) installed on their machine for this inferior method to work. Your best bet would be to use www.bravenet.com 's free service which is smoother, without prompts, and doesn't require the user to have a client installed. :)

[kazual90]

yes, it did work in the form that I had used previously but would like to use this form that someone had given me but where do I put the mailto:

thanks

<form action="" method="post">

<fieldset>

<legend>Personal information</legend>

<input type="text" name="realname" id="realname" value="" />
<label for="realname"> Name</label>
<br />
<input type="text" name="companyname" id="companyname" value="" />
<label for="companyname"> Company name</label>
<br />
<input type="text" name="email" id="email" value="" />
<label for="email"> Email address</label>

</fieldset>

<fieldset>

<legend>Your business needs</legend>

<input type="text" name="transcription" id="transcription" value="" />
<label for="transcription"> Transcription needs</label>
<br />
<input type="text" name="massmailing" id="massmailing" value="" />
<label for="massmailing"> Mass mailing needs</label>
<br />
<input type="text" name="other" id="other" value="" />
<label for="other"> Other needs</label>

</fieldset>

<fieldset>

<legend>Miscellaneous</legend>

<input type="text" name="comments" id="comments" value="" />
<label for="comments"> General comments</label>

</fieldset>

<br />
<input type="submit" />

</form>

[zoobie]

In the action.

<FORM action="mailto:lindad@justyourtypeservice.com" method="post">

Then, take out <input type="submit" /> and put this in:

<imput type="submit" onClick="window.location='your_next_page.html'" value="Send">

...which will then take them to the page of your choosing after submitting.

I already mentioned all of this. Please read our replys carefully. :)

You'll need a little javascript if you want a thankyou alert to pop up after the submit is clicked.

[kansel]

ronaldb66 -
www.crockford.com (http://www.crockford.com)
uses the FIELDSET and LEGEND elements (semantically incorrectly) as design tools. The site shows borders on both elements, showing how they will render. I have noticed that IE and Mozilla do render them slightly differently from eachother, big surprise.

[liorean]

Add Opera 7 with yet another rendering. I'd not be surprised if Safari added one interpretation of it, too.
Mozilla's implementation looks nicest, though.

If you have a look at my site, you'll find I use legend/fieldset combo for layout, but it isn't entirely semantically wrong either - after all, those elements are really fields (of links) with a legend that is quite appropriate.

[brothercake]

Originally posted by liorean
If you have a look at my site, you'll find I use legend/fieldset combo for layout, but it isn't entirely semantically wrong either - after all, those elements are really fields (of links) with a legend that is quite appropriate.
Yeah I spotted that; rather nice :) I'm not sure if fieldset can only be used for forms - semantically it does make sense as a general grouping element, unless it's deemed to imply input-interaction, like an OS dialogue. Not sure really.
Originally posted by ronaldb66
How do UA's render these elements?
By default it varies quite a lot. The most obvious thing you'll see is that only mozilla and mac/ie5 have the sense to apply even padding inside the fieldset; win/IE and Opera have no top padding. Check out http://af.brothercake.com/_template.php which is a template I'm working on - it has a form with fieldsets in it - pretty much their default appearance, except I added -moz-border-radius for a nice curve :)

Earlier netscapes are a problem - ns4 and backwards have no idea about fieldset - to them it's just the text of the legend. Not good really - you want at least line break after the legend, so what I do is add a hidden line-break that only legacy browsers can see:

<span class="notThere"><br /></span>

(where "notThere" is "display:none" in an @import stylesheet.)

Opera 6 draws a box for the fieldset, but the legend isn't imposed - it's like the first inline element inside the box.

And Safari, unfortunately, is a big problem - by default it doesn't render the fieldset or the legend. But looking at liorean's site it looks like it does render the fieldset border if you style it (still no legend though)

But happily Lynx and Mosaic, as is often the case, know exactly what you mean ;)

Anyway, Fieldset is block and legend is inline, as you'd expect.

Label is also inline, and you use the "for" attribute to associate it with the ID of an element, so that, for example, a checkbox label will check the box when you click the label :)

[kazual90]

okay this is the form that I would like to use...alot of the responses, thank you but most of it is greek to me...I like the below form but do NOT want it to take me to a blank outlook screen...just want it to submit and in 3 seconds or so, put up in my mailbox...how do i do that?

thanks

<form action="mailto:myname@mydomain.com">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="Name"/></td>
</tr>
<tr>
<td>Company name:</td>
<td><input type="text" name="CompanyName"/></td>
</tr>
<tr>
<td>Email address:</td>
<td><input type="text" name="Email"/></td>
</tr>
<tr>
<td>Transcription needs:</td>
<td><input type="checkbox" name="TransactionNeeds"/></td>
</tr>
<tr>
<td>Mass mailing needs:</td>
<td><input type="checkbox" name="MassMail"/></td>
</tr>
<tr>
<td>Other:</td>
<td><textarea cols="30" rows="4" name="Other"></textarea></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea cols="30" rows="4" name="Comments"></textarea></td>
</tr>
<td colspan="2"><input type="submit"onClick="window.location='next_page.html'"/>
</tr>
</table>
</form>

[zoobie]

You're using your email address in the mailto:?
Put method="post" & enctype="text/plain" back in there like the other examples.
What are you receiving?
Put a page in the 'your_next_page.html' like your 'index.html' or 'thankyou.html' page so it goes somewhere after sending.
Tell us what's exactly happening...if anything.
You're very close to success. :p

PS - Once you get it working, you can use/design/style any form you wish to your hearts content. :o

[kazual90]

okay, it is taking me to a blank outlook screen...i do not want that...i just want them to go back to my home page...

As I have stated before, I am not that good with html codes

[brothercake]

You can't. If you're using mailto: as the protocol you have no control over however Outlook behaves in response.

[kazual90]

okay, on this form below, it stays on my contact screen and an e-mail is sent to me, NOT using any outlook or anything else that the client has to input, except for the information that is requested on the form...all I want to do is change what is requested from the potential client, that's it..

Instead of just asking for name and e-mail, i want it to have:

name
company
e-mail
phone number
Transcription Needs (with a check box)
Mass Mailing Needs (with a check box)
comments

Now, I just used this form on my web and received this e-mail IMMEDIATELY in my inbox:
name=
email=
comment=
submit=Submit



<FORM action="mailto:lindad@justyourtypeservice.com" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD> </TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>

[zoobie]

Here's a whole page. I'd suggest you first copy it and try it first then take what you like.
Scroll down to the bottom and you'll see in bold where you can send the user after he clicks the Send button. I've set it to index.html
Works fine for me. :D

You rock!:cool:

<html>
<head>
<title>Feedback</title>
</head>
<body bgcolor="000099" onload="this.myform.Name.focus()">
<table align="center" style="border:9 gold solid;font:bold italic 30 arial; color:white">
<tr>
<td align="center">KAZUAL'S OFFICIAL ORDER FORM</td>
</tr>
</table>
<br>
<form name="myform" action="mailto:lindad@justyourtypeservice.com?subject=Official Order Form" method="post" enctype="text/plain">
<table align="center" style="font:bold italic 18 arial; color:white">
<tr>
<td align="right">Name:</td>
<td><input type="text" name="Name"/></td>
</tr>
<tr>
<td align="right">Company:</td>
<td><input type="text" name="Company"/></td>
</tr>
<tr>
<td align="right">Email:</td>
<td><input type="text" name="Email"/></td>
</tr>
<tr>
<td align="right">Phone:</td>
<td><input type="text" name="Phone"/></td>
</tr>
<tr>
<td align="right">Transcription needs:</td>
<td><input type="checkbox" name="TransactionNeeds"/></td>
</tr>
<tr>
<td align="right">Mass mailing needs:</td>
<td><input type="checkbox" name="MassMail"/></td>
</tr>
<tr>
<td align="right">Comments:</td>
<td><textarea cols="25" rows="4" wrap="wrap" name="Comments"></textarea></td>
</tr>
<td colspan="2" align="center" style="padding-top:30"><input type="submit" value="Send" onClick="window.location='index.html';"/></td>
</tr>
</table>
</form>
</body>
</html>

[kazual90]

Hi..the form is perfect EXCEPT, the colors...they are gray, i guess and I have a gray background...so just need to change the colors, which of course, don't know how...so a little help would be great...thanks

[Saj]

To what?

Here are some nice hex charts to choose from...choose what color you want, and just change what he has.

http://www.hypersolutions.org/pages/rgbhex.html
http://www.geocities.com/webtvbeth/hexchart.html
http://www.december.com/html/spec/color.html

You have to put the number code (such as #ffffff, which is white) here:


<body bgcolor="000099" onload="this.myform.Name.focus()">

<table align="center" style="font:bold italic 18 arial; color:white">


In the second one you can put either the color code or simple color names. Things like Navy Blue won't work.

[kazual90]

WAHOOOOOO, I got it...thank you so much...went to hypersolutions.org and figured it out from there

thank you again...EVERYONE!!!!

[zoobie]

Very good. Now, what happens if they don't have a email client installed? Nothing. They won't be able to contact you. This is what we've been trying to communicate.

If you go to www.bravenet.com and sign up for their free form service, everyone will be able to contact you. You can use the form you have now by adding 2 lines of code and it will show up in your inbox even faster than the method you're using now. It's very simple to use and comes complete with directions. If you get stuck, just post here and we'll fix you up. :D

[BrotherGump]

I am hoping all the people who added to this topic are not deseased or herewith removed............LOL

But I am in need of a form. I use a formmail program or script from Matt's and it operates thru cgi.
I have a form on this page that works. I used same format on a new page and it just will not work. Could you see what is wrong?
=======================

<TABLE ALIGN="center" BGCOLOR="#F5F5DC" BORDER="2" CELLSPACING="2" CELLPADDING="2" WIDTH="90%"><tr><td width="40%>
<form name="formmail" action="http://www.usabusinesslisting.com/cgi-bin/formmail/formmail.cgi" method="post"><input type=hidden name="recipient" value="support@usabusinesslisting.com,brothergump2@aol.com">

Move my credits from:&nbsp;USA Business Listing to:</td><td>
<SELECT NAME="USA Business Listing to"> <OPTION VALUE="submit" SELECTED>
<OPTION>ProductOnly SuperSurf</OPTION>
<OPTION>Brother and MeMe\'s</OPTION>
<OPTION>ShoMeThaMoney</OPTION></SELECT>&nbsp;Amount<INPUT TYPE="Text" NAME="from USA Business Listing to" VALUE="">
</td></tr><tr><td>
Move my credits from:&nbsp;ProductOnly SuperSurf to:</td><td>

<SELECT NAME="ProductOnly SuperSurf to"> <OPTION VALUE="submit" SELECTED>
<OPTION>USA Business Listing</OPTION>
<OPTION>Brother and MeMe\'s</OPTION>
<OPTION>ShoMeThaMoney</OPTION></SELECT>&nbsp;
Amount<INPUT TYPE="Text" NAME="from ProductOnly SuperSurf to" VALUE="">
</td></tr><tr><td>

Move my credits from:&nbsp;Brother and MeMe\'s to:</td><td>
<SELECT NAME="Brother and MeMe\'s to"> <OPTION VALUE="submit" SELECTED>
<OPTION>ShoMeThaMoney</OPTION>
<OPTION>ProductOnly SuperSurf</OPTION>
<OPTION>USA Business Listing</OPTION></SELECT>&nbsp;
Amount<INPUT TYPE="Text" NAME="from Brother and MeMe\'s to" VALUE="">
</td></tr><tr><td>

Your User name</td><td><INPUT TYPE="Text" NAME="user name" VALUE=""></td></tr>
<tr><td>
Your password</td><td><INPUT TYPE="Text" NAME="password" VALUE=""></td></tr>
<tr><td>
Your Real name</td><td><INPUT TYPE="Text" NAME="real name" VALUE=""></td></tr>
<tr><td>
Your Address</td><td><INPUT TYPE="Text" NAME="address" VALUE=""></td></tr>
<tr><td>

<br>
<INPUT TYPE="Submit" NAME="Submit" VALUE="Request Transfer">
</form>

</td></tr></table>

===================

I have 3 option boxes in this form. I tryed deleting 2 of them and it still did not work. I am using the same form heading on other pages and it works fine.
I added this <OPTION VALUE="submit" SELECTED>
instead of <OPTION>. That didn't work.

I am stumped!
Sincerely,
Mike Harmon

[bazz]

Not that it should be a surprise to anyone but, I too am stumped.

I checked it in my perl editor and it shows syntax to be OK.


#!/usr/bin/perl

print "Content-type: text/html\n\n";

print qq(
<html>
<body>
<TABLE ALIGN="center" BGCOLOR="#F5F5DC" BORDER="2" CELLSPACING="2" CELLPADDING="2" WIDTH="90%"><tr><td width="40%>
<form name="formmail" action="http://www.usabusinesslisting.com/cgi-bin/formmail/formmail.cgi" method="post"><input type=hidden name="recipient" value="support@usabusinesslisting.com,brothergump2@aol.com">

Move my credits from:&nbsp;USA Business Listing to:</td><td>
<SELECT NAME="USA Business Listing to"> <OPTION VALUE="submit" SELECTED>
<OPTION>ProductOnly SuperSurf</OPTION>
<OPTION>Brother and MeMe\'s</OPTION>
<OPTION>ShoMeThaMoney</OPTION></SELECT>&nbsp;Amount<INPUT TYPE="Text" NAME="from USA Business Listing to" VALUE="">
</td></tr><tr><td>
Move my credits from:&nbsp;ProductOnly SuperSurf to:</td><td>

<SELECT NAME="ProductOnly SuperSurf to"> <OPTION VALUE="submit" SELECTED>
<OPTION>USA Business Listing</OPTION>
<OPTION>Brother and MeMe\'s</OPTION>
<OPTION>ShoMeThaMoney</OPTION></SELECT>&nbsp;
Amount<INPUT TYPE="Text" NAME="from ProductOnly SuperSurf to" VALUE="">
</td></tr><tr><td>

Move my credits from:&nbsp;Brother and MeMe\'s to:</td><td>
<SELECT NAME="Brother and MeMe\'s to"> <OPTION VALUE="submit" SELECTED>
<OPTION>ShoMeThaMoney</OPTION>
<OPTION>ProductOnly SuperSurf</OPTION>
<OPTION>USA Business Listing</OPTION></SELECT>&nbsp;
Amount<INPUT TYPE="Text" NAME="from Brother and MeMe\'s to" VALUE="">
</td></tr><tr><td>

Your User name</td><td><INPUT TYPE="Text" NAME="user name" VALUE=""></td></tr>
<tr><td>
Your password</td><td><INPUT TYPE="Text" NAME="password" VALUE=""></td></tr>
<tr><td>
Your Real name</td><td><INPUT TYPE="Text" NAME="real name" VALUE=""></td></tr>
<tr><td>
Your Address</td><td><INPUT TYPE="Text" NAME="address" VALUE=""></td></tr>
<tr><td>

<br>
<INPUT TYPE="Submit" NAME="Submit" VALUE="Request Transfer">
</form>

</td></tr></table> </body></html>
);



I didnt know whether you had it as an html/html page or within your cgi file. Also plz note that I have no Doctype at the top or 'char encoding', which you should add.

sorry that this is of little help.

Bazz