Without protecting contact forms from bots you’ll likely get bazillions of spam messages, which is so annoying! But the current best way to protect forms is with Google ReCaptcha, and that has some undesirable design implications. It’s important to include a recaptcha block in your design for contact forms.
Oh the wonderful world of spam contact form submissions! You open your emails and see a new form submission from your website waiting for you. Oh the excitement! A new lead – a hot new lead – a potential client reaching out to you – work and cash money – woohoo! And then you open the mail and you see the spammy nature of it and your heart sinks. Alas, it’s not a potential new project and rent money, but instead another email from Stan Smith selling you medical grade masks at wholesale price or Alexa Brent promising a 10000000% return on investment and guaranteed first page of Google with their miraculously effective SEO services trusted by top fortune 500 companies.
Ugh, the disappointment.
The dashed hopes! The excitement turned to dismay. But it’s not just the bummer of these spammy form submissions that’s bad. Sometimes they contain dodgy AF links and you know some of your clients are not really tech savvy and they’re gonsta click those links. But bots designed to spam contact forms are not always programmed to simply throw some advertising spam at you. Sometimes they’re looking for ways to exploit your site and add some naughty code into your site to break it, and sometimes they’re trying to exploit your email list too.
It’s hella shady and annoying! So what’s there to do?
There's a not-so-secret weapon to fight spam bots.
Google reCAPTCHA is designed to prevent bots from being able to complete and submit your forms. Yay! It’s a no-brainer to use them on all your forms on your website right? But for us aesthetically inclined types it poses a major design problem. It looks kinda ugly and doesn’t flow with the look and feel of a site. There are two options to chose from: a little like tag looking thing that sticks to the side of the page and moves with you or a block on the form above the submit button. It’s also possible to make some minor styling edits to the block like changing the background colour to make it stand out less and flow better with the overall design.
Think about the reCAPTCHA block when designing.
It’s important for you as a designer to consider that way you’d like the reCAPTHCA block to look on the site your designing. Whether you’d prefer the tag along the edge or an embedded block above the submit button. And what colour you’d like the background, border or text to be. If you don’t include this in your design then I’ll add in what I think is best, but it’s often really nice to be able to present your client with a design that includes this reCAPTCHA block so the final site matches the initial design mockup. It also shows your client that you’ve considered this aspect of the site which just makes you look that much more pro.
So all forms on a site need their own reCAPTCHA?
Yes, every form on the site needs its own reCAPTCHA added. That means contact forms embedded at the bottom of portfolio pages or addition forms on about pages or whatever! Such a mission on sites that have a lot of forms (like mine). So on my site I’ve just added reCAPTCHA to the form on the contact page and left the rest unprotected. I know, I know – it’s not the best thing to do, but since I added the protection it has made a huge difference to the number of spam submissions I get. HUGE!
Yay protected forms!
So be sure to think about including reCAPTHCA blocks in your site designs,!to make sure they look as good as they can and flow well with your design. Here’s to less spam, less wasted time and less disappointment and dashed hopes!