Spam-Free Suggestion Box

Your web sites can now have a suggestion box without form spam.

There is no captcha or other action users need to take to prove they're human.

To the user, it appears to function like a form. But it's not a form. Thus, it should attract no automated form spam.

There is no HTML form tag. There is no form field at all.

The text box where users type in their suggestions can be designed to look like a form textarea field, but it is not a textarea field. The button can be designed to look like a form button, but it's not a form button.

The suggestion box works on both WordPress and non-WordPress websites.

Here's a working suggestion box. Give it a try. Your suggestion will be emailed to us. (For a reply, you'll need to include your email address with the suggestion.)

Use a suggestion box to solicit feedback and ideas. Ideas may relate to:

• Ebook topics.
• Web site content.
• Community actions.
• Restaurant menu items.
• Web site design or usability.

Well, you get the idea.

How It Works

A PHP script is uploaded to your server.

A line of JavaScript is pasted into the page content or navigation area where the suggestion box is to be published. (Instructions for both WordPress and non-WordPress websites are further below.)

The box where the person types in their suggestion is an editable div. The "button" to submit the suggestion is also a div.

The suggestion box appears to function like a form would function.

1. To use the suggestion box, the user clicks in the editable div and types what they want to type — as if it was a form textarea field. Unlike a textarea field, however, the editable div can extend to accomodate whatever the user types in.

2. To submit the suggestion, the user clicks the submit div — as if it was a submit button.

When the user clicks the submit div, the suggestion box editable div content is replaced with the confirmation message specified in the PHP script and an email with the suggestion is sent.

The PHP script is where the design of the suggestion box div and submit div are specified. Also the confirmation message. And specifics for the email that's sent to you.

The PHP Script for the Suggestion Box

Here's the source code of the PHP script. Notes follow.

<?php
/*
   Suggestion Box
   Version 1.1
   September 20, 2016

   Version 1.0, September 20, 2016, Initial release.
   Version 1.1, September 20, 2016, Block submission of empty suggestion box.

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software LLC grants you 
   a royalty free license to use this software 
   provided this notice appears on all copies. 

   Copyright 2016 Will Bontrager Software LLC
*/


/* ** *** ** * START of CUSTOMIZATION AREA * ** *** ** */
// Six places to customize.

// Customization # 1:
// Specify the email address where suggestions shall be sent to.

$EmailAddressForSuggestions = "name@example.com";


// Customization # 2:
// Specify the email address where suggestions shall be sent to.
//    If your message contains a double-quotation mark, it 
//    must be preceded with a backward-slash character. 
//    Example: A \"suggestion\" enclosed!

$SubjectLineForSuggestionsEmail = "Suggestion from Will's Suggestion Box";


// Customization # 3:
// Between the double-quotation marks, specify the confirmation 
//    message to present after a suggestion has been submitted. 
//    If your message contains a double-quotation mark, it 
//    must be preceded with a backward-slash character. 
//    Example: It \"works\" good.

$ThankYouMessageForSuggestionBox = "
<br />
<b>Thank you!</b>
<br /><br />
If you wish to make another suggestion, delete this message and type yours.
";


// Customization # 4:
// Between the double-quotation marks, specify the CSS rules 
//    to apply to the suggestion box div. Write the rules 
//    like you would for inline CSS styling.

$CSSforSuggestionBox = "
font-size: 1em; 
border: 1px solid #ccc;
border-radius: .25em;
background-color: #fff;
padding: .15em .35em .15em .35em;
min-height:75px;
width: 100%;
box-sizing: border-box;
";


// Customization # 5:
// Between the double-quotation marks, specify the content 
//    (may be text and/or an entire img tag) for the button. 
//    If your message contains a double-quotation mark, it
//    must be preceded with a backward-slash character. 
//    Example: Submit \"Thoughts\" Now

$ContentForButton = "Submit Suggestion";


// Customization # 6:
// Between the double-quotation marks, specify the CSS rules 
//    to apply to the button. Write the rules like you would 
//    for inline CSS styling.

$CSSforButton = "
font-size: 1em; 
border: 1px solid #333;
border-radius: .5em;
box-shadow: 1px 1px 2px 0px #999;
background-color: #efefef;
padding: .05em;
text-align: center;
width: 100%;
box-sizing: border-box;
margin-top: .5em;
cursor: pointer;
";

/* ** *** ** * END of CUSTOMIZATION AREA * ** *** ** */

if( isset($_POST['suggestion']) and isset($_SERVER['HTTP_ORIGIN']) and preg_match('/\S/',$_POST['suggestion']) )
{
   $url = ( isset($_POST['url']) and strlen($_POST['url']) ) ? "\n\n<{$_POST['url']}>" : '';
   $suggestion = str_replace("\r",'',stripslashes($_POST['suggestion']));
   $suggestion = preg_replace('/<(table|tr|div|li)[^>]*>/si',"\n",$suggestion);
   $suggestion = preg_replace('/<(p|ol|ul)[^>]*>/si',"\n\n",$suggestion);
   $suggestion = preg_replace('/<br[^>]*>/si',"\n",$suggestion);
   $suggestion = preg_replace('/<[^>]*>/si','',$suggestion);
   $suggestion = preg_replace('/&nbsp;/si',' ',$suggestion);
   $suggestion = preg_replace('/&lt;/si','<',$suggestion);
   $suggestion = preg_replace('/&gt;/si','>',$suggestion);
   $suggestion = preg_replace('/\n{3,}/',"\n\n",$suggestion);
   $suggestion = str_replace("\n","\r\n",$suggestion);
   $suggestion = trim($suggestion);
   mail($EmailAddressForSuggestions,$SubjectLineForSuggestionsEmail,"$suggestion$url","From: $EmailAddressForSuggestions");
   exit;
}
header('Content-type: text/javascript');
$Self = $_SERVER['PHP_SELF'];
$Content = <<<CONTENT
<div id="_id_for_confirmation-content-for_Bontrager_Suggestion-box_" style="display:none;">$ThankYouMessageForSuggestionBox</div>
<div id="_id_for_Bontrager_Suggestion-box_" style="$CSSforSuggestionBox" contenteditable="true"></div>
<div style="$CSSforButton" onclick="_Bontrager_SuggestionBox_ProcessSuggestion()">$ContentForButton</div>
CONTENT;
foreach( preg_split('/[\r\n]+/',$Content) as $line )
{
   if( ! preg_match('/\S/',$line) ) { continue; }
   $line = str_replace("\\","\\\\",$line);
   $line = str_replace("'","\\'",$line);
   echo "document.writeln('$line');\n";
}
echo <<<JS
function _Bontrager_SuggestionBox_GetHTTPconnection()
{
   var http;
   try { http = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch (e)
   {
      try { http = new ActiveXObject("Microsoft.XMLHTTP"); }
      catch (e2)
      {
         try { http = new XMLHttpRequest(); }
         catch (e3) { http = false; }
      }
   }
   return http;
}
function _Bontrager_SuggestionBox_ProcessSuggestion()
{
   var idptr = document.getElementById("_id_for_Bontrager_Suggestion-box_");
   var suggestion = idptr.innerHTML;
   if( ! suggestion.match(/\S/) ) { idptr.innerHTML = "Type something before <span style='white-space:nowrap;'>clicking :)</span>"; return; }
   var http = _Bontrager_SuggestionBox_GetHTTPconnection();
   if(! http) { idptr.innerHTML = "Sorry, unable to submit suggestion."; return; }
   var params = Array();
   params.push("suggestion="+encodeURIComponent(suggestion));
   params.push("url="+encodeURIComponent(document.URL));
   http.onreadystatechange = function() { }
   http.open("POST","$Self",true);
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   http.send(params.join("&"));
   idptr.innerHTML = document.getElementById("_id_for_confirmation-content-for_Bontrager_Suggestion-box_").innerHTML;
}
JS;
exit;
?>

Notes:

After the customization section is updated, save the PHP script as SuggestionBox.php or any other PHP file name you prefer.

The customization section is the color blue and the variable names are colored red. Instructions are embedded in the customization section, but I'll provide a brief overview here of each of the 6 places to customize.

1. $EmailAddressForSuggestions — This is the only variable value that must be updated. Specify the email address where the suggestions are to be sent to.

2. $SubjectLineForSuggestionsEmail — This variable holds the subject line to use in the suggestion email.

3. $ThankYouMessageForSuggestionBox — After the user sends a suggestion, what's specified here will replace the user's suggestion for a confirmation message.

4. $CSSforSuggestionBox — The CSS style of the suggestion box is specified here. It is prudent to specify a CSS min-height property with a value large enough for the user to click or tap into the box. Otherwise, the box will be collapsed.

5. $ContentForButton — The submit div "submit button" content is specified here. It can be text and/or an image.

6. $CSSforButton — The CSS style of the submit div "submit button" is specified here.

As noted earlier, save the PHP script as SuggestionBox.php or any other PHP file name you prefer. The installation instructions assume SuggestionBox.php.

Suggestion Box Installation Notes

Installation is composed of two steps.

Step 1: Upload SuggestionBox.php to your server and make a note of it's location.

Step 2: Paste a line of JavaScript where the suggestion box is to be published.

The line of JavaScript code assumes SuggestionBox.php is installed in the document root directory. If the PHP script is installed in a different location or the file is named something other than SuggestionBox.php, then modify the location accordingly.

Here is the line of JavaScript. In case you need to modify it, the PHP script location is colored blue for easy identification.

<script src="/SuggestionBox.php"></script>

How to place the line of JavaScript depends on whether or not yours is a WordPress website.

Non-WordPress Sites:

Paste the line of JavaScript into the page content or navigation area where the suggestion box is to be published.

WordPress Sites — suggestion box within a post or page:

Use the "Text" tab, not the "Visual" tab, when pasting the line of JavaScript into the post or page.

WordPress Sites — suggestion box within a navigation area (as a widget):

Paste the line of JavaScript into a new text widget. See Using the WordPress Text Widget for information about how to do that.

Testing the Suggestion Box

The suggestion box needs to be tested to ensure it works like it should, including receiving the email it sends.

It is highly unlikely that you'll receive any spam other than what might be manually typed or pasted into the suggestion box.

There are no form fields to attract spamming robots. And, because the PHP script has special Ajax-submitted detection built in, only information sent to the script from a web page of the domain where the PHP script is installed will be processed.

Thus, a spam-free suggestion box.

(This article first appeared in Possibilities ezine.)

Will Bontrager