8 Replies Latest reply on Mar 30, 2010 4:23 PM by WRobN1

    Site messed up after adding Contact form.

    WRobN1

      The site is online in its current state: http://www.wientjesvoegwerk.nl/index.html

       

      The site uses (X)HTML, JAVA, PHP and Spry tabbed panels with a CSS layout.

       

      The current state has:

      <?php include("mail.php"); ?>
      

      Before the Doctype, etc.

       

      <?php $xajax->printJavascript('xajax/'); ?>
      

      In the header.

       

      But adding:

      <?php echo '<div id="contact_result">'.$form.'</div>'; ?>
      

      to the div where i want to put the mailing form results in problems...

       

      If i add that last line my footer will go up to the header. and i dont know why...

       

      The new code from the form that messes up the site is marked in red.

       

      The HTML:

      <?php include("mail.php"); ?>
      <!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>
           <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
           <title>Wientjes Voegwerk & Renovatie - Home</title>
          <link href="CSS/Style.css" rel="stylesheet" type="text/css" />
               
           <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
           <link href="CSS/Style.css" rel="stylesheet" type="text/css" />
      
           <meta http-equiv="Content-Language" content="NL" />
           <meta http-equiv="imagetoolbar" content="no" />
           <meta name="MSSmartTagsPreventParsing" content="true" />
           
          <meta name="description" content="Wientjes Voegwerk en Renovatie is een voeg- en renovatiebedrijf gespecialiseerd in gevelrenovatie. Dagelijkse werkzaamheden zijn het voegen van nieuwbouwwerk, en alle voorkomende vormen van gevelrenovatie. Ik geef uw woning, garage of schoorsteen de aandacht die het verdient en ben trots op het resultaat van mijn werk!"/>
           
          <meta name="keywords" content="Voegwerk, Renovatie, Reinigen, Impregneren, Muur, Voegen, Steen, Woning, Garage, Schoorsteen, Bedrijf, Gevel, Wientjes, Uitslijten, Kappen, Fundering, Vorstschade, Metselen, Metselwerk, Vocht" />
           
          <meta name="author" content="Rob Nijlaan" />
          
          <?php $xajax->printJavascript('xajax/'); ?>
      
      </head>
      
      <body>
      
      <div id="WContainer">
      
        <div id="WHeader" align="center">
               <img src="Pictures/VoegenRenLos.png" width="540" height="58" /><br />
          <img src="Pictures/WientLogo.png" width="600" height="136" alt="Wientjes Voegwerk &amp; Renovatie" /></div>
          
           <div id="TabbedPanels1" class="VTabbedPanels">
                <ul class="TabbedPanelsTabGroup">
                                 
               <div class="TabbedPanelsTab" tabindex="0">
                <style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
                <table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr>
                <td style="padding-right:0px" title ="Home">
              <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td>
                </tr></table>
                </div>
      
               <div class="TabbedPanelsTab" tabindex="0">
                <style>#Info a{display:block;color:transparent;} #Info a:hover{background-position:left bottom;}a#Info {display:none}</style>
                <table id="Info" width=0 cellpadding=0 cellspacing=0 border=0><tr>
                <td style="padding-right:0px" title ="Info">
                <a href="javascript:TabbedPanels1.showPanel(2);" title="Info" style="background-image:url(Buttons/Info.png);width:172px;height:75px;display:block;"><br/></a></td>
                </tr></table>
                </div>
      
               <div class="TabbedPanelsTab" tabindex="0">
                <style>#Gallerij a{display:block;color:transparent;} #Gallerij a:hover{background-position:left bottom;}a#Gallerij {display:none}</style>
                <table id="Gallerij" width=0 cellpadding=0 cellspacing=0 border=0><tr>
                <td style="padding-right:0px" title ="Gallerij">
                <a href="javascript:TabbedPanels1.showPanel(3);" title="Gallerij" style="background-image:url(Buttons/Gallerij.png);width:172px;height:75px;display:block;"><br/></a></td>
                </tr></table>
              </div>
      
                <div class="TabbedPanelsTab" tabindex="0">
                <style>#Contact a{display:block;color:transparent;} #Contact a:hover{background-position:left bottom;}a#Contact {display:none}</style>
                <table id="Contact" width=0 cellpadding=0 cellspacing=0 border=0><tr>
                <td style="padding-right:0px" title ="Contact">
                <a href="javascript:TabbedPanels1.showPanel(4);" title="Contact" style="background-image:url(Buttons/Contact.png);width:172px;height:75px;display:block;"><br/></a></td>
                </tr></table>
              </div>
              
              <br />
              <br />
              <br />
              <br />
              <br />
              
              <center><footer>Wientjes Voegwerk en Renovatie<br /><br />
              tel; 06 - 221 464 28<br /><br />kvk; 
              </footer></center>
              
              </ul>
              
                       <div class="TabbedPanelsContentGroup">
        
                          <div class="TabbedPanelsContent" id="Home">
                      
                         <h1>Welkom Bij Wientjes Voegwerk en Renovatie!</h1>
            <p>Wientjes Voegwerk en Renovatie is een voeg- en renovatiebedrijf gespecialiseerd in gevelrenovatie.<br />Dagelijkse werkzaamheden zijn het voegen van nieuwbouwwerk, en alle voorkomende vormen van gevelrenovatie.<br />Ik geef uw woning, garage of schoorsteen de aandacht die het verdient en ben trots op het resultaat van mijn werk!<br /><br />Wientjes, J </p>
            <h2>Voegen/Renovatie/Reinigen & Impregneren. </h2>
            
      <table border="0" align="right"><center><tr><td>
      <a href="Foto/Foto's telefoon1 075.jpg"><img src="Foto/Foto's telefoon1 075.jpg" alt="Muur met Steiger" width="379" height="354" align="right" margin-right="55px"/>
      </a></td></tr><tr><td><center>klik op de foto voor een groter voorbeeld</center></td></tr></center></table>
      
        <p>Vaak wordt er bij het kopen van een woning weinig aandacht besteed aan het voegwerk. Er wordt alleen gekeken naar hoe een woning is gebouwd.<br />Een voeg bepaalt echter wel het aanzicht van een woning. Van een goed aangebrachte voeg heeft u uiteraard veel langer plezier. <br />Renovatie bestaat voornamelijk uit het uitslijpen of kappen van het oude voegwerk. Waar nodig het verwijderen van scheuren die zijn ontstaan door:</p>
         
        <ul>
          <li>
            <p>
              Verzakking van de fundering 
            </p>
          </li>
          <li>
            <p>
              Slecht voegwerk
            </p>
          </li>
          <li>
            <p>
              Vorstschade
            </p>
          </li>
          <li>
            <p>
              Doorhangen of ontbreken van ...
            </p>
          </li>
        </ul>
        
        <p>Bij gevelvervuiling van uw woning kunnen er problemen ontstaan die het wooncomfort negatief kunnen beïnvloeden.<br />Wanneer de voeg is aangetast of het metselwerk is door vorstschade beschadigd, kunnen er vochtproblemen in huis ontstaan.<br />Mos en alg hechten zich goed aan beschadigde stenen en voegwerk. <br /><br />Door middel van impregnering wordt een woning waterafstotend gemaakt.<br />Dit betekent dat het voeg- en metstelwerk jarenlang wordt beschermd tegen weersinvloeden. <br />Ook is impregnering beter voor de isolatie van de woning.</p>
        
      <p align="left"><img src="Pictures/TelnrLos.png" width="525" height="49" align="top"/></p>
      
                               </div>
          
                         <div class="TabbedPanelsContent" id="Info">
                               test2
                         </div>
          
                         <div class="TabbedPanelsContent" id="Gallerij">
                               test3
                         </div>
          
                              <div class="TabbedPanelsContent" id="Contact">
                      <?php echo '<div id="contact_result">'.$form.'</div>'; ?>
                          </div>
          
                       </div>
             `     </div>
          </div>
              
           <div id="WFooter" align="center">
          
               <footer>Wientjes Voegwerk & Renovatie     ,    03- '02         »        Site by ;    <b>Rob Nijlaan</b>        »        Problemen of vragen over deze site?    -    <b><a href="mailto:Site@WientjesVoegwerk.nl">Site@WientjesVoegwerk.nl</a></b></footer>
            
             </div>
      
      </div>
      
      </body>
      </html>
      
      </
      

       

      The CSS:

      @charset "utf-8";
      /* CSS Document */
      
      html,body {
           height:100%; /* needed for container min-height */
           width:100%;
           background: #FFFFFF url(../Pictures/Background.png) no-repeat center;
           color:#000;
      }
      
      h1{
      font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color: #595999;
      font-weight: bold;
      font-style:italic;
      font-size: 250%;
      }
      
      h2{
      font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color: #595999;
      font-weight: bold;
      font-size: 200%;
      }
      
      p{
      font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
      font-size: 110%;
      }
      
      footer{
      font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
      font-size: 70%;
      }
      
      
      
      #WContainer{
           position:absolute;
           margin:0 auto; 
           width:80%;
           background:none;
           height:auto;
           height:100%; 
           min-height:100%;
           margin-left: 10%;
           margin-right: 10%;
      }
      
      
      #WHeader{
           height: 195px;
           width:100%;
           margin-bottom: 10px;
           margin-left: 0px;
           margin-right: 10px;
           }
           
      .VTabbedPanels .TabbedPanelsTabGroup {
           float: left;
           width: 172px;
           height: 75px;
           background-color: #FFF;
           position: relative;
           border-top: solid 0px #FFF;
           border-right: solid 0px #FFF;
           border-left: solid 0px #FFF;
           border-bottom: solid 0px #FFF;
      }
      
      .VTabbedPanels .TabbedPanelsTab {
           float: none;
           margin: 0px;
           border-top: none;
           border-left: none;
           border-right: none;
      }
      
      .VTabbedPanels .TabbedPanelsContentGroup {
           margin-left: 220px;
           width: auto;
           height: auto;
           min-height:50%;
           max-width:83%;
           min-width:500px;
           padding: 20px 20px 20px 20px;
           border-left: solid 1px #999;
           border-bottom: solid 2px #999;
           border-top: solid 1px #999;
           border-right: solid 2px #999;
      }
      
      #WFooter{
           clear:both;
           height: 30px;
           margin-top:1px;
      }
      

       

      Also i use "SpryTabbedPanels.js", for the html.

       

      The Contact form: (adjusted to hide critical info from forum users)

      <?php
      require_once('phpmailer/class.phpmailer.php');
      require_once('xajax/xajax_core/xajax.inc.php');
      
      $form = '<form id="ContactForm">
                  <div class="container">
      
                <label class="contactlabel">Ùw Naam<br /><input name="name" type="text" class="input" /></label>
                <label class="contactlabel">Uw Email Adres:<br /><input name="email" type="text" class="input" /></label>
                <label class="contactlabel">Uw Telefoonnummer:<br /><input name="phone" type="text" class="input" /></label>
                Typ hier uw bericht:<br />
                <textarea name="msg" cols="1" rows="1"></textarea><br />
                   <input type="button" id="subbtn" class="btn" value="Submit" onclick="xajax_myFunction(xajax.getFormValues(\'ContactForm\'));" />
      
                <div id="form_msg"></div> //this div will contain error messages
      
              </div>
           </form>';
      
      function myFunction($get) {  
          global $form, $error;
          $error = '';
          $objResponse = new xajaxResponse(); 
          $show_form = true;  
          if (!empty($get['email']) && !empty($get['phone']) && !empty($get['msg']) && !empty($get['name'])) { 
              if (preg_match("/^[\w-]+(\.[\w-]+)*@([0-9a-z][0-9a-z-]*[0-9a-z]\.)+([a-z]{2,4})$/i", trim($get['email']))) {
                  $email = preg_replace("/\r\n/", "", $get['email']);
                  $from = preg_replace("/\r\n/", "", $get['name']);
                 $name = $get['name'];
                  $phone = $get['phone'];
               $msg = $get['msg'];
               $mail = new PHPMailer();
                  $mail->IsSMTP();
                  $mail->Host = "mail.YOURHOST.com";
                  $mail->SMTPAuth = true;
                  $mail->Username = "USERNAME";
                  $mail->Password = "PASSWORD";
                  $mail->From = $get['email'];
                  $mail->FromName = $get['name'];
                  $mail->AddAddress("YOUR@MAILADRESS.com");
                  $mail->AddReplyTo($email, $from);
                  $mail->Subject = "Er is een bericht verzonden vanuit Wientjesvoegwerk.nl";
                  $mail->IsHTML(true); 
               $mail->Body = "Name: $name <br/> Email: $email <br/> Phone: $phone <br/> Message: $msg"; 
                  if ($mail->Send()) {
                      $error = "Success! Dank u voor uw interesse! Er wordt zo spoedig mogelijk contact met u opgenomen."; 
                      $show_form = false; 
                  } else {
                      $error = "Er is een probleem ontstaan tijdens het verzenden, probeert u het a.u.b. nog eens."; 
                          $show_form = true; 
                  }
              } else {
                  $error = "Het ingevoerde email adress is onjuist. Probeert u het a.u.b. nog eens."; 
                     $show_form = true; 
              }
          } else {
              $error = "Vul a.u.b. alle nodige velden in!"; 
                $show_form = true; 
          }
          if (!$show_form) {
                $objResponse->assign('contact_result', 'innerHTML', $error); 
                } else {
                $objResponse->assign('form_msg', 'innerHTML', $error); 
                }
          return $objResponse;
      }
      
      $xajax = new xajax(); 
      $xajax->registerFunction('myFunction'); 
      $xajax->processRequest(); 
      ?>
      
       
      

       

      Also "class.phpmailer.php" and "xajax.inc.php" are obviously needed as well as some other files from those packages.

       

      THE BIG PROBLEMS:

       

      1. Adding the form to a div (into content div of Spry tabbed panels) results in wrong apearance.

           Footer is put to top.

       

      2. Adding the form to a div results in broken functions.

           Buttons in the Spry tabs dont work anymore.

       

      3. Java is messed up.

           in top screen you read:  printJavascript('xajax/'); ?>

           in lower screen in content div:  test2 test3 (text from the 2nd and 3rd Content area of Spry, just so its filled with something) and  '.$form.'  '; ?>

       

      SOLUTIONS ASKED:

       

      1. Please help me with the contact form so it will work on my page and no error remains. Im not that good in Java...

       

      2. Please help me solving the problem with the footer. I dont have any clue anymore why this happens. And why no problems occur without the mail form.

       

      3. Can anyone tell me why the buttons also lose function? It looks like a similar problem as the footer.

       

      In short: HELP!