SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    My contact form looks awful...please help!

    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?

  2. #2
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup, I'm sure many here can help.... but without any code it's impossible for anyone to help.

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oop sorry. Here is the code for the page...

    Code:
    <!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">
    <&#37;@ 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 - &quot;Your Affordable Web Solution!&quot;</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>&ldquo;Your Affordable Web Solution!&ldquo;</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>&nbsp;</h2>
          <h2>Contact</h2>
          <p>&nbsp;</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>&nbsp;</p>
          <form runat="server">
            <asp:label TextColor="#C0BDAC" ID="lblErr" runat="server"></asp:label>
            <legend>Contact Details</legend>
            <ol>
              <li>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="city">City/Town:</label>
                
                <asp:textbox Columns="30" ID="txtCity" runat="server" />
              </li>
              <li></li>
            
              <li>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="state">State/Province:</label>
                <asp:textbox Columns="30" ID="txtState" runat="server" />
              </li>
              <li></li>
            
              <li>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="zipcode">Zip Code/Postal Code:</label>
                <asp:textbox Columns="30" ID="txtZip" runat="server" />
              </li>
              <li></li>
            
              <li>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:button ID="btnSubmit" Text="Submit"  runat="server" OnClick="Submit_Click" />        
              <input type="reset" name="Reset" value="Reset" />
            </p>
            <p>&nbsp;</p>
          </form>
        </div>
      </div>
      <div id="content_btm"> </div>
      <div id="footer">
        <p> Copyright &copy; 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...

    Code:
    #form  {
    	clear: both;
    	float:left;
    	width: 700px;
    	margin-left: 155px;
    	overflow: hidden;
    	color: #C0BDAC;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 16px;
    }

  4. #4
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Could you post a link to the page? .NET code does us no good .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Could you post a link to the page? .NET code does us no good .
    The link is foxdenwebsolutions.com/new_site/contact.aspx


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •