I wanted to add a contact form to my project website, so decided to go for a very popular PERL FormMail script, only trouble is, it needs to be in keeping with the rest of the site. After having some initial problems getting the script to run properly with my modified form, now the HTML is not following the CSS style rules. Can any wise souls out there help a poor newbie? Please? The following is ALL of the code:- (it can also be viewed at www.jbritten.co.uk/contact/fm-contact-us.cgi) 
#!/usr/bin/perl
use strict;
use warnings;
use Authen::Captcha;
use CGI ;

my $cgi = new CGI ;

# this directory is not accessible via the web.
my $captcha_datadir = "/websites/123reg/LinuxPackage23/jb/ri/tt/jbritt
+en.co.uk/public_html/.captcha_data";

# this directory will store the captcha images. This should
# be accessible via the web because it will be included on the page.
my $captcha_outputdir = "/websites/123reg/LinuxPackage23/jb/ri/tt/jbri
+tten.co.uk/public_html/contact/img";

# This directory is the same as above, but using the web accessible
# URL path.
my $image_dir = "/contact/img";

# This should be the location of the FormMail.cgi script.
my $formmail = "/contact/FormMail.cgi";

# This is where the user should be taken to after submitting the form.
my $redirect = "http://jbritten.co.uk/contact/email_sent.html";


my $captcha = Authen::Captcha->new(
  data_folder => $captcha_datadir,
  output_folder => $captcha_outputdir,
  );

my ($md5sum, $chars) = $captcha->generate_code(4);
# eliminate ambiguous chars from $chars
my $bad_chars = 1;
while ($bad_chars) {
    if ( $chars =~ m/o|0|O|l|i|1|q|9|6|b|s|S|5|2|Z/) {
        ($md5sum, $chars) = $captcha->generate_code(4);
    } else {
        $bad_chars = 0;
    }
}
my $title      = 'Contact Us' ;
my $recipient  = 'james\@jbritten.co.uk' ;
my $invitation = 'If you would like to request a quote, have a chat or
+ if you require any information whatsoever, you can use the form belo
+w to get in touch with us. All enquiries will be answered within 24 h
+ours.' ;
my $email    ;
my $realname  ;

print $cgi->header () ;

print << "END_OF_HTML";

<!doctype html>
<html><!-- InstanceBegin template="/Templates/layout.dwt" codeOutsideH
+TMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!-- InstanceBeginEditable name="doctitle" -->
<title>J Britten Web | Design | Photography Contact Form</title>
<!-- InstanceEndEditable -->
<!--[if lt IE 9]>
       <script
       src="http://html5shiv.googlecode.com/svn/trunk/htm
       l5.js">
       </script
       <![endif]-->
<link href=“styles.css" rel="stylesheet" type="text/css" media="screen
+">
<link href="print.css" rel="stylesheet" type="text/css" media="print">
<link href="JBritten_mq.css" rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {
    font-family: Helvetica, "Arial Narrow", sans-serif;
}
</style>
<script src="includes/jquery-1.4.2.js" type="text/javascript"></script
+>
<script src="jQuery/js/jquery.jsocial.js" type="text/javascript"></scr
+ipt>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2149023" binding="#social" />
</oa:widgets>
-->
</script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>



<body>
<!--container begins-->
<div ID="container">  
  
<header role="banner"> 

<a href="index.html"><img src="assets/images/HeadrLogo2.png" alt="Jame
+s Britten Web Design Photography Logo" width="255" height="251" class
+="fltlt"></a>

<h1>James Britten.</h1>
<h2>Web | Design | Photography</h2>
</header>
  
  <!--navigation ul-->
  <nav role="navigation">
  <h2>Main navigation</h2>
        <ul>
          <li><a href="aboutUs/index.html">Company</a></li>
          <li><a href="services/index.html">Services</a></li>
          <li><a href="webgallery/index.html">Web Design</a></li>
          <li><a href="photogallery/index.html">Photography</a></li>
          <li><a href="contact/index.html">Contact Us</a></li>
        </ul>
      </nav>
  <!-- InstanceBeginEditable name="content" -->
  <main>
    <h1>Contact Us.</h1>
    <p>If you would like to request a quote, have a chat or if you req
+uire any information whatsoever, you can use the form below to get in
+ touch with us. All enquiries will be answered within 24 hours.</p>
    <form action="/contact/FormMail.cgi" method="post" name="contactJa
+mes" id="contactJames">
      <fieldset>
        <legend>Your Contact Information</legend>
        <p>
          <label for="Name">Please enter your Name</label>
          <input type="text" name="Name" id="Name">
        </p>
        <p>
          <label for="email">Please enter your Email Address</label>
          <input type="text" name="email" id="email">
        </p>
        
      </fieldset>
      <fieldset>
      <legend>What is the nature of your enquiry?</legend>
      <p>
        
        <br>
        <label>
          <input type="checkbox" name="Services" value="Photography" i
+d="Services_1">
          Photography</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="Website Design
+" id="Services_2">
          Website Design</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="Website Develo
+pment" id="Services_3">
          Website Development</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="checkbox" id="
+Services_4">
          Checkbox</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="E-Commerce" id
+="Services_5">
          E-Commerce</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="Branding" id="
+Services_6">
          Branding</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="SEO" id="Servi
+ces_7">
          SEO</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="Copy Writing" 
+id="Services_8">
          Copy Writing</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="General Enquir
+y" id="Services_9">
          General Enquiry</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="Email Marketin
+g" id="Services_10">
          Email Marketing</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="checkbox" id="
+Services_11">
          Legacy Websites</label>
        <br>
      </p>
<p>
          <label for="message">Please include details about your enqui
+ry.</label>
          <textarea name="message" cols="45" rows="10" id="message"></
+textarea>
        </p>
      </fieldset>
      <fieldset><legend>Would you like to receive information from us 
+in the future?</legend>
        <p>
          <label for="Newsletter">Check the box if you would like to r
+eceive our newsletter.</label>
          <input name="Newsletter" type="checkbox" id="Newsletter" che
+cked>
        </p>
        
      </fieldset>
<!-- The following section displays a captcha request  -->
        <table>
<tr>
          <td><label>Enter the letters </label></td>
          <td><img src="/contact/img/$md5sum.png" /> <input type="text
+" size="20" name="captcha-text" id="captcha-text" /><td></td>
        </tr>
</table>
        <!-- End section -->

      <p>
        <input type="submit" name="button" id="button" value="Submit">
      </p>

<input type='hidden' name='title' value="Contact Us" >
<input type='hidden' name='recipient' value='james\@jbritten.co.uk' >
<input type='hidden' name='redirect' value="http://jbritten.co.uk/cont
+act/email_sent.html" >
<input type='hidden' name='captcha-md5sum' value="$md5sum" >

    </form>
   
  </main>
  <footer>
    <div class="fltlt">
      <ul>
        <li><a href="../aboutUs/index.html">Company</a></li>
          <li><a href="../services/index.html">Services</a></li>
          <li><a href="../webgallery/index.html">Web Design</a></li>
          <li><a href="../photogallery/index.html">Photography</a></li
+>
          <li><a href="../contact/form.html">Contact Us</a></li>
      </ul>
    </div>
    <div class="fltlt">
      <ul>
        <li>Photography</li>
        <li>Website design</li>
        <li>Branding</li>
        <li>SEO</li>
        <li>E-commerce</li>
        <li>Copy writing</li>
        <li>Email marketing</li>
      </ul>
    </div>
    <div class="copy"> © James Britten 2014. </div>
    <div class="social"></div>
    <script type="text/javascript">
// BeginOAWidget_Instance_2149023: #social
    
    $('.social').jsocial({
            twitter        :  'JBrittenPhoto',
            facebook    :  'facebook.com/james.britten.5011',
            flickr        :  '',
            delicious    :  '',
            linked        :  '',
            youtube        :  '',
            feed        :  '',
            friendfeed    :  '',
            digg        :  '',
            lastfm        :  '',
            center        : false,    
            inline        : true,
            small        : false,
            newPage        : false
        });
    

// EndOAWidget_Instance_2149023
    </script>
  </footer>
  <!-- InstanceEndEditable -->
  <!--container div ends-->
</div>

</body>


<!-- InstanceEnd --></html>
        
END_OF_HTML

[download]

In reply to New to this... CSS styles are not applied to the HTML within the PERL script. Please help! by Anonymous Monk

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.