rookie looking for help coding a CSS form with PHP

Posted on 16th Feb 2014 by admin

I'm trying to figure out how to add PHP code to my xhtml form so that it is a working form embedded in the contact us page of a website that is still on my pc only. The end goal is to place the PHP into the code below, create a .php file that compliments it (if necessary?) so that when the contact form is submitted, it is pushed through to my gmail account. I'm not sure if the best way to do this is through a CGI or if there is an easier way since the site isn't published yet? Ideally, Id like for someone to add the PHP code my xhtml code below and explain any other details that will make my form work.

I added the <form> tag below but do not know where to go from here. I do not have a file currently called formscript.php but assume I'll need one like it if this is to work.

From what I've read, I've got a LONG way to go on how this whole process works. I've read through forums yesterday but everything is written for someone with an existing knowledge of PHP or for table based forms. I would appreciate any and all help. Thanks



xHTML:

<form action="formscript.php" method="post">

<div class="contact_form">



<div class="form_row">
<label class="contact">Name:</label>
<input type="text" name="name" class="contact_input" />
</div>

<div class="form_row">
<label class="contact">Email:</label>
<input type="text" name="email" class="contact_input" />
</div>

<div class="form_row">
<label class="contact">Message:</label>
<textarea class="contact_textarea" ></textarea>
</div>

<div class="form_row">
<a href="#" class="read_more">send</a>
</div>

</div>
</form>

CSS:

.contact_form{
width:355px;
float:left;
padding:0px 0 0 5px;
}
.form_row{
width:335px;
clear:both;
padding:10px 0 10px 0;
_padding:5px 0 5px 0;
color:#a53d17;
}
label.contact{
width:70px;
float:left;
font-size:12px;
text-align:right;
padding:4px 5px 0 0;
color:#fff;
}
input.contact_input{
width:253px;
height:18px;
background-color:#857c7c;
color:#FFFFFF;
border:1px #857c7c solid;
float:left;
}
textarea.contact_textarea{
width:253px;
height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
background-color:#857c7c;
border:1px #857c7c solid;
float:left;
}
.contact_info{
width:380px;
float:left;
padding:0 0 0 20px;
color:#FFFFFF;
}
p.adress{
float:left;
padding:10px 0 0 15px;
line-height:13px;
}