Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

frits vd Velden
frits vd Velden
1,860 Points
Posted by frits vd Velden
frits vd Velden
1,860 Points

Form loses css style

Hi i'm working on this form http://www.audiciensbijscholing.nl/inschrijven.html, it works pretty good but when I send the form I get a succes message without the css style. Here's the code for the form. Can someone tell me what's wrong?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Audiciens bijscholing</title>

<!-- Bootstrap core CSS -->
<link href="img/assets/css/bootstrap.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="img/assets/css/main.css" rel="stylesheet">
<link href="img/assets/css/font-awesome.min.css" rel="stylesheet">
<link href="img/assets/css/animate-custom.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<script src="img/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="img/assets/js/modernizr.custom.js"></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body data-spy="scroll" data-offset="0" data-target="#navbar-main">
<div id="navbar-main"> 
  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="http://www.audiciensbijscholing.nl"><img src="img/img/erasmus.png" id="logo_img"></a> </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li> <a href="http://www.audiciensbijscholing.nl" class="smoothScroll">Home</a></li>
          <li> <a href="http://www.audiciensbijscholing.nl#over" class="smoothScroll"> Over</a></li>
          <li> <a href="http://www.audiciensbijscholing.nl#programma" class="smoothScroll"> Programma</a></li>
          <li> <a href="http://www.audiciensbijscholing.nl/inschrijven.html" class="smoothScroll"> Inschrijven</a></li>
          <li> <a href="http://www.audiciensbijscholing.nl#contact" class="smoothScroll"> Contact</a></li>
        </ul>
      </div>
      <!--/.nav-collapse --> 
    </div>
  </div>
</div>

<div class="container container-form">
<div class="row-fluid">

<?php
if (isset($_POST['zendform'])) 
{
    $fout = false; // Om te kijken straks of er wat fout is
    $zendform = "Bedrijf: " . $_POST["bedrijf"] . "\r\n";
    $zendform .= "Naam: " . $_POST["naam"] . "\r\n";
    $zendform .= "Adres: " .  $_POST["adres"] . "\r\n";
    $zendform .= "postcode: " . $_POST["postcode"] . "\r\n";
    $zendform .= "Plaats: " . $_POST["plaats"] . "\r\n";
    $zendform .= "Email: " . $_POST["mail"] . "\r\n";
    $zendform .= "Telefoon: " . $_POST["tel"] . "\r\n";
    $zendform .= "Starnummer: " . $_POST["star"] . "\r\n";
    $zendform .= "IBAN: " . $_POST["iban"] . "\r\n";
    foreach($_POST["autoincasso"] as $value)
    {
        $zendform .= "Autoincasso: " . $value . "\r\n";  
    }
    foreach($_POST["factuur"] as $value)
    {
        $zendform .= "Factuur:" . $value . "\r\n";  
    }


    if($fout == false) // Als er niks fout is (alles is dus netjes ingevuld)
     {  
    $to      = 'mail@mail.com';
    $subject = 'Formulier';
    $headers = 'From: mail@mail.com' . "\r\n" .
    'Reply-To:mail@mail.com' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();
    mail($to, $subject, $zendform, $headers);
    mail ('mail@mail.com', $subject, $zendform, $headers);
    echo 'Uw bericht is verzonden.';
     }   
    else
    {
      print '<p>Helaas, er is wat fout gegaan tijdens het verzenden van het formulier.</p>';
    }   
}
?>
 </div>
 </div>
 </body>


 <div id="footerwrap">
  <div class="container">
    <div class="row">
      <div class="col-md-12"> <span class="copyright">Copyright &copy; 2015 Audiciens bijscholing. Design by <a href="http://www.url.nl" rel="nofollow">URL</a></span> </div>

    </div>
  </div>
</div>

<!-- Bootstrap core JavaScript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 

<script type="text/javascript" src="img/assets/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="img/assets/js/retina.js"></script> 
<script type="text/javascript" src="img/assets/js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="img/assets/js/smoothscroll.js"></script> 
<script type="text/javascript" src="img/assets/js/jquery-func.js"></script>

</body>
</html>

2 Answers

Sascha Bratton
Sascha Bratton
3,671 Points
Sascha Bratton
Sascha Bratton
3,671 Points

I think the problem is with these stylesheet tags:

<!-- Custom CSS -->
<link href="img/assets/css/main.css" rel="stylesheet">
<link href="img/assets/css/font-awesome.min.css" rel="stylesheet">
<link href="img/assets/css/animate-custom.css" rel="stylesheet">

You've got img/assets/css/ for the directory, but from here it looks like it should be just assets/css/.

If you try to go to http://www.audiciensbijscholing.nl/img/assets/css/main.css it doesn't work.

But if you use http://www.audiciensbijscholing.nl/assets/css/main.css it does!

frits vd Velden
frits vd Velden
1,860 Points
frits vd Velden
frits vd Velden
1,860 Points

Thanks Sascha, I need to read better :)

Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points
Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points

Try change the extension to .php instead of html

frits vd Velden
frits vd Velden
1,860 Points
frits vd Velden
frits vd Velden
1,860 Points

I've copied the first head en nav elements from the html file (and also changed it to php) and now it works. Just changing it to php didn't do the trick at first. Thanks for the advice, it's probably better to keep the whole thing in php.