I have a contact form written in .NET (my hosting is .NET so I will not change to PHP or anything else) but the HTML looks awful. I did a tutorial on forms and CSS but now that I really look at it, it needs major help. I have a bunch of to center things correctly but this is not good. Could someone help me make this better using XHTML 1.0 transitional and CSS?
yup, I’m sure many here can help… but without any code it’s impossible for anyone to help.
Oop sorry. Here is the code for the page…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %>
<!--Below we will import the .NET mail namespace. This namespace contains all the email functionality you'll
need to do email autoresponders, notification, or other email messages you want your web page to generate automatically.-->
<%@ Import Namespace="System.Web.Mail" %>
<script runat="server">
Sub Submit_Click(o as Object, e as EventArgs)
'===========================================================
'This subroutine will handle the email portion of the form.
'The details will be explained in the comments below
'===========================================================
'The first thing we must do is declare or "Dimension" the variables we will use. We will declare variables for each form field,
'and we will insert those variables into the text of the email message.
Dim strName as String = txtName.Text 'This will assign the text of the "Name" textbox to this variable
Dim strEmail as String = txtEmail.Text 'This will assign the text of the "Name" textbox to this variable
Dim strCity as String = txtCity.Text 'This will assign the text of the "Name" textbox to this variable
Dim strState as String = txtState.Text 'This will assign the text of the "Name" textbox to this variable
Dim strZip as String = txtZip.Text 'This will assign the text of the "Name" textbox to this variable
Dim strCountry as String = txtCountry.Text 'This will assign the text of the "Name" textbox to this variable
Dim strRequest as String = txtRequest.Text 'This will assign the text of the "Name" textbox to this variable
Dim oMsg as New MailMessage 'This will create the Mail Message object that will send the form results to you via email
Dim strBody as String 'This will be a string value that we will construct below to create the HTML email message
If Not IsValid() then 'Because we are using validation controls, we have to check to see if the form is filled out properly
Exit Sub 'If the form isn't right, then we don't want to do anything further, so we'll exit this subroutine
end if
' ASP.NET uses the "Try-Catch" method of handling errors that may occur when the code runs. The "Try" phrase instructs the .NET framework
' to run some code. If an error pops up, the "Catch" line gives the instructions on what you want the page to do if an error is thrown
' So, we'll start off with the "Try" and that will include all the code needed to send the mail message
Try
'First we'll clear out the lblErr control, just in case there's text in it we don't want
lblErr.text = ""
'Now, we'll build the text string that contains the text and the HTML to format our email message
strBody = "A New visitor has requested information on a website at Foxden Web Solutions. The following information was submitted:<br /><br />" & _
"<strong>Visitor Name:<strong /> " & strName & "<br />" & _
"<strong>Email Address:<strong /> " & strEmail & "<br />" & _
"<strong>City:<strong /> " & strCity & "<br />" & _
"<strong>State:<strong /> " & strState & "<br />" & _
"<strong>Zip Code:<strong /> " & strZip & "<br />" & _
"<strong>Country:<strong /> " & strCountry & "<br />" & _
"<strong>Request:<strong /> " & strRequest & "<br />"
oMsg.From = strEmail 'This will use the email address the user provided as the "From" Address for the mail message
oMsg.To = "CoriFoxworthy@foxdenwebsolutions.com" 'This is the address to which the mail message will be sent
oMsg.Subject = "New Website Request from Foxden Web Solutions" 'This is the subject of the mail message
oMsg.Body = strBody 'The string value we created above will be the message body for this email
oMsg.BodyFormat = MailFormat.HTML 'This make the message an HTML email. If you don'r specify this, the message will be
'sent as plain text
SmtpMail.Send(oMsg) 'This notifies the .NET Framwork's email class to send the message we just constructed.
Response.Redirect("request_response.html")
Catch Exc as Exception 'Now we have to catch the error, and the "Exc" variable is an instance of the Exception Object
lblErr.text = "A Problem prevented your request from being accepted: " & Exc.Message
End Try 'This lets the Framework know that the Try is complete
End Sub
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foxden Web Solutions - "Your Affordable Web Solution!"</title>
<meta name="keywords" content="Parker CO, Web Design, parker co web design, web design, affordable web design, denver web design, colorado web design" />
<meta name="description" content="Foxden Web Solutions is a locally owned web design shop in Parker CO providing affordable web solutions for small businesses on a fixed advertizing budget." />
<link rel="stylesheet" type="text/css" href="css/newfoxden.css" media="all" />
<!--[if IE]>
<style type="text/css" media="all">.borderitem {border-style:solid;}</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#footer, { zoom: 1;}
</style>
<![endif]-->
</head>
<body>
<div id="header_container">
<div id="header">
<h1>Foxden Web Solutions</h1>
<h1>“Your Affordable Web Solution!“</h1>
</div>
<div id="nav_bg">
<ul class="menu">
<li class="home"><a href="index.html" title="Home"><span class="displace">Home</span></a></li>
<li class="history"><a href="history.html" title="History"><span class="displace">History</span></a></li>
<li class="help"><a href="help.html" title="How Can We Help?"><span class="displace">How Can We Help?</span></a></li>
<li class="price"><a href="price.html" title="Design Pricing"><span class="displace">Design Pricing</span></a></li>
<li class="portfolio"><a href="portfolio.html" title="Portfolio"><span class="displace">Portfolio</span></a></li>
<li class="contact"><a href="#" class="selected" title="Contact"><span class="displace">Contact</span></a></li>
<li class="blog"><a href="blog.html" title="Blog"><span class="displace">Blog</span></a></li></ul>
</div>
<div id="main_container">
<div id="content_top"></div>
<div id="content_mdl">
<div id="form">
<h2> </h2>
<h2>Contact</h2>
<p> </p>
<p>If you would like to contact me for information about a website, please fill in the contact form below. I will respond back as quickly as I can.</p>
<p> </p>
<form runat="server">
<asp:label TextColor="#C0BDAC" ID="lblErr" runat="server"></asp:label>
<legend>Contact Details</legend>
<ol>
<li>
<label for="name">Full Name:</label>
<asp:textbox Columns="30" ID="txtName" runat="server" />
<asp:requiredfieldvalidator
Display="Dynamic"
ForeColor="#fff"
ID="valName"
runat="server"
Text="Required"
ControlToValidate="txtName" />
</li>
<li></li>
<li>
<label for="email">Email address:</label>
<asp:textbox Columns="30" ID="txtEmail" runat="server" />
<asp:requiredfieldvalidator
Display="Dynamic"
ForeColor="#fff"
ID="valEmail"
runat="server"
Text="Required"
ControlToValidate="txtEmail" />
</li>
<li></li>
<li>
<label for="city">City/Town:</label>
<asp:textbox Columns="30" ID="txtCity" runat="server" />
</li>
<li></li>
<li>
<label for="state">State/Province:</label>
<asp:textbox Columns="30" ID="txtState" runat="server" />
</li>
<li></li>
<li>
<label for="zipcode">Zip Code/Postal Code:</label>
<asp:textbox Columns="30" ID="txtZip" runat="server" />
</li>
<li></li>
<li>
<label for="country">Country:</label>
<asp:textbox Columns="30" ID="txtCountry" runat="server" />
</li>
<li></li>
<li>
<label for="request">Website Information Request:</label>
<asp:textbox Columns="40" ID="txtRequest" Rows="5" runat="server" TextMode="MultiLine" />
</li>
<li></li>
</ol>
<p>
<asp:button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit_Click" />
<input type="reset" name="Reset" value="Reset" />
</p>
<p> </p>
</form>
</div>
</div>
<div id="content_btm"> </div>
<div id="footer">
<p> Copyright © 2010 Foxden Web Solutions </p>
<div id="footer_nav">
<ul>
<li><a href="index.html">Home</a> | <a href="history.html">History</a> | <a href="help.html">How can we help?</a> | <a href="pricing.html">Design Pricing</a> | <a href="portfolio.html">Portfolio</a> | <a href="contact.aspx">Contact</a> | <a href="blog.html">Blog</a></li>
</ul>
</div>
</div>
<!--//end of footer-->
</div>
</div>
</body>
</html>
CSS for the form…
#form {
clear: both;
float:left;
width: 700px;
margin-left: 155px;
overflow: hidden;
color: #C0BDAC;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
Please don’t be put off by the .NET code. I am trying to get it to look correct. I am used to using tables for form setup and this is pure HTML and CSS. Please help me figure out where I am going wrong so that I can get this to look professional.
Could you post a link to the page? .NET code does us no good :).
Ok, unless the ordered list is a requirement for .NET I’d lose that for a start then wrap the form in a div that you can commence styling with (If you are keen to have it centered then just set a wide margin on the div id) then set the css for label and other form elements to display:block. This is just a quick and dirty method and I suspect you need to go back to a good css tutorial for a refresher course but it should get you started.