Zymic Webmaster Forums > Need Some Website Dev Help

refincome

Jun 10 2008, 01:37 AM

ok. i'm new to html web design and am using frontpage 2003. it's all i have and so far is pretty easy to learn and use. it seems to do all i need for the simple pages i'm puting together.

one thing i don't know how to do is a page for submitting contact info - name, address, phone, email, etc... you know, one of those pages with the boxes and pulldown country menus, etc...

is there a source that has the html code i need? where can i get it? also, once the info is filled in, how do i get it or view it once the client submits it?

any and all help is appreciated.

Jacob

Jun 10 2008, 02:11 AM

Ok, I only have a few problems with this.
1. DO NOT use frontpage generated objects (such as buttons) as it generates a whole lot of crap you do not need. Just use raw code and you'll be sweet.
2. For the second half of your problem, you are going to need a PHP email/contact script (google for PHP contact script) that sends the information to you via email or whatever. Please also that the PHP function mail() (used for all [or very large majority] PHP mailing scripts) is disabled by the Zymic servers.
Although you can very easily format (get the layout) of your form using HTML but you need PHP to make it work.

Jacob.

refincome

Jun 10 2008, 02:30 AM

thanks for the info. one question, since i hope to be using zymic's service (if it ever is up and running for new regs), i won't bother with the PHP mail if i t won't work.

is there another alternative? thx.

Jetteh22

Jun 10 2008, 02:37 AM

yes.
there are alot of sites out there that allow you to email using their servers.
this is done simply but changing a few lines in your form

ie
<form action="THE SITES ACTION HERE" method="post">

andyou would change the form input names to things like "q1, q2, q3" ect.

I had a site that did this and it will be up again soon

King Tut

Jun 10 2008, 09:44 AM

I think you have 2 easy options to do the contact form that you want:

Option 1 : ( if your webhost have send mail feature ENABLED ) its not enabled if you are hosting on zymic freee host

Copy and past the following code to a new web page for example mail.php or contact.php as you like.
just open the notepad or aptana or any any other program you preffer but i dont like front page.

after you open the notepad paste this code and save it as mail.php or cantact.php and from the another tab choose "allfiles" dont save as text document.

<?php

//variables (change these)

$youremail = "name@domain.com";
// your email address

$subject = "Contact";
// the subject of the email

$thankyou = "thankyou.php";
// thank you page ( if you dont like to use/have thankyou page just write index.php )

// don't change anything else

;if($email == ""){
?>
No email address added. Please go back.<br/>
"<?php
;}elseif($name == ""){
"?>
No name added. Please go back.<br/>
<?php
;}elseif($message == ""){
"?>
No message added. Please go back.<br/>
"<?php
;}else{

$msg = ereg_replace("\\\'", "'", $message);
$msg = ereg_replace('\\\"', "\"", $msg);
$message1 = "from: $name\nemail: $email\nmessage:\n$msg1";

mail($youremail, $subject, $msg, "From: $email\r\nReply-to: $email\r\n");
?>
<meta http-equiv="refresh" content="0; url=<?echo $thankyou;?>"">
"<?php
}
"?>

after pasting this code you better include the mail.php or contact.php to your index.php page by putting this code where you want to put the contact form:

<?php include('mail.php'); ?>

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

Option 2: Create a contact form as "contact.html" and connecting it with a php page as for example mailer.php:

The HTML Page
First, let us create the HTML page that simply contains the contact form. Create a new page called contact.htm. On that page, we will be add our contact form. Our form is very simple. It simply contains two text fields and and one text area.

Here is how our final form would look - not very pretty, I know:

But, let's start with a very basic form and build our way up to having something more complicated such as what you see above. The following is a lite version of the form:

<form method="POST" action="mailer.php">
<input type="text" name="name" size="19"><br>
<br>
<input type="text" name="email" size="19"><br>
<br>
<textarea rows="9" name="message" cols="30"></textarea>
<br>
<br>
<input type="submit" value="Submit" name="submit">
</form>

Note the code that is colored in blue. The blue colored words will be useful sd we write the
PHP code.

you created the contact.htm file. Of course, that is just one half of our contact form. The PHP file, which you'll create on this page, will complete our basic contact form!

So, here is our PHP code. You should place the following code into a new file you create called mailer.php.

<?php if(isset($_POST['submit'])) { $to = "you@you.com"; $subject = "Form Tutorial"; $name_field = $_POST['name']; $email_field = $_POST['email']; $message = $_POST['message']; $body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message"; echo "Data has been submitted to $to!"; mail($to, $subject, $body);} else { echo "blarg!";} ?>

Once you copy and paste the above code into mailer.php, make sure you change the text you@you.com to your e-mail address. Save this file.

You should now have completed versions of both the contact.htm and mailer.php files. Upload both of those files to the same directory on your web server. Open the contact.htm page in your browser. Fill out the form and press the Submit button. If everything worked out, which I'm sure it did, you should receive the data you entered in the mailbox of the address you specified in mailer.php.

Why this Works
In this and the previous page, you simply copied and pasted code I gave you. I'm going to explain why the code works so that you can implement your own variation of this form for your needs later!

Let's start with the HTML code:

<form method="POST" action="mailer.php">
<input type="text" name="name" size="19"><br>
<br>
<input type="text" name="email" size="19"><br>
<br>
<textarea rows="9" name="message" cols="30"></textarea>
<br>
<br>
<input type="submit" value="Submit" name="submit">
</form>

The first line of code tells the form where to send the data. In our case, our form data will be handled by our php file mailer.php. The word post is emphasized because we are telling the form to send the data to the file.

The next sections of code are standard HTML definitions for creating form elements. The important thing you should take note are the actual names I have given the form elements. The input text fields are called name and email. The name of the message box is called message. Finally, your submit button is aptly called - submit!

The names of the form elements have no effect on the functioning of your form. They simply help to categorize the data, and that will be useful when we are retrieving the data into the PHP file!

Let's now look at the PHP code:

<?php if(isset($_POST['submit'])) { $to = "you@you.com"; $subject = "Form Tutorial"; $name_field = $_POST['name']; $email_field = $_POST['email']; $message = $_POST['message']; $body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message"; echo "Data has been submitted to $to!"; mail($to, $subject, $body);} else { echo "blarg!";} ?>

In this section of code, I check to see if the visitor accessed mailer.php via contact.htm or if the visitor simply went to the mailer.php file directly. If the user pressed the Submit button on contact.htm, the if statement will return a true because isset($_POST['submit']) will not return false!

If someone accessed the site without first pressing the Submit button on contact.htm, isset($_POST['submit']) will return false and the code under else would be executed.

$to = "you@you.com"; $subject = "Form Tutorial";

In the next two lines of your PHP code, you create two variables that simply store your e-mail address and the e-mail subject. Nothing too complicated here.

$name_field = $_POST['name'];$email_field = $_POST['email'];$message = $_POST['message'];

Finally - some action! These three variables catch the data sent from the form on contact.htm. The form data is collected in a series of $_POST variables with the form element name specified. Note the appearance of name, email, and message...the same three names we gave our form elements in our contact.htm page earlier.

$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

In the above line I am just combining all previous parts of our message into one variable. Why would I want to do that?

The reason is that the PHP mail function only takes in one variable for the body of your e-mail. Since we have three variables relating to information the user submitted, we need to nicely compact all three pieces of data into one variable that can be passed into our mail function. You will see what I mean when I explain my use of the mail function below.

echo "Data has been submitted to $to!"; mail($to, $subject, $body);

This is the section of code that executes if the user submitted the form data. The first line simply displays a line of text in the browser that says "Data has been submitted to you@you.com!" (where you@you.com is your e-mail address specified by $to).

The second line is the PHP mail function. The mail function takes in three arguments. It takes the address to send the data to, the subject of the e-mail, and the body of your e-mail. If you remember, earlier I created a variable $body that took and formatted the values of what the user sent. I gave a weak reason without any proof as to why I would need to do that. Now you see that the mail function only takes in one argument for the body of the e-mail message. That's why I, as I explained earlier, combined the user inputted data into the $body variable. That's the only way our mail function would display all of the user-inputted data.

echo "error: no data sent!";

The above line executes only when the user accesses the mailer.php file without actually submitting the form from contact.htm. In that case, the browser simply displays the no data sent message.

we wrapped up our simple form. In this and the next page, I will cover adding new form elements such as option buttons, checkboxes, and drop-down menus.

Checkboxes
Implementing a checkbox in HTML is easy! Getting them to work in PHP is a little less straightforward. Let's look at our basic HTML example again, this time, with checkboxes added:

<form method="POST" action="mailer2.php"> Name: <input type="text" name="name" size="19"><br> <br> E-Mail: <input type="text" name="email" size="19"><br> <br> <input type="checkbox" name="check[]" value="blue_color"> Blue<br> <input type="checkbox" name="check[]" value="green_color"> Green<br> <input type="checkbox" name="check[]" value="orange_color"> Orange<br> <br> Message:<br> <textarea rows="9" name="message" cols="30"></textarea><br> <br> <input type="submit" value="Submit" name="submit"> </form>
Since our HTML code is very similar to what you had earlier, I have only emphasized the checkbox code. Here is our modified mailer.php code that accommodates the use of checkboxes:

<?php if(isset($_POST['submit'])) { $to = "kirupa@kirupa.com"; $subject = "Form Tutorial"; $name_field = $_POST['name']; $email_field = $_POST['email']; $message = $_POST['message']; foreach($_POST['check'] as $value) { $check_msg .= "Checked: $value\n";} $body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message\n $check_msg"; echo "Data has been submitted to $to!"; mail($to, $subject, $body); } else { echo "blarg!";} ?>

Checkbox Explanation
Note the code in pink our modified HTML code. The value of each textbox that gets passed to the PHP file is a brief description of what the textbox is.

The code in red is the actual name of each checkbox. Notice that, unlike the two text fields earlier, I do not give each checkbox a different name. The value for the checkbox name is an array variable called check[].

Basically, here is how it works. For each checkbox you check, the check[] array receives the value of the checkboxes pressed. For example, after checking both the green and blue checkboxes, your check[] array contains the values green_color and blue_color as its elements.

In other words, each checkbox value ends up being an element of the check[] array. Now, if you remember, we have to get all of our form elements stashed into one variable ($body) that can be sent as an argument for the body into PHP's mail function.

So, what we need to do, is figure out a way of taking the values from the array and store it in a variable. That new variable can then be concatenated (linked together) with your previous form element data into our $body variable:

$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message\n $check_msg";

As you can see from the above code, our checkbox values are stored nicely into the $check_msg variable. So, to reiterate, we require a way of taking the values from the check array and storing them in this variable. Well, PHP provides a great function that iterates through an array: foreach()

Here is our code using foreach():

foreach($_POST['check'] as $value) { $check_msg .= "Checked: $value\n";}

The array we are looping through is check, and we are storing each element of the array into a variable called $value. The body of the function simply increments the $check_msg variable with the value of each element in your array. For, foreach, simply goes through each element in your array, executes the body, goes to the next element in the array, executes the body, and so on until it reaches the end of the array.

This is similar to a do/while loop with the end test being when you reach the end of your array. Most of the complexities of implementing such a loop, though, are hidden by the foreach function!

Option (Radio) Buttons and Drop-Down Menus
The following is both the HTML and PHP code for our contact form with the code for the option buttons and drop-down menus emphasized:

<form method="POST" action="mailer.php"> Name: <input type="text" name="name" size="19"><br> <br> E-Mail: <input type="text" name="email" size="19"><br> <br> <input type="checkbox" name="check[]" value="blue_color"> Blue<br> <input type="checkbox" name="check[]" value="green_color"> Green<br> <input type="checkbox" name="check[]" value="orange_color"> Orange<br> <br> <input type="radio" value="yes" name="radio"> YES<br> <input type="radio" value="no" name="radio"> NO <br> <br>
<select size="1" name="drop_down"> <option>php</option> <option>xml</option> <option>asp</option> <option>jsp</option> </select><br> <br> Message:<br> <textarea rows="9" name="message" cols="30"></textarea><br> <br> <input type="submit" value="Submit" name="submit"> </form>

Not to be left behind, here is the PHP code tagging along:

<?php if(isset($_POST['submit'])) { $to = "you@you.com"; $subject = "Form Tutorial"; $name_field = $_POST['name']; $email_field = $_POST['email']; $message = $_POST['message']; $option = $_POST['radio']; $dropdown = $_POST['drop_down']; foreach($_POST['check'] as $value) { $check_msg .= "Checked: $value\n";} $body = "From: $name_field\n E-Mail: $email_field\n $check_msg Option: $option\n Drop-Down: $dropdown\n Message:\n $message\n"; echo "Data has been submitted to $to!"; mail($to, $subject, $body); } else { echo "blarg!";} ?>

Explanation
As you can tell from the above code, the option buttons and drop-down menu behave similarly to our text field and message area form elements. The reason is that nothing fancy is going on behind the scenes.

Note the code that is colored in red in the HTML code, and find its corresponding red code in the PHP code. I highlighted the code in pink in the PHP code to simply show that I still combine these new pieces of data into our ever-expanding $body variable.

--------------------------------------------------------------
Note if you want a ready-to-use contact.html and mailer.php files and you just edit in the codes
you can download this files from here:

<<< Download >>>

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

There is also many other ways, you can creat an AJAX contact form to do so, please look at this tutorial

<<< AJAX contact form >>>

Resources:

-\ http://www.tutorialguide.net/php_contact_form_tutorial.html
-\ http://www.kirupa.com/web/php_contact_form.htm

Thanks and i hope this info. was useful

KingTut Magdy
EGYPT

Jacob

Jun 10 2008, 10:03 AM

Nice work there King Tut! Very informative.

Jacob.

wozzym

Jun 10 2008, 01:31 PM

well something i would just like to point out, html is what is seen, and php is what is done. if that makes sense...

Good job king tut!

refincome

Jun 10 2008, 03:34 PM

thanks! it'll take me some time to figure all that out; but it's a great start. appreciate it.......