I looked at a past thread I started about putting a contact form on my site (www.ctrlaltm.com). I decided to go with Green Beast Contact Form v3 after reading another poster’s suggestion in the thread I started. Everything went fine up until trying to actually get it onto my page itself. I know that there’s something wrong with how I have pointed my files for it but maybe I’m a little dense because I can’t figure out where I’m going wrong. Here’s the step I’m having trouble with:
- Add the link to the style sheet and the focus JavaScript file - for form field
focus effects for Internet Explorer - to the head of your contact form page
(see Figure 1), then add the PHP “include” to the body content area of that
same page (see Figure 2). Go live and worry not.
<!–Figure 1 (written as xhtml)–>
<link rel=“stylesheet” type=“text/css” href=“gbcf-v3/files/themes/default.css” media=“screen” />
<!–[if IE]>
<script type=“text/javascript” src=“gbcf-v3/files/focus.js”></script>
<![endif]–>
Figure 1 Note: You may choose to add the form styles to your own style sheet or
do something else such as use existing styles. It’s your call. Use the default
style sheet to see what classes you have available to you. The style sheet name
in the example is default.css. Change as needed if using a theme.
<!–Figure 2–>
<?php include_once(“gbcf-v3/form.php”); ?>
Figure 2 Note: In all cases above, adjust the path to the files to meet your needs
such as if your contact page is in a folder: …/gbcf-v3/form.php.
And here’s my HTML as it currently is on my local machine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/pgstyle.css">
<link rel="stylesheet" type="text/css" href="gbcf-v3/files/themes/default.css" media="screen" >
<!-- conditional comment for contact form if user browser is Internet Explorer-->
<!--[if IE]><script type="text/javascript" src="gbcf-v3/files/focus.js"></script><![endif]-->
<title>Control-Alt-M</title>
</head>
<body>
<!-- title placeholder; will change to webfonts once finished-->
<div id= "header">
<h1>controlaltm.com</h1>
</div> <!-- end of header div -->
<!-- body section of web page; contains all subsections of portfolio -->
<div id= "site_body">
<!-- directs user to various parts of web page-->
<a class="navigation_menu" href="#about" title="about me">About</a>
<a class="navigation_menu" href="#resume" title="resume">Resume</a>
<a class="navigation_menu" href="#experiment" title="experiments">Experiments</a>
<a class="navigation_menu" href="#contact" title="contact info">Contacts</a> <!-- end of navigation menu-->
<!-- begining of main_intro-->
<div id= "main_intro">
<h2>A brief poem to welcome you</h2>
<p>One page 'folio <br> Shows knowledge top and bottom <br> Thank you for looking.</p>
</div> <!-- end of intro div-->
<!--begining of about div-->
<div id= "about">
<h2>A little about myself</h2>
<p class= "description">I am a young woman who wonders why things work (or don't work). I hope that this short page works for you. My interests are many, but some of them are usability and how it relates to design.
</div> <!-- end of about div-->
<!--begining of resume div-->
<div id= "resume"><h2>A resume a.k.a some of what I know</h2>
<!-- begining of downloads div-->
<div id= "resume_docs">
<a href="docs/ui_design_resume.doc"><img src="img/microsoft_word_icon.png" alt="Microsoft Word 97-2003 version of resume"></a> <a href="docs/ui_design_resume.pdf"><img src="img/adobe_pdf_icon.png" alt="Portable Document Format version of resume"></a>
</div><!-- end of downloads div-->
<h3>Skills</h3>
<ul>
<li>HCI RESEARCH
<ul>
<li>Surveys</li>
<li>User stories</li>
<li>Documenting requirements</li>
<li>User interviews</li>
</ul>
</li>
<li>DESIGN SOFTWARE
<ul>
<li>Photoshop</li>
<li>GIMP</li>
<li>Visio 2007</li>
</ul>
</li>
<li>WEB DEVELOPMENT
<ul>
<li>CSS</li>
<li>HTML</li>
<li>XHTML</li>
</ul>
</li>
<li>SOFTWARE DEVELOPMENT
<ul>
<li>Java (1.5 years)</li>
<li>C++ (1 year)</li>
</ul>
</li>
<li>TECHNICAL SUPPORT
<ul>
<li>Windows 7</li>
<li>Windows Vista</li>
<li>Linux (Ubuntu)</li>
<li>Windows XP</li>
<li>Mac OSX</li>
</ul>
</li>
</ul>
<h3>Experience</h3>
<dl>
<dt>NukeStudios Web Design, Brisbane, Queensland, AU</dt>
<dd class="description">I started working for Nukestudios in February 2011 and I demonstrated the importance
of accessibility while converting Word documents to HTML + CSS pages.</dd>
<dd class= "description">Currently, I work on modules for a OHSA standards course at the University of
Queensland.</dd>
<dt>Freelance Machine, Spokane, WA</dt>
<dd class= "description">Through forum-posting and keyword optimization, I work to improve the search
results of Freelance Machine, a site dedicated to job postings. This job introduced me to search engine optimization.</dd>
<dd class= "description">I began my work for this firm in January 2011.</dd>
<dt>ChaCha, Caramel, IN</dt>
<dd class= "description">I have been working with ChaCha since October 2010. As a Generalist/Specialist my goal is to help users answer their questions
accurately and quickly. I also assist Expeditors in finding additional information to
solve questions.</dd>
<dd class= "description">I organize the requests and unanswered queries sent by ChaCha's customers.</dd>
<dd class="description">With my usability experience I test programs created by fellow Guides. These programs exist to make their jobs as effcient as possible.</dd>
<dt>School of Information Sciences, University of Pittsburgh, Pittsburgh, PA</dt>
<dd class="description">Under the guidance of Dr. Anthony Debons, PHD I designed an experiment to test
the usability of several common programs with many users.</dd>
<dd class="description">This design became the basis for a future research proposal.</dd>
<dd class="description">Doing this undergraduate research from January 2010 to April 2010 allowed me to learn about common usability techniques
such as user stories and use cases.</dd>
<dd class="description">It also introduced me to various concepts such as Fitt's Law.</dd>
<dt>Carnegie Public Library, Pittsburgh, PA</dt>
<dd class="description">I volunteered for the Carnegie Public Library as a web designer. My job was
to convert historical documents into web pages.</dd>
<dd class="description">Throughout my time on this project I learned about using CSS to make print materials
easily viewable in major browsers.</dd>
<dd class="description">I used Photoshop and a customized scanner to first scan in media and then edited
them so that they would be optmized for web viewing.</dd>
</dl>
</div><!-- end of resume div-->
<!-- begining of experiment div-->
<div id="experiment">
<h2>Here's where I experiment, learning as I go along.</h2>
<p class= "percentagepadding">Nothing here for now <br> For the future check
back again <br> I will update soon.</p>
</div><!-- end of experiment div-->
</div> <!-- end of body div-->
<!-- footer contains future contact form, social networking contacts, and year page was created -->
<div id= "footer-wrap"></div>
<div id="footer-container">
<div id="contact">
<h2>Like what you see? Interested? Feel free to let me know at these places.</h2>
<script type="text/javascript">
//<![CDATA[
<!--
var x="function f(x){var i,o=\\"\\",l=x.length;for(i=0;i<l;i+=2) {if(i+1<l)o+=" +
"x.charAt(i+1);try{o+=x.charAt(i);}catch(e){}}return o;}f(\\"ufcnitnof x({)av" +
" r,i=o\\\\\\"\\\\\\"o,=l.xelgnhtl,o=;lhwli(e.xhcraoCedtAl(1/)3=!45{)rt{y+xx=l;=+;" +
"lc}tahce({)}}of(r=i-l;1>i0=i;--{)+ox=c.ahAr(t)i};erutnro s.buts(r,0lo;)f}\\\\" +
"\\"(9)10\\\\\\\\,1\\\\\\"39$.e;>,\\\\\\\\?\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"6\\\\\\\\02\\\\\\\\\\\\\\\\22\\\\\\\\" +
"02\\\\\\\\02\\\\\\\\\\\\\\\\26\\\\\\\\0Y\\\\\\\\24\\\\\\\\06\\\\\\\\03\\\\\\\\\\\\\\\\27\\\\\\\\00\\\\\\\\03\\\\\\\\\\\\\\\\6Y-" +
"PRP32\\\\\\\\01\\\\\\\\00\\\\\\\\\\\\\\\\\\\\\\\\rK\\\\\\\\5H17\\\\\\\\0t\\\\\\\\\\\\\\\\\\\\\\\\26\\\\\\\\0K\\\\\\\\20\\\\\\\\" +
"07\\\\\\\\01\\\\\\\\\\\\\\\\03\\\\\\\\0L\\\\\\\\14\\\\\\\\06\\\\\\\\0?02\\\\\\\\\\\\\\\\<s073z01\\\\\\\\\\\\\\\\hv!7q!\\\\"+
"\\\\7\\\\\\\\\\\\\\"'\\\\\\\\rq6i02\\\\\\\\\\\\\\\\%,*g%,o.`$JP35\\\\\\\\0Y\\\\\\\\_I0Q03\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"+
"\\\\\\\\\\\\\\\\\\\\\\\\U\\\\\\\\\\\\\\\\X\\\\\\\\0p02\\\\\\\\\\\\\\\\0m02\\\\\\\\\\\\\\\\22\\\\\\\\0K\\\\\\\\XA^B\\\\\\\ n\\\\\\\\"+
"\\\\\\\\\\\\\\\\K{GJ\\\\\\\\rN\\\\\\\\AHyry]}tlx7r17\\\\\\\\\\\\\\\\sr7r17\\\\\\\\\\\\\\\\7+17\\\\\\\\\\\\\\\\b{md(" +
"f(U`:v`\\\\\\\\k\\\\\\\\\\\\\\"`\\\\\\\\\\\\\\\\<\\\\\\\\\\\\\\\\U\\\\\\\\22\\\\\\\\07\\\\\\\\02\\\\\\\\\\\\\\\\37\\\\\\\\0r\\\\" +
"\\\\\\\\\\\\\\\\\\\\21\\\\\\\\05\\\\\\\\00\\\\\\\\\\\\\\\\01\\\\\\\\0[\\\\\\\\00\\\\\\\\05\\\\\\\\03\\\\\\\\\\\\\\\\27\\\\\\\\04\\\\"+
"\\\\03\\\\\\\\\\\\\\\\05\\\\\\\\04\\\\\\\\01\\\\\\\\\\\\\\\\01\\\\\\\\0t\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\\\\\\\\f(;} ornture;" +
"}))++(y)^(iAtdeCoarchx.e(odrChamCro.fngriSt+=;o27=1y%){++;i<l;i=0(ior;fthng" +
"lex.l=\\\\\\\\,\\\\\\\\\\\\\\"=\\\\\\",o iar{vy)x,f(n ioctun\\\\\\"f)\\")" ;
while(x=eval(x));
//-->
//]]>
</script> <!-- end of custom e-mail link-->
<div id="social_networking"><a href="http://www.twitter.com/Mags9211" title= "Check out my Twitter"><img src="img/Echofon.png" alt="Follow Mags9211 on Twitter"></a> <a id="sicon-bclink" name="My Brazen Careerist Social Resume" href="http://www.brazencareerist.com/profile/maggiet?utm_source=22088&utm_medium=single&utm_campaign=icon" title= "Check out Brazen Careerist"><img src="img/icon_bc.png" alt="My Brazen Careerist Social Resume"></a>
<script type="text/javascript">var bctrk_cat = "icon";var bctrk_act = "SingleView";var bctrk_uid = "22088";</script>
<script src="http://static.brazencareerist.com/v6/ui_widget/widget_tracking.1.js" type="text/javascript"></script>
</div>
<!-- contact form-->
<p>Or try this: </p>
<?php include_once("gbcf-v3/form.php"); ?>
<br>
<a class="navigation_menu" href="index.html" title="home page">Return to Home</a><br>
<p>Created by hand in Notepad++ in 2011.</p>
</div>
</div>
<!-- end of footer div-->
<!-- end of whole site-->
</body>
</html>
Any help with this would be much appreciated because as of now I’m stumped. :fangel: