 Integrating Email Within A Webpage |
  |
| alex211217 |
  Jan 24 2012, 10:28 AM
Post
#1
|
|
Group: Members Posts: 1 Joined: 24-January 12 Member No.: 16,319  |
Hey first time poster here, anyway I would greatly appreciate anybody who can support me in integrating email functionality into a webpage. I'm new to HTML, PHP and CSS so I only have a very basic understanding of the subject matter. Starting off I decided to download a template and tailor it to my own requirements. Jumping straight into the HTML is probably not the best idea I know however I'm working through tutorials at the same time.
Below I have pasted some HTML code from the template I have downloaded. It comes with a contact page which is what I would like to focus on. I already have a domain and host set up with a suitable POP3 email address at hand and now all I need is to figure out how people may use the Contact Us page on the site. If anybody can shed some light on the issue I thank you in advanced. I believe I may need to set up another page where the inputted data is sent to and then forwarded on to my email however attempts at doing this by viewing tutorials have shown that either I'm going wrong or the authors are going wrong, I believe it's the former. Currently this code will allow the user to enter various details, name, email, message etc etc however when the send button is clicked the page is then directed to the template website, this is of course, no use to me at all. To my basic knowledge, all the necessary code for the contact form has been changed to red however I have included the entire contact page code just in case. <!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"> <head> <title>Tools Shop - Contact</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="iecss.css" /> <![endif]--> <script type="text/javascript" src="js/boxOver.js"></script> <script> PositionX = 100; PositionY = 100; defaultWidth = 500; defaultHeight = 500; var AutoClose = true; if (parseInt(navigator.appVersion.charAt(0))>=4){ var isNN=(navigator.appName=="Netscape")?1:0; var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;} var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY; var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY; function popImage(imageURL,imageTitle){ if (isNN){imgWin=window.open('about:blank','',optNN);} if (isIE){imgWin=window.open('about:blank','',optIE);} with (imgWin.document){ writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>'); writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){'); writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}'); writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(300,300);'); writeln('width=300-(document.body.clientWidth-document.images[0].width);'); writeln('height=300-(document.body.clientHeight-document.images[0].height);'); writeln('window.resizeTo(width,height);}');writeln('if (isNN){'); writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}'); writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>'); if (!AutoClose) writeln('</head><body bgcolor=ffffff scroll="no" onload="reSizeToImage();doTitle();self.focus()">') else writeln('</head><body bgcolor=ffffff scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">'); writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>'); close(); }} </script> </head> <body> <div id="main_container"> <div id="header"> <div class="top_right"> <div class="languages"> <div class="lang_text">Languages:</div> <a href="http://www.free-css.com/" class="lang"><img src="images/en.gif" alt="" border="0" /></a> <a href="http://www.free-css.com/" class="lang"><img src="images/de.gif" alt="" border="0" /></a> </div> <div class="big_banner"> <a href="http://www.free-css.com/"><img src="images/banner728.jpg" alt="" border="0" /></a> </div> </div> <div id="logo"> <a href="http://www.free-css.com/"><img src="images/logo.png" alt="" border="0" width="182" height="85" /></a> </div> </div> <div id="main_content"> <div id="menu_tab"> <ul class="menu"> <li><a href="http://www.free-css.com/" class="nav"> Home </a></li> <li class="divider"></li> <li><a href="http://www.free-css.com/" class="nav">Products</a></li> <li class="divider"></li> <li><a href="http://www.free-css.com/" class="nav">Specials</a></li> <li class="divider"></li> <li><a href="http://www.free-css.com/" class="nav">My account</a></li> <li class="divider"></li> <li><a href="http://www.free-css.com/" class="nav">Sign Up</a></li> <li class="divider"></li> <li><a href="http://www.free-css.com/" class="nav">Shipping </a></li> <li class="divider"></li> <li><a href="contact.html" class="nav">Contact Us</a></li> <li class="divider"></li> <li><a href="details.html" class="nav">Details</a></li> </ul> </div> <!-- end of menu tab --> <div class="crumb_navigation"> Navigation: <span class="current">Home</span> </div> <div class="left_content"> <div class="title_box">Categories</div> <ul class="left_menu"> <li class="odd"><a href="http://www.free-css.com/">Power Tools</a></li> <li class="even"><a href="http://www.free-css.com/">Air Tools</a></li> <li class="odd"><a href="http://www.free-css.com/">Hand Tools</a></li> <li class="even"><a href="http://www.free-css.com/">Accessories</a></li> <li class="odd"><a href="http://www.free-css.com/">Workwear</a></li> <li class="even"><a href="http://www.free-css.com/">Spare Parts</a></li> <li class="odd"><a href="http://www.free-css.com/">Power Tools</a></li> <li class="even"><a href="http://www.free-css.com/">Air Tools</a></li> <li class="odd"><a href="http://www.free-css.com/">Hand Tools</a></li> <li class="even"><a href="http://www.free-css.com/">Accessories</a></li> <li class="odd"><a href="http://www.free-css.com/">Workwear</a></li> <li class="even"><a href="http://www.free-css.com/">Spare Parts</a></li> </ul> <div class="title_box">Special Products</div> <div class="border_box"> <div class="product_title"><a href="http://www.free-css.com/">Makita 156 MX-VL</a></div> <div class="product_img"><a href="http://www.free-css.com/"><img src="images/p1.jpg" alt="" border="0" /></a></div> <div class="prod_price"><span class="reduce">350$</span> <span class="price">270$</span></div> </div> <div class="title_box">Newsletter</div> <div class="border_box"> <input type="text" name="newsletter" class="newsletter_input" value="your email"/> <a href="http://www.free-css.com/" class="join">subscribe</a> </div> <div class="banner_adds"> <a href="http://www.free-css.com/"><img src="images/bann2.jpg" alt="" border="0" /></a> </div> </div> <!-- end of left content --> <div class="center_content"> <div class="center_title_bar">Contact Us</div> <div class="prod_box_big"> <div class="center_prod_box_big"> <div class="contact_form"> <div class="form_row"> <label class="contact"><strong>Name:</strong></label> <input type="text" class="contact_input" /> </div> <div class="form_row"> <label class="contact"><strong>Email:</strong></label> <input type="text" class="contact_input" /> </div> <div class="form_row"> <label class="contact"><strong>Phone:</strong></label> <input type="text" class="contact_input" /> </div> <div class="form_row"> <label class="contact"><strong>Company:</strong></label> <input type="text" class="contact_input" /> </div> <div class="form_row"> <label class="contact"><strong>Message:</strong></label> <textarea class="contact_textarea" ></textarea> </div> <div class="form_row"> <a href="http://www.free-css.com/" class="prod_details">send</a> </div> </div> </div> </div> </div> <!-- end of center content --> <div class="right_content"> <div class="title_box">Search</div> <div class="border_box"> <input type="text" name="newsletter" class="newsletter_input" value="keyword"/> <a href="http://www.free-css.com/" class="join">search</a> </div> <div class="shopping_cart"> <div class="title_box">Shopping cart</div> <div class="cart_details"> 3 items <br /> <span class="border_cart"></span> Total: <span class="price">350$</span> </div> <div class="cart_icon"><a href="http://www.free-css.com/"><img src="images/shoppingcart.png" alt="" width="35" height="35" border="0" /></a></div> </div> <div class="title_box">What’s new</div> <div class="border_box"> <div class="product_title"><a href="http://www.free-css.com/">Motorola 156 MX-VL</a></div> <div class="product_img"><a href="http://www.free-css.com/"><img src="images/p2.jpg" alt="" border="0" /></a></div> <div class="prod_price"><span class="reduce">350$</span> <span class="price">270$</span></div> </div> <div class="title_box">Manufacturers</div> <ul class="left_menu"> <li class="odd"><a href="http://www.free-css.com/">Bosch</a></li> <li class="even"><a href="http://www.free-css.com/">Samsung</a></li> <li class="odd"><a href="http://www.free-css.com/">Makita</a></li> <li class="even"><a href="http://www.free-css.com/">LG</a></li> <li class="odd"><a href="http://www.free-css.com/">Fujitsu Siemens</a></li> <li class="even"><a href="http://www.free-css.com/">Motorola</a></li> <li class="odd"><a href="http://www.free-css.com/">Phillips</a></li> <li class="even"><a href="http://www.free-css.com/">Beko</a></li> </ul> <div class="banner_adds"> <a href="http://www.free-css.com/"><img src="images/bann1.jpg" alt="" border="0" /></a> </div> </div> <!-- end of right content --> </div> <!-- end of main content --> <div class="footer"> <div class="left_footer"> <img src="images/footer_logo.png" alt="" width="89" height="42"/> </div> <div class="center_footer"> Template name. All Rights Reserved 2008<br /> <a href="http://csscreme.com"><img src="images/csscreme.jpg" alt="csscreme" title="csscreme" border="0" /></a><br /> <img src="images/payment.gif" alt="" /> </div> <div class="right_footer"> <a href="http://www.free-css.com/">home</a> <a href="http://www.free-css.com/">about</a> <a href="http://www.free-css.com/">sitemap</a> <a href="http://www.free-css.com/">rss</a> <a href="http://www.free-css.com/">contact us</a> </div> </div> </div> <!-- end of main_container --> </body> </html> If I haven't provided enough information here is the link to download the entire template yourself (568kb on disk), (apologies if template usage is frowned upon). Alex  |
  |
 
|
| Darin McGrew |
Jan 24 2012, 10:55 AM
Post
#2
|
|
WDG Member  Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
You have no <form action=...> tag, so the form won't actually do anything.
See the FAQ entry and the tutorials it links to: http://www.htmlhelp.com/faq/html/forms.html#form-howto |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 4th June 2024 - 02:50 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC