title: Why is PHP messing with my CSS?
body: <p>I created my contact form and have been using bootstrap for the CSS. My contact form looked great before I added the PHP, all fields aligned and they were centred. Now I have input my PHP the contact form it looks different. The field widths have shortened, the message box is a different width to the other fields and the forms is about 3/8’s across accross the screen. Before I added the PHP it was the width of 6 columns and centred, as you can see from my code.</p>
  
  <p>I am new to web development and I am trying to learn the basics as I think it will help with my career in the future, so any help would be much appreciated. Also, I do have this hosted and live so there is definitely an error in my code somewhere.</p>
  
  <p>This is my contact form with the PHP code</p>
  
  <pre><code>&lt;form class="form-horizontal" id="contactform" role="form" method="post" action="&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;" novalidate&gt;
  &lt;?php
      if($sent === true) {
          echo "&lt;h2 class='success'&gt;Thanks, your message has been sent successfully&lt;/h2&gt;";
      } elseif ($hasError === true) {
          echo '&lt;ul class="errorlist"&gt;';
          foreach($errorArray as $key =&gt; $val) {
              echo "&lt;li&gt;" . ucfirst($key) . " field error - $val&lt;/li&gt;";
          }
          echo '&lt;/li&gt;';
      }
  ?&gt;
  &lt;div class="form-group"&gt;
      &lt;div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3"&gt;
          &lt;input type="text" id="name" name="name" placeholder="Name" value="&lt;?php echo (isset($name) ? $name : ""); ?&gt;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I then have other fields here almost identical for phone, email and message and then finish it off with the close form.</p>
  
  <pre><code>&lt;/form&gt;
  </code></pre>
  
  <p>This is my j query script</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jquery(document).ready(function($) {
      $("#contactform").validate({
          rules: {
              name: {
                  required: true,
                  minlength: 2
              },
              email: {
                  required: true,
                  email: true
              },
              message: {
                  required: true
              }
          },
          messages: {
              name: {
                  required: "Please enter your name",
                  minlength: "Your name seems a bit short"
              },
              email: {
                  required: "Please enter your email address",
                  email: "Please enter a valid email address"
              },
              message: {
                  required: "Please enter your message"
              }
          }
      });
  });
  </code></pre>
  
  <p></p>