Looking for some help with my form please

[Foppa]

I have a simple form that I found from a tutorial but am now lost. Unfortunately I haven't learned forms yet.

My questions are: (based from the code below)

1. What do I add to my code to make the submit button, submit the info.
2. What do I add to my code to make my required fields, actually required upon submission?


HTML

<div id="stylized" class="myform">
                <form id="form" name="form" method="post" action="index.html">
                    <label>Name&nbsp;*</label>
                        <input type="text" name="name" id="name" />

                    <label>Email&nbsp;*</label>
                        <input type="text" name="email" id="email" />

                    <label>Website (URL)&nbsp;*</label>
                        <input type="text" name="website" id="website" />

                    <label>Phone Number</label>
                        <input type="text" name="phone number" id="phone number" />

                    <button type="submit"><img src="images/submit.gif" /></button>

                </form>
            </div>

CSS

.myform{
width:245px;
height: 340px;
padding: 60px 12px 0px 12px;
font-size:13px;
color: #ffffff;
}
#stylized{
background: url(images/quote-request-2.gif) no-repeat;
}
#stylized label{
display:block;
font-weight:bold;
width:140px;
text-align: left;
margin-left: 10px;
}
#stylized input{
font-size:13px;
padding:4px 2px;
width:200px;
margin:2px 0 10px 10px;
}
#stylized button{
background: none;
border: none;
margin-left:111px;
width:109px;
height: 30px;
}

[codecs]

You need php script to send that form through mail or to your database. You can also use javascript to check for required fields. Do you use software for your coding?

[Foppa]

Shoot, unfortunately, I'm only familiar with html/css.

I use Notepad++ but have Kompozer installed to give it a shot.

[urstop]

Check this link, it has a complete example with the code which you can use.

http://www.phpf1.com/tutorial/php-form.html

[Foppa]

Thanks for the helpful link.

[ScriptMan]

action="index.html">

You name the file you are posting the data to in the action call. In this case as you posted above the data is being submitted to index.html.

You can check the input with javascript or validate it when it gets to the php based form.


Tell us what you want to do with the data and someone will offer some suggestions.

[Foppa]

I see, thanks.

I'm looking to just have the info emailed to me.

[Izzmo]

Foppa, were you able to get this all worked out and getting the data emailed to yourself?

[Foppa]

Originally Posted by Izzmo

Foppa, were you able to get this all worked out and getting the data emailed to yourself?

Unfortunately, no. I think I'm just going to pay someone to do it.

[Izzmo]

It's not that difficult, I'm sure you could find someone to do it fairly cheap, or for free.

[megamoose]

STEP 1:
Change:

<form id="form" name="form" method="post" action="index.html">

To:

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

STEP 2:
Change:

<input type="text" name="phone number" id="phone number" />

To:

<input type="text" name="phonenumber" id="phonenumber" />

STEP 3:
Create a new file on your server called submit.php

STEP 4:
In that file put the following:

<?php

// Construct the message
$message = "Name: ".$_POST["name"];
$message .= "\n";
$message = "From: ".$_POST["email"];
$message .= "\n";
$message = "Website: ".$_POST["website"];
$message .= "\n";
$message = "Phone Number: ".$_POST["phonenumber"];

// Actually send the email
// YOUR EMAIL ADDRESS | SUBJECT | MESSAGE
mail('myemail@domain.com', "WEB FORM: ".$_POST["name"], $message);

// Navigate to the success.html page
header("location: success.html");

?>

STEP 5:
Create a success.html file which will contain a thank you or success page of your choice.

I haven't tested this, but if you want some help with it just ask.

[Foppa]

Wow, thanks a lot megamoose.

[Foppa]

I finally got around to testing the form and it does work, it just doesn't send all the information.

In the email I receive, I get the person's name in the email subject line and the only other info that I get is the phone number.

Any way to correct this? I made the changes you suggested and didn't change anything else.

[Smith.John]

Do you mean the front page disply problems?

[Foppa]

Originally Posted by Smith.John

Do you mean the front page disply problems?

I'm not sure what you mean. The problems are with the information that the script is emailing me once the form is filled out.

[htmlbasictutor]

Originally Posted by Foppa

I finally got around to testing the form and it does work, it just doesn't send all the information.

In the email I receive, I get the person's name in the email subject line and the only other info that I get is the phone number.

Any way to correct this? I made the changes you suggested and didn't change anything else.

You have to add more variables for the information collected on the form and add them to your message variable.

[megamoose]

Sorry the submit.php should be as follows

<?php

// Construct the message
$message = "";
$message .= "Name: ".$_POST["name"];
$message .= "\n";
$message .= "From: ".$_POST["email"];
$message .= "\n";
$message .= "Website: ".$_POST["website"];
$message .= "\n";
$message .= "Phone Number: ".$_POST["phonenumber"];

// Actually send the email
// YOUR EMAIL ADDRESS | SUBJECT | MESSAGE
mail('myemail@domain.com', "WEB FORM: ".$_POST["name"], $message);

// Navigate to the success.html page
header("location: success.html");

?>

Note how the $message now has a .= instead of = on each line. This was a mistake on my coding, as I didn't test it I didn't find the bug until you mentioned it. The .= appends to the variable as = resets it.

[Foppa]

Perfect, thanks megamoose, it's working great now. Thanks for the explanation too.

How can I make my required fields, actually required?

[Foppa]

I added another form to my contact page, but can't get the text boxes lined up. Can someone help me with this?

This is how it looks:

<div id="form-contact-page" class="contact-form">
<form action="contact.php" method="post">
<label for="Name:">Name:</label>
<input id="Name:" name="Name:" type="text" />

<label for="Email:">Email:</label>
<input id="Email:" name="Email:" type="text" />

<label for="Website(URL):">Website (URL):</label>
<input id="Website(URL):" name="Website(URL):" type="text" />

<label for="PhoneNumber:">Phone Number:</label>
<input id="PhoneNumber:" name="PhoneNumber:" type="text" />

<label for="Question/Comment:">Question / Comment:</label>
<textarea id="Question/Comment:" name="Question/Comment:"></textarea>

<button type="submit"><img src="images/submit2.gif" /></button>
</form>
</div>

.contact-form{
width:550px;
font-size:13px;
color: #165788;
padding:12px;
}
#form-contact-page label{
display:block;
font-weight:bold;
float:left;
clear: left;
}
#form-contact-page input{
font-size:13px;
padding:4px 2px;
width:200px;
margin:2px 0 10px 59px;
border: 1px solid #165788;
float: left;
}
#form-contact-page textarea{
font-size:13px;
padding:4px 2px;
width:300px;
height: 85px;
margin:2px 0 10px 12px;
border: 1px solid #165788;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#form-contact-page button{
background: none;
border: none;
margin-left:185px;
margin-top: 12px;
}

[socks]

Try using this; (I changed your css a little)

.contact-form {
	width:550px;
	font-size:13px;
	color: #165788;
	padding:12px;
}
#form-contact-page label {
	font-weight:bold;
	float:left;
	width: 150px;
	padding: 5px;
	clear: left;
}
#form-contact-page input {
	font-size:13px;
	padding:4px 2px;
	width:200px;
	margin:2px 0 10px;
	border: 1px solid #165788;
	float: left;
}
#form-contact-page textarea {
	font-size:13px;
	padding:4px 2px;
	width:300px;
	height: 85px;
	margin:2px 0 10px;
	border: 1px solid #165788;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#form-contact-page button {
	background: none;
	border: none;
	margin-left:185px;
	margin-top: 12px;
}

  <form action="contact.php" method="post">
    <label for="Name:">Name:</label>
    <input id="Name:" name="Name:" type="text" />
    <label for="Email:">Email:</label>
    <input id="Email:" name="Email:" type="text" />
    <label for="Website(URL):">Website (URL):</label>
    <input id="Website(URL):" name="Website(URL):" type="text" />
    <label for="PhoneNumber:">Phone Number:</label>
    <input id="PhoneNumber:" name="PhoneNumber:" type="text" />
    <label for="Question/Comment:">Question / Comment:</label>
    <textarea id="Question/Comment:" name="Question/Comment:"></textarea>
    <button type="submit"><img src="images/submit2.gif" /></button>
  </form>