Email Form and boxes dont appear! ):

esevato

Hi,

I am trying to place a contact form on my contact page..

all works well, however, the text area's where you input information as the user does not have a border around it...

here is the page...

http://www.amahle.com/streetalbums/gr8-03/contact.php

The codes are on the next post...

Any help is really appreciated, I just want the form to look normal and have boxes

Thanks

Esevato

esevato

The code for the page...

<?php require("header.php"); ?>

<!-- Box 03 -->
<div class="box-03-top"></div>
<div class="box-03 box">
<img src="design/titles/featuredmixtapes.jpg"><br><br>

If you are looking for more information regarding the services that we offer, feel free to contact us on the following:<br><br>

<b>Phone (from the UK)</b>: 0755 643 3212<br>
<b>Phone (from the USA)</b>: 01144 755 643 3212<br>
<b>Email:</b> contact@streetalbums.com<br><br>


<form method="post" action="http://www.emailmeform.com/fid.php?formid=468054" enctype="multipart/form-data" accept-charset="UTF-8"><table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF"><tr><td><font face="Verdana" size="2" color="#000000"></font> <div style="" id="mainmsg"> </div></td></tr></table><br><table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF"><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Name</font></td> <td><input type="text" name="FieldData0" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Email Address</font></td> <td><input type="text" name="FieldData1" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Number</font></td> <td><input type="text" name="FieldData2" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Contact Reason</font></td> <td><select name="FieldData3"><option value="Website Enquiry">Website Enquiry</option><option value="Services Enquiry">Services Enquiry</option><option value="Other Enquiry">Other Enquiry</option></select> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Comment</font></td> <td><textarea name="FieldData4" cols="60" rows="10"></textarea><br> </td></tr><tr> <td colspan="2"><table cellpadding=5 cellspacing=0 bgcolor="#FFFFFF" width="100%"><tr bgcolor="#FFFFFF"><td class="label" colspan="2"><font color="#FFFFFF" face="Verdana" size="2"><b>Image Verification</b></font></td></tr><tr><td class="captcha" style="padding: 2px;" width="10"><img src="http://www.emailmeform.com/turing.php" id="captcha" alt="captcha"></td><td class="field" valign="top"><div><font color="#000000">Please enter the text from the image</font>:<br><input type="text" name="Turing" value="" maxlength="100" size="10"> [ <a href="#" onclick=" document.getElementById('captcha').src = document.getElementById('captcha').src + '?' + (new Date()).getMilliseconds()">Refresh Image</a> ] [ <a href="http://www.emailmeform.com/?v=turing&pt=popup" onClick="window.open('http://www.emailmeform.com/?v=turing&pt=popup','_blank','width=400, height=500, left=' + (screen.width-450) + ', top=100');return false;">What's This?</a> ]</div></td></tr></table></td></tr><tr> <td> </td> <td align="right"><input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"><input type="submit" class="btn" value="Send email" name="Submit">    <input type="reset" class="btn" value="  Clear  " name="Clear"></td></tr><tr><td colspan=2 align="center"><br></td></tr></table></form>

</div> <!-- /box-03 -->
<div class="box-03-bottom"></div>

<hr class="noscreen" />

<?php require("footer.php"); ?>

esevato

The code for the CSS...

and here is the CSS:

body {padding:35px 0; background:url("../design/bg.gif") 0 0 repeat-x; font:0.75em/1.6 "arial", sans-serif;}
h1, h2, h3, h4, h5, h6, address, blockquote, dl, fieldset, ol, p, table, ul {margin:15px 0;}

/* ----------------------------------------------------------------------------------------------------------
Layout
---------------------------------------------------------------------------------------------------------- */

#main {width:955px; margin:0 auto;}

#header {position:relative; height:60px; overflow:hidden;}
    #header #logo {position:absolute; right:25px; top:0;}
    #header #logo p {position:relative; width:179px; height:35px; overflow:hidden; margin:0; padding:0;}
    #header #logo p span {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; margin:0; padding:0; background:url("../design/logo.jpg") 0 0 no-repeat; cursor:pointer;}
    #header #nav {position:absolute; left:25px; top:0; margin:0; padding:0; list-style-type:none; font-size:90%; font-weight:bold; text-transform:uppercase;}
    #header #nav li {display:inline; margin:0; padding:0;}
    #header #nav a {float:left; height:26px; margin-right:5px !important; padding-left:11px; background:url("../design/nav-l.gif") 0 0 no-repeat; text-decoration:none; cursor:pointer; overflow:hidden;}
    #header #nav a span {float:left; display:block; padding:5px 15px 5px 4px; background:url("../design/nav-r.gif") 100% 0 no-repeat;}
    #header #nav a:hover {background-position:0 -52px;}
    #header #nav a:hover span {background-position:100% -52px;}
    #header #nav li.active a {background-position:0 -26px;}
    #header #nav li.active a span {background-position:100% -26px;}

#footer {clear:both; padding:18px 25px 0 25px;}
    #footer p {margin:0;}
    #footer p.f-right .footer-rss {padding:5px 0 5px 27px; background:url("../design/footer-rss.gif") 0 0 no-repeat; font-weight:bold;}

/* ----------------------------------------------------------------------------------------------------------
Page: Homepage
---------------------------------------------------------------------------------------------------------- */

.box-01 {position:relative; width:955px; height:347px; margin-bottom:18px; background:url("../design/box-01.jpg") 0 0 no-repeat; overflow:hidden;}
    .box-01 #twitter {position:absolute; top:272px; left:750px; height:30px; padding-top:33px; padding-left:65px; background:url("../design/box-01-twitter.gif") 0 0 no-repeat;}
    .box-01 #news {position:absolute; top:305px; right:255px;}
    .box-01 #news strong {margin-right:5px;}

.box-02 {width:930px; padding:19px 0 0 25px; background:url("../design/box-02.gif") 0 0 repeat-y;}
    .box-02-top {width:955px; height:6px; background:url("../design/box-02-top.gif") 0 0 no-repeat; font-size:0; line-height:0;}
    .box-02-bottom {width:955px; height:8px; margin-bottom:18px; background:url("../design/box-02-bottom.gif") 0 0 no-repeat; font-size:0; line-height:0;}

.box-02 .col {position:relative; float:left; width:300px; padding-bottom:17px; margin-bottom:-6px; z-index:100; background-position:100% 100%; background-repeat:no-repeat;}
.box-02 .col .in {min-height:180px; height:auto;}
.box-02 .col h2 {margin:0; font-size:100%; font-weight:bold; text-transform:uppercase;}
.box-02 .col p {margin:15px 0;}
.box-02 .col.left h2, .box-02 .col.left p, .box-02 .col.left ul {padding-right:20px;}
.box-02 .col.center h2, .box-02 .col.center p, .box-02 .col.center ul {padding:0 20px;}
.box-02 .col.right h2, .box-02 .col.right p, .box-02 .col.right ul {padding-left:20px;}

.box-03-top {width:955px; height:6px; background:url("../design/box-03-top.gif") 0 0 no-repeat; font-size:0; line-height:0;}
    .box-03-bottom {width:955px; height:8px; margin-bottom:18px; background:url("../design/box-03-bottom.gif") 0 0 no-repeat; font-size:0; line-height:0;}
    .box-03 {padding:19px 27px 17px 25px; background:url("../design/box-03.gif") 0 0 repeat-y;}
    .box-03 #loopedSlider {position:relative;}
    .box-03 #loopedSlider .container {width:800px; height:135px; margin-left:49px; overflow:hidden; position:relative;}
    .box-03 #loopedSlider .slides {position:absolute; top:0; left:0;}
    .box-03 #loopedSlider .slides div {display:none; position:absolute; top:0; width:800px;}
    .box-03 #loopedSlider ul.pagination {list-style-type:none; margin:0; padding:0; margin:0; width:75px;}
    .box-03 #loopedSlider ul.pagination li {float:left; margin:0 3px;}
    .box-03 #loopedSlider ul.pagination a {display:block; width:8px; height:8px; overflow:hidden; background-image:url("../design/pagination.gif"); background-position:0 0; background-repeat:no-repeat;}
    .box-03 #loopedSlider ul.pagination a span {display:none;}
    .box-03 #loopedSlider ul.pagination li.active a {background-position:0 -8px;}
    .box-03 #loopedSlider ul.list {margin:0;}
    .box-03 #loopedSlider ul.list li {display:block; float:left; width:140px; margin:0 10px;}
    .box-03 #loopedSlider ul.list li img {display:block;}
    .box-03 #loopedSlider .previous {position:absolute; top:45px; left:0;}
    .box-03 #loopedSlider .next {position:absolute; top:45px; right:0;}
    .box-03 #loopedSlider .pagination {position:absolute; bottom:0; left:425px;}

.box-04 {position:relative; width:905px; height:38px; padding:22px 25px; background:url("../design/box-04.gif") 0 0 no-repeat; overflow:hidden;}
    .box-04 .box-04-title {float:left; display:block;}
    .box-04 .box-04-title h3 {float:left; margin:0; padding-left:8px; height:36px; overflow:hidden; background:url("../design/box-04-title-l.gif") 0 0 no-repeat; font-weight:bold; text-transform:uppercase; font-size:100%;}
    .box-04 .box-04-title h3 span {float:left; display:block; padding:9px 15px 9px 7px; background:url("../design/box-04-title-r.gif") 100% 0 no-repeat;}
    .box-04 .box-04-links {float:left; margin:0; padding:8px 0 0 20px;}
    .box-04 .box-04-links span {margin:0 10px;}

/* ----------------------------------------------------------------------------------------------------------
Page: Subpage
---------------------------------------------------------------------------------------------------------- */

#title {position:relative; width:955px; height:122px; background:url("../design/title.jpg") 0 0 no-repeat; overflow:hidden;}
#title h1 {margin:0; padding:10px 25px 0 25px; font-size:340%; font-weight:bold; letter-spacing:-1px;}
#title #subnav {position:absolute; left:25px; bottom:13px; margin:0;}
#title #subnav a {font-weight:bold;}
#title #subnav span {margin:0 7px;}

#breadcrumbs {margin:0; padding:13px 25px;}

.cols-top {width:955px; height:6px; background:url("../design/cols-top.gif") 0 0 no-repeat; font-size:0; line-height:0;}
.cols-bottom {width:955px; height:8px; background:url("../design/cols-bottom.gif") 0 0 no-repeat; font-size:0; line-height:0;}
.cols {background:url("../design/cols.gif") 0 0 repeat-y;}

.content {float:left; width:595px; padding:0 25px 10px 25px;}
.content ul {margin:15px 25px;}
.content ul ul {margin:0 0 0 25px;}
.content ul li {padding-left:13px; background:url("../design/ul.gif") 0 6px no-repeat;}
.content ul ul li {padding-left:13px; background:url("../design/ul-ul.gif") 0 6px no-repeat;}
.content table {margin:15px 0; border-collapse:collapse;}
.content table th, .content table td {padding:7px 10px;}
.content table th {text-align:center; background:url("../design/table-th.gif") 0 100% repeat-x;}
.content dt {font-weight:bold;}
.content dd {margin-left:25px; margin-bottom:15px;}
.content h1, .content h2 {font-size:200%;}
.content h3 {font-size:160%;}
.content h4 {font-size:120%;}
.content h5, h6 {font-size:100%;}
.content .content-box {margin:15px 0; margin-left:-25px; margin-right:-25px; padding:25px;}
.content .perex {margin:0 -25px 25px -25px; padding:19px 25px 25px 25px; font-size:160%; font-weight:bold; letter-spacing:-1px;}
.content .perex p {margin:0;}

.aside {float:left; width:262px; padding:25px 22px 25px 21px;}
.aside h2 {margin:0; font-size:100%; font-weight:bold; text-transform:uppercase;}
.aside .aside-box {margin:10px 0 20px 0; margin-left:-20px; margin-right:-22px; padding:20px;}

/* ----------------------------------------------------------------------------------------------------------
Porlet: News
---------------------------------------------------------------------------------------------------------- */

ul.ul-news {list-style:none;}
ul.ul-news li {padding:2px 0;}
ul.ul-news li strong {margin-right:3px; padding-right:17px; background:url("../design/ico-arrow.gif") 100% 50% no-repeat;}

/* ----------------------------------------------------------------------------------------------------------
Others
---------------------------------------------------------------------------------------------------------- */

img.f-right {margin-left:15px;}
img.f-left {margin-right:15px;}
.input {padding:7px; background:url("../design/input.gif") 0 0 no-repeat; bgcolor:#000; font:100%/1 "arial",sans-serif;}
.smaller {font:90%/1.8 "tahoma",sans-serif;}

img.double-border {
	border: 5px solid #ddd;
	padding: 5px; /*Inner border size*/
	background: #fff; /*Inner border color*/
}

big_nerd

I went to the link you've provided me, and I don't see the form in there @ all.

It imports the header, etc I am assuming, but there is no form code there.

There is a javascript to open contactform.php, which I can browse to (although I dont see what calls the javascript).

When I opened contactform.php I saw borders around all text boxes.

esevato

my apologies, please try the link again to see the form in action without any borders...

http://www.amahle.com/streetalbums/gr8-03/contact.php

as you pointed out, on a seperate page which doesnt call CSS the form displays how it should... on a page with CSS it doesnt display correctly, I think it must be the CSS? but I have no idea how to get around this,

Help is appreciated, many thanks,

EseVato

big_nerd

esavato:

In your reset.css

Line: 2

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, img {border:0; outline:0; vertical-align:baseline; background:transparent;}

See the input, textarea there?

You are assigning it to have no border at all

I am unsure of how it will affect the rest of the site, but you can make a new style with border: 1px solid; or something to that effect.

That or, you can try removing those items (input and textarea at least) and see what it does to your page.

esevato

Thanks Big.Nerd... I removed the "input, textarea," and now the form appears as it should, and there doesnt appear to be any difference to the rest of the website itself, many thanks again! 🙂

Esevato

stoyv

Look please here php form tutorials this site you can find the answer to your question.

johanafm

I'd recommend NOT removing from the reset css, but rather override values as needed. The purpose of the reset css is to make sure the "default" display is consistent across browsers.