Spam Honey Pot trap

Ok, so it’s not switched on.
No idea if this’ll help, but it’s worth trying I guess.

Go to your MAMP folder -> conf -> php4 or/and php5 ->php.ini

Make a copy of php.ini in case something goes wrong. This is important.

Open php.ini in a text program

Find this part of the file:

; Output buffering allows you to send header lines (including cookies) even
; after you send body content, at the price of slowing PHP's output layer a
; bit. You can enable output buffering during runtime by calling the output
; buffering functions. You can also enable output buffering for all files by
; setting this directive to On. If you wish to limit the size of the buffer
; to a certain size - you can use a maximum number of bytes instead of 'On', as
; a value for this directive (e.g., output_buffering=4096).
output_buffering = Off

The text might not be an exact match, but you can search for “output_buffering”

Change the last line to:

output_buffering = 4096

Resave the file.
Restart MAMP.
Go to http://localhost:8888/info.php again to check the value is 4096.
Navigate to http://localhost:8888/test.php
Does the redirect work now?

Turning in now. I’ll pick this up tomorrow.

Hooray! That works. Output_buffering = 4096 and I am redirected to sitepoint.

Thanks for all the help!

Excellent. Well done!

Now, let’s just test redirecting to the same page (so that we can exclude any strange behaviour on MAMP’s part) and then everything should work.

Here’s the new script:

<?php
  $submitted = $_GET['success'];

  if (empty($submitted)){
    $toaddress = "your email address here";
    $fromaddress = "From: bob@yahoo.com";
    $message = "Hello, there!";  
    mail($toaddress, "Website Contact Form", $message, $fromaddress);
    header("Location:" . $_SERVER['PHP_SELF'] . "?success=1");
  } else {
    echo "Mail sent and redirected to self";
  }
?>

Please save this script as “test.php” in your MAMP “htdocs” folder (as before) and change your email address accordingly.
Then navigate to http://localhost:8888/test.php

If everything goes well, then after a short delay the message “Mail sent and redirected to self” should be displayed.
You should receive a mail and the url in the address bar should change to http://localhost:8888/test.php?success=1

Is this the case for you?
Do all of these things happen?

Ok,
Did all that. No short delay as such but I received the message “Mail sent and redirected to self” and http:///localhost:8888/test.php?success=1 appeared in the address bar.

Can’t believe I got up before 8 on a Saturday!

Good stuff!

Now, take this script, change your email address accordingly and save it as “contact.php” in your MAMP “htdocs” folder .
Then navigate to http://localhost:8888/contact.php, fill out the form and submit it.
If everything goes well, you should receive a mail with the appropriate details and you should be redirected to the same page, namely: http://localhost:8888/contact.php?success=1
You should also see a message at the top of the contact form which says “Mail sent successfully”.

<?php
    $name = '';
    $email =  '';
    $landline =  '';
    $mobile =  '';
    $message =  '';
     
  if ($_POST['s'] == 's'){
    $name = filter_var($_POST['name'],FILTER_SANITIZE_STRING);
    $email = filter_var($_POST['email'],FILTER_SANITIZE_STRING, FILTER_VALIDATE_EMAIL);
    $landline = filter_var($_POST['landline'], FILTER_SANITIZE_STRING);
    $mobile = filter_var($_POST['mobile'], FILTER_SANITIZE_STRING);
    $message = filter_var($_POST['message'],FILTER_SANITIZE_STRING);
    $robotest = $_POST['robotest']; 
      
    if($robotest){
      exit("Sorry, we think you're a bot!");
    }
    
    if (empty($name)){
      $error .= "You didn't enter a name <br />";
    }
    
    if (empty($email)){
      $error .= "You didn't enter an email address <br />";
    } elseif (!eregi("^[_a-z0-9-]+(\\.[_a-z0-9-]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,})\\.?$", $email)){
      $error .= "The email address appears to be invalid <br />";  
    }
    
    if (empty($landline)){
      $error .= "You didn't enter a landline number <br />";
    } elseif (!eregi("^[0-9()+\\s-]+$", $landline)){
      $error .= "Phone number can only contain digits, spaces, brackets, plus or minus <br />";  
    }
    
    // Optional Field
    if (!empty($mobile) && !eregi("^[0-9()+\\s-]+$", $mobile)){
      $error .= "Mobile number can only contain digits, spaces, brackets, plus or minus <br />";  
    }  
    
    if (empty($message)){
      $error .= "You didn't enter a message <br />";
    }
    
    if (empty($error)) {
      $toaddress = "your mail address here";
      $fromaddress = "From:". $email;
      
      $mailcontent = "Name: ". $name. "\
".
                     "Email: ". $email. "\
".
                     "Landline: ". $landline. "\
".
                     "Mobile: ". $mobile. "\
\
".
                     $message;  
                                    
      mail($toaddress, "Website Contact Form", $mailcontent, $fromaddress);
      header("location:" . $_SERVER['PHP_SELF'] . "?success=1");
    } 
  }
?>

<!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>Pete's Contact Form with jQuery Validation</title>
    <script type="text/javascript" src="js/messages.js"></script>
    <style type="text/css">
      * {font-family: Arial, Helvetica, sans-serif;}
      body { background-color: #999;}
      .form label { font-size: 90%;} 
      .required_notification { font-size: 80%;} 
      
      /*CONTACT FORM - LEFT DIV*/
      #input_wrapper { width: 500px;
      padding: 10px 20px 20px 20px; 
      background: #555;
      background: -moz-linear-gradient(top, #444 0%, #666 50%); /* firefox */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444), color-stop(50%, #666)); /* webkit */
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -webkit-box-shadow: 0px 2px 2px #333333;
      box-shadow: 0px 2px 2px #333333;}
      
      /*Padding/margins/borders/outlines settings*/
      input, textarea {
      margin: 0;
      padding: 0;
      border: 0;
      outline: none;}
      
      /*Border Bottom*/    
      .form li:first-child, .contact_form li:last-child {
      border-bottom:1px solid #CCC;}
      /*Border Bottom*/  
      
      /*Padding/margins/borders/outlines*/
      
      /*No glowing edges to inputs!!!*/
      *:focus {outline: none;}
      /*No glowing edges to inputs!!!*/
      
      /*Header*/  
      .form h3 {
      margin:0px;
      display: inline;}
      
      .required_notification {
      color: #F06; /*#27AECF*/
      margin:5px 0 0 0; 
      display:inline;
      float:right;}
      /*Header*/  
      
      /*Contact form labels*/
      .form ul {
      width:500px;
      list-style-type:none;
      list-style-position:outside;
      margin:0px;
      padding:0px;}
      
      .form li{
      color:#FFF;
      padding:10px; 
      border-bottom:1px solid #999;
      position:relative;}
      
      .form label {
      width:80px;
      margin-top: 2px;
      display:inline-block;
      float:left;
      padding:3px;}
      
      #msg {display:none; 
      font-size:75%;
      position:absolute; 
      z-index:200; 
      background: url(images/msg_arrow.gif) left center no-repeat; 
      padding-left:7px;}
      
      #msgcontent {display:block; 
      background: #D6D6D6; 
      border:2px solid #F06; 
      border-left:none; 
      padding:5px; 
      min-width:192px; 
      max-width:192px;}
      
      /*Contact form labels*/
      
      /*Contact form inputs*/
      .form input:focus, .form textarea:focus { background-color: #EBEBEB;}
      
      /*Contact form text fields*/
      .form input { 
      font-family:Arial, Helvetica, sans-serif;
      font-size: 80%;
      background-color: #D6D6D6;
      /*border:1px solid #aaa;*/ 
      height:20px; 
      width:180px; 
      margin: 0px;
      padding:2px 5px;
      border-radius: 2px;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;}
      /*Contact form text fields*/
      
      /*Contact textarea*/
      .form textarea { font-family:Arial, Helvetica, sans-serif; 
      font-size: 80%;
      width: 240px;
      height: 100px;
      padding: 5px 5px;
      background-color: #D6D6D6;/*padding-right:30px;*/
      /*border:1px solid #aaa;*/
      border-radius: 2px;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;}
      /*Contact textarea*/  
      
      /*Contact form inputs*/
      
      /*input/textarea placeholder text*/
      input::-webkit-input-placeholder { color: #777;}
      input:-moz-placeholder { color: #777;}
      ::-webkit-input-placeholder { color: #777;}
      :-moz-placeholder { color: #777;}
      /*input/textarea placeholder text*/
      
      /*sprite email button*/  
      input.submit { width: 148px; 
      height: 40px;
      margin-left: 190px;
      background-position: 0px 0px;
      background-color: transparent; /* or #666*/
      background-image: url(images/email_sprite.png);
      /*background:transparent url(images/email_sprite.png);*/
      text-indent: -9999px;
      display: inline-block; 
      border:none;
      outline:none;} 
      
      input.submit:hover { background-position: 0px -40px;}
      input.submit:active { background-position: 0px -80px;}
      /*sprite email button*/    
      
      .robotic { display:none; }
      
      .success {font-size: 15px; color: white; margin: 0 0 15px 5px; border: solid 1px green; padding:10px;}
      
      .error {font-size: 15px; color: yellow; margin: 0 0 15px 5px; border: solid 1px yellow; padding:10px;}
      
      /*CONTACT FORM - LEFT DIV*/  
    </style>
  </head>
  
  <body>
    <div id="input_wrapper">
      <?php  
      if ($_GET['success']){
        echo('<div class="success">Your message has been sent successfully!<br />We will be in touch soon.</div>');
      } else if (isset($error)){
        echo('<div class="error">' . $error. '</div>');
      }
      ?>

      <form name="form" id="form" class="form" action="" onsubmit="return validate(this)" method="post">
        <ul>
          <li>
            <h3>Contact Us</h3>
            <span class="required_notification">* Denotes Required Field</span>
          </li>
          <li>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" placeholder="Enter your full name *" value="<?php echo htmlspecialchars($name, ENT_QUOTES); ?>" />
          </li>
          <li>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" placeholder="Enter your email address *" value="<?php echo htmlspecialchars($email, ENT_QUOTES); ?>"/>
          </li>
          <li>
            <label for="telephone">Phone:</label>
            <input type="text" name="landline" id="landline" placeholder="Enter your landline number *" value="<?php echo htmlspecialchars($landline, ENT_QUOTES); ?>"/>
          </li>  
          <li>  
            <label for="mobile">Mobile:</label>
            <input type="text" name="mobile" id="mobile" placeholder="Enter your mobile number *" value="<?php echo htmlspecialchars($mobile, ENT_QUOTES); ?>"/>
          </li> 
          <li>  
            <label for="message">Message:</label>
            <textarea id="message" name="message" placeholder="Enter your message here...*"><?php echo htmlspecialchars($message, ENT_QUOTES); ?></textarea>     
          </li>
          
          <!-- The following field is for robots only, invisible to humans: -->
          <li class="robotic">
            <label for="robotest">If you're human leave this blank:</label>
            <input type="text" id="robotest" name="robotest" class="robotest" />
          </li>  
                  
          <li>
            <input type="hidden" value="s" name="s" />
            <input type="submit" value="submit" class="submit"/>
          </li>
        </ul>
      </form>
    </div>
    
    <script>
      // form validation function //
      function validate(form) {
        var name = form.name.value;
        var email = form.email.value;
        var message = form.message.value;
        var nameRegex = /^[a-zA-Z]+(([\\'\\,\\.\\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
        var emailRegex = /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/;
        var messageRegex = new RegExp(/<\\/?\\w+((\\s+\\w+(\\s*=\\s*(?:".*?"|'.*?'|[^'">\\s]+))?)+\\s*|\\s*)\\/?>/gim);
        if(name == "") {
          inlineMsg('name','Please enter your name!',2);
          return false;
        }
        if(!name.match(nameRegex)) {
          inlineMsg('name','Please enter an invalid name!',2);
          return false;
        }
        if(email == "") {
          inlineMsg('email','<strong>Error!</strong> Please enter your email!',2);
          return false;
        }
        if(!email.match(emailRegex)) {
          inlineMsg('email','<strong>Error!</strong> This email is invalid!',2);
          return false;
        }
        if(message == "") {
          inlineMsg('message','Please enter your message!');
          return false;
        }
        if(message.match(messageRegex)) {
          inlineMsg('message','This message is invalid!');
          return false;
        }
        return true;
      }
      
      // START OF MESSAGE SCRIPT //
      
      var MSGTIMER = 20;
      var MSGSPEED = 5;
      var MSGOFFSET = 3;
      var MSGHIDE = 3;
      
      // build out the divs, set attributes and call the fade function //
      function inlineMsg(target,string,autohide) {
        var msg;
        var msgcontent;
        if(!document.getElementById('msg')) {
          msg = document.createElement('div');
          msg.id = 'msg';
          msgcontent = document.createElement('div');
          msgcontent.id = 'msgcontent';
          document.body.appendChild(msg);
          msg.appendChild(msgcontent);
          msg.style.filter = 'alpha(opacity=0)';
          msg.style.opacity = 0;
          msg.alpha = 0;
        } else {
          msg = document.getElementById('msg');
          msgcontent = document.getElementById('msgcontent');
        }
        msgcontent.innerHTML = string;
        msg.style.display = 'block';
        var msgheight = msg.offsetHeight;
        var targetdiv = document.getElementById(target);
        targetdiv.focus();
        var targetheight = targetdiv.offsetHeight;
        var targetwidth = targetdiv.offsetWidth;
        var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
        var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
        msg.style.top = topposition + 'px';
        msg.style.left = leftposition + 'px';
        clearInterval(msg.timer);
        msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
        if(!autohide) {
          autohide = MSGHIDE;  
        }
        window.setTimeout("hideMsg()", (autohide * 1000));
      }
      
      // hide the form alert //
      function hideMsg(msg) {
        var msg = document.getElementById('msg');
        if(!msg.timer) {
          msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
        }
      }
      
      // face the message box //
      function fadeMsg(flag) {
        if(flag == null) {
          flag = 1;
        }
        var msg = document.getElementById('msg');
        var value;
        if(flag == 1) {
          value = msg.alpha + MSGSPEED;
        } else {
          value = msg.alpha - MSGSPEED;
        }
        msg.alpha = value;
        msg.style.opacity = (value / 100);
        msg.style.filter = 'alpha(opacity=' + value + ')';
        if(value >= 99) {
          clearInterval(msg.timer);
          msg.timer = null;
        } else if(value <= 1) {
          msg.style.display = "none";
          clearInterval(msg.timer);
        }
      }
      
      // calculate the position of the element in relation to the left of the browser //
      function leftPosition(target) {
        var left = 0;
        if(target.offsetParent) {
          while(1) {
            left += target.offsetLeft;
            if(!target.offsetParent) {
              break;
            }
            target = target.offsetParent;
          }
        } else if(target.x) {
          left += target.x;
        }
        return left;
      }
      
      // calculate the position of the element in relation to the top of the browser window //
      function topPosition(target) {
        var top = 0;
        if(target.offsetParent) {
          while(1) {
            top += target.offsetTop;
            if(!target.offsetParent) {
              break;
            }
            target = target.offsetParent;
          }
        } else if(target.y) {
          top += target.y;
        }
        return top;
      }
      
      // preload the arrow //
      if(document.images) {
        arrow = new Image(7,80); 
        arrow.src = "images/msg_arrow.gif"; 
      }
    </script>
  </body>
</html>

Does that work for you?

Welcome to the wonderful world of abstinence :slight_smile:
I had such a raving non-hangover this morning I got up at 6:30!

6.30… on a weekend!? Thats insane!

Yes the form works. A green border with a message appears.

Actually better than my idea! I have a tendency to make things overly complicated.

it looks fantastic, I would be interested to see what the form would look like if all the error messages were displayed there. From an aesthetic point of view the form in its current state ticks all the boxes for me, although it would be not more consistent and accessible for messages to displayed in the same place?

I will have a close look at all the markup scripts etc and hopefully after your guidance have a better idea of whats going on. At least I’ll be in better position when I get through a few more chapters of my study books. However I save all that until tomorrow. After an afternoon rowing I’m beat! I prefer sculls but today I was in a sweep oar boat and I’m not so used to that technique.

Hi,

I’m glad to hear that it works. I knew we’d get there in the end. :slight_smile:
You might notice that the div containing the confirmation message has a class of “success”, so that you can style it in your CSS as necessary.
In your screen shot, you had a link “Click here to send another message”, so I thought it was easier to just redisplay the form.

If you turn off JavaScript in your browser and submit the form without filling it in correctly, you can see the server-side validation kick in and the error messages display in the same place.
Give it a try! Here’s instructions on how to disable JS in Safari: http://whatismyipaddress.ricmedia.com/help/JavaScript/safari/

I will have a close look at all the markup scripts etc and hopefully after your guidance have a better idea of whats going on. At least I’ll be in better position when I get through a few more chapters of my study books. However I save all that until tomorrow.

Yeah, no problem, just post back here if you have any further questions.

At least you won’t get a beer belly :slight_smile: Rowing is hardcore!

Yes, disabling Safaris Javascript brought up the yellow error messages.

Do I have to keep my sites in Applications/MAMP/Htdocs or I can swap MAMP’s root location back to documents/localhost my external HD?

Next week I’ll spend the evenings hitting the books. After that I have 3 more sites to practice on… a graphic designer friends portfolio site, my rowing club and my villages community site. The last two need CMS so I’ve been looking at Concrete5 vs Wordpress.

The site should be ready next week so I’ll post it for evaluation, which will also give me the opportunity to discuss whether the security is adequate.

No doubt in the near future I’ll have some more questions. Thanks for all your help!!! If you had a buy me a beer button on your profile I’d hit it a few times!

Hi there,

You should be able to swap it back, I think. However, saying that, I’m completely unfamiliar with MAMP, so just try it and see if it works.
You can’t really break anything.
The reason I wanted everything to be according to the default configuration, was so that it was easier to debug.

Maybe this thread will help: http://www.sitepoint.com/forums/showthread.php?932379-Better-alternative-to-WYSIWYGs
I’m a big WordPress fan, but there are lots of other opinions out there.
Personally speaking, I’d quite like to try out Concrete5 (so that I can compare it to WP).

Yeah, do do that, as security is important.
Can you let me know when you start that thread, so that I can jump on.

Appreciate that!
Maybe I should implement one of those on my blog …

… just another quick question.

The success message forces the contact form down which causes the submit button to overlap onto other content below (see attached image).

I have changed the height of the contact form div to account for this but it leaves an ugly wide margin at the bottom.

Is there anyway to make the contact form div expand and push the content down the page?

Hey,

Is there any reason that it has a height in the first place?
What happens if you remove the height declaration out?

Yes of course I see. Should of figured that one out myself:blush:.

For aesthetic reasons I wanted both divs to be the same height. Without a declaration one is shorter than the other, which I think doesn’t look so good.

The contact from div has no declaration whilst the div next-door does. The difference in height now is about 1px which I can just about live with. The reset.css I used helped plus I learned about browser quirks, which I find very annoying! The contact form div now expands to fit success message.

As a newcomer the site wasn’t designed with flexibility and these considerations in mind. Something to think more about when I plan my next site.

Man you guys are still at huh

When I said ‘sure I can knock you up a website no problem!’ A naive beginner who had no idea what was coming… A steep but useful learning curve.

I understand its a fun goal