Convenient Spam-Free Contact Form

Feedback is one way I improve my work. I like feedback. Therefore, I want to make it as convenient as possible for people to talk to me.

Therefore, when a project required a contact form that was easy to install and easy for site visitors to use, it was a pleasant one to fulfill. No annoying CAPTCHA was used. Yet, it has really, really good spam protection.

The easy to use part: When the "contact" link is clicked, the contact form appears right on that page. When it's submitted, the form is replaced with the confirmation message. The person never has to open another page.

The easy to install part: There is no form processing software to install. Instead, Spam-Free Form is used.

Since its launch 4 years ago, most of those who sign up for Spam-Free Form and put the form on their site also continue to use the service. We use it on our own sites (see the Willmaster contact form). During all that time, no automated spam has been reported.

There can be personal spam, where a person types their spam into the form. But even those can be reduced by blocking manually pasted-in spam messages (larger messages than there were keystrokes, by your specified trigger ratio).

Of course, spam-free forms can be put on websites anywhere that forms can be published. This article focuses on centering the form over the content of a web page.

How to install it: Create an account at SpamFreeForm.com (Free) and create a form for your domain — pretty much any type of form you want except multi-page and file uploads. Obtain the line of JavaScript that will pull the form into your web pages. (The form can be changed at any time without changing the JavaScript on your website.)

When a site user taps the "contact" link, the form will appear centered on the screen.

The form is centered with CSS position:absolute, so it must be small enough to fit within the screen. The form is responsive to width, but the height of the form will depend on the form you create at SpamFreeForm.com.

How to Install the Form

To complete this, you will need the line of JavaScript to pull in your form. The JavaScript is obtained from Spam-Free Form (Free).

Note that forms for your domain can not be used at any other domains. The form can be pulled in elsewhere, but it can't be submitted.

Before you get started, tap this link for a live example form. The form appears centered on this page.

Now, let's get started. Put the code in the following text box near the bottom of your web page. Immediately above the </body> tag is good. Notes follow.

<div id="floating-contact-form"
   style="display:none; position:fixed; top:0; left:0; right:0;">
<div 
   style="position:relative; width:100%; max-width:250px; 
      margin:0 auto; background-color:white; 
      border:1px solid transparent; border-radius:.75em; box-shadow:0px 0px 9px 3px #999; 
      padding:1em 1em 2em 1em;">

<script src="https://spamfreeform.com/sff/sff_info.php?id=38560531/willmaster.com/ArticleLiveExample" type="text/javascript"></script>

<div style="position:absolute; right:2px; top:2px;">
   <a href="javascript:OpenCloseFloatingContactForm()">
   <img src="https://www.willmaster.com/images/closeboxXbold25.png" style="max-width:25px;" alt="close button">
   </a>
</div>
<div style="position:absolute; left:0px; right:0px; bottom:-3px; text-align:center;">
   <a href="javascript:OpenCloseFloatingContactForm()">
   <img src="https://www.willmaster.com/images/dismiss_100w.png" style="max-width:75px;" alt="dismiss button">
   </a>
</div>

</div><!-- style="position:relative;...-->
</div><!-- id="floating-contact-form" -->

<script>
function OpenCloseFloatingContactForm()
{
   var d = document.getElementById("floating-contact-form");
   if(d.style.display=="block") { d.style.display="none"; }
   else
   {
      var viewportH = Math.max( (self.innerHeight?self.innerHeight:0), (document.documentElement.clientHeight?document.documentElement.clientHeight:0) );
      d.style.display="block";
      var divH = d.clientHeight;
      if( viewportH>0 && divH>0 ) d.style.top = parseInt((viewportH-divH)/2) + "px";
   }
}
</script>

Notes —

Much of the code in the above box is copy and paste.

There is one place that must be changed (the JavaScript for pulling in your form). Others are optional, but I do request that you use your own "close" images instead of pulling them from the willmaster.com site.

Here are places in the code that you might want to change, including the must item:

• The div that holds the form has an id floating-contact-form. If that is changed, the corresponding floating-contact-form in the JavaScript must also be changed.

• The max-width:250px of the second div may be changed. The div and form is width-responsive so it is possible to make the maximum width much wider and let its width shrink if needed.

• The background color at background-color:white may be changed. A color should be specified so the content under the form does not show through.

• The JavaScript must be replaced with the JavaScript obtained from Spam-Free Form. Replace the red line with your assigned JavaScript.

  <script src="https://spamfreeform.com/sff/sff_info.php?id=38560531/willmaster.com/ArticleLiveExample" type="text/javascript"></script>
  

• The X-in-a-disk "close" image at the top-right of the contact form box

  https://www.willmaster.com/images/closeboxXbold25.png
  

  should be replaced with your own image. Also the "dismiss" image at the bottom of the box should be replaced.

  https://www.willmaster.com/images/dismiss_100w.png
  

 
That's it for the on-request contact form code. All that's left is the link to reveal the form.

Here is the link.

<a href="javascript:OpenCloseFloatingContactForm()">Contact</a>

Place the link at one or more places on your web page. Tapping it will reveal the form. You may replace the linked Contact with different text or with an image.

You now know how to place a link to a contact (or other) spam-free form on a page that pops up the form.

It is convenient for the user; they never need to leave the page. It is also convenient for you; no need to install any form handling software.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager