PHP & HTML – easy spam prevention using hidden form fields (sample code)

The easy and fast working method of securing your forms agains spam bots is as easy as a few lines of PHP and HTML code.

Spam bots, at least, most of them, crawl random websites and fill their forms with all kind of ads or unwanted content. There are a lot of alternatives to stop this, Google Captcha, reCaptcha, etc., I used all of this methods, they work pretty well but, sometimes, when you move your site to a new server or domain, you need to spend a lot of time working around this methods to make them work again.

I simply tried a really simple method that I found a few years ago, the method implies using simple PHP and HTML to trick the bot to fill a field that the user doesn’t see(hidden via CSS).

The code is pretty simple…

Here is the HTML…

<form action="sample.php">

<input type="text" name="name" placeholder="Nume" required="">
<input type="text" name="email" placeholder="Email" required="">
<input type="text" name="phone" placeholder="Telefon" required="">

<input type="text" name="city" class="vho" id="send" placeholder="Paris">

<button type="submit">Submit</button>

.vho { display: none }


Here is the PHP…


if(isset($_POST['city']) && !empty($_POST['city'])) {

echo "Hello SPAM Robot!";



if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone'])) {

echo "Hello SPAM Robot 2!";




How to Optimize Your Website And Obtain a Google Page Speed of 98-100?

First, please backup your files before you start modifying anything I write in this post.

Thank You!

First, why you should follow my advice? Well, almost anyone can tell you that a fast website is a good website and a good website is a mobile and desktop 100% compatible website but, as a developer, you need to test your site with Google’s Page Speed tool(…).

Obtaining a good grade there can help your search engine traffic… So, what Google Page Speed score your project gets?

I’ve done a few projects with 98-99 out of 100, and a few with perfect 100.

I will list here a few “secrets” I used to boost my grade from 68/100 to 99/100.

1. Use only inline CSS

You need to use only inline css, period. Don’t link to any external frameworks(Bootstrap, etc.), don’t link to any Google Fonts file, to any particular style…

If you want to be productive, you ca use PHP to include_once(“”); your css files into the interpreted file.

If you want to use fontawesome or Google Fonts, you can put fontawesome file before you close your </body> tag.

You can also modify the Google Fonts .css file and include it inline into your source via PHP. Also, you can remove all the Vietnamese or Greek fonts from the Google Fonts file and use only the Latin style, works with english projects and most of the languages.

2. Insert the .js files at the end of the file

This is no secret that, inserting the .js files before you close </body> tag can get you a good Page Speed grade.

3. Use Server Side compression(gzip)

This is a pretty easy step, I provided instructions here on another post on how to do that.

4. Optimize images

Don’t exaggerate with images, use a low resolution image thumbnail, I use only < 10kb images. Specify the width and height of the image. You can use a free online tool to reduce the size of the images.

5. Minify css, js and html

This step gives anyone a lot of work if you are updating your site constantly… You can use free online tools to minify your css, html and js code.

6. Reduce the Server Response Time

Don’t load your server with requests, use, as much as you can only static content or make Ajax requests to content.

Bonus Point!

Transform your favicon in BASE64 text and include the code via PHP and get rid of a few connections that can slow down your website… I use this tool to convert my favicons:…


Hope this experience helps, try and play with this list and tell me your result.

Take a look at a sample page that I’ve recently made and got a great score:…

Responsive background image in card-header (Bootstrap 4)

UPDATE – since this post got so much heat, I made a simple CSS & HTML only panel with responsive image and card-header, see here.

This is a Bootstrap 4 version of the Responsive Background Image in Panel Heading (Bootstrap). Since they changed the panel class with the card class in Bootstrap 4, you just need to change the old Bootstrap 3 class names… here is my code and demo.

background-image: url(bg.jpg); 
background-size: cover; 
height: 175px; 
-webkit-box-shadow: none; 
box-shadow: none; 
border: 0px; 
border-radius: 0px; 

max-width: 250px; 
margin-top: -160px; 
margin-bottom: 5px; 
border: 3px solid #fff; 
border-radius: 0%; 
 <div class="card">
    <div class="card-header heading-footer"></div>
      <div class="card-block text-center">
         <img class="panel-profile-img rounded-circle" src="portrait.jpg">
         <p class="author-title"><strong>Lorem Ipsum</strong></p>
         <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
         <p>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p>

Here is the live demo.

Responsive background image in panel heading (Bootstrap)

Usually, on my freelance projects I use a beautiful responsive Bootstrap panel to display certain information like photos, offers, contact info, profile info and so on. I find very useful to play with the variables and see particular results depending on your cover image size and text that you need to display in the panel.

The structure is pretty simple, we have a simple Bootstrap style class logic that displays our panel and some custom css that we need to add to modify some settings like removing the standard Bootstrap border and rounded corners.

Here is the CSS:

background-image: url(bg.jpg); 
background-size: cover; 
height: 225px; 
-webkit-box-shadow: none; 
box-shadow: none; 
border: 0px; 
border-radius: 0; 

.panel { -webkit-box-shadow: none; box-shadow: none; border: 0px; }

.panel-profile-img { max-width: 250px; margin-top: -160px; margin-bottom: 5px; border: 3px solid #fff; border-radius: 0%; }
.panel > .panel-body > .author-text { font-size: 12px; color: #333; font-weight: 300; font-family: 'Open Sans', sans-serif; }
.panel > .panel-body > .author-title { font-size: 16px; color: #000; font-weight: 400; font-family: 'Open Sans', sans-serif; padding-top: 12px; }

HTML code:

<div class="container">
<div class="row" style="max-width: 640px;">
  <div class="panel panel-default">
                        <div class="panel-heading heading-2"></div>
                        <div class="panel-body text-center">
                            <img class="panel-profile-img" src="portrait.jpg">
                            <p class="author-title"><strong>Panel Head Text</strong></p>
                            <p class="author-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis tincidunt rutrum. Donec porttitor erat eu justo fermentum, a scelerisque dolor molestie.</p>

I limited the width of the panel to see how it looks, usually, I use 2-3 panels in a row to display certain informations but, in my opinion, this type of panel looks better when is not displayed on a full width style.

Take a look at the results here.

Fixed Navbar that Disappears on Scroll Down (jQuery + Bootstrap)

In this post we will create a fixed navbar that disappears when the user scrolls down and reappears upon scrolling up using Bootstrap and jQuery.

Try it Yourself / Demo

/* - Static Navbar */
.navbar-brand { font-size: 21px; font-weight: bolder; }
.slidd { position: fixed; width: 100%; padding: 0px; margin: 0px; border: 0px; }
.navbar-custom {
	background-color: #0c4d8a !important;
    color: #ffffff;
  	border-radius: 0;
.navbar-custom .navbar-nav > li > a {
  	background-color: #0c4d8a; 

.navbar-nav { background-color: #0c4d8a; font-size: 12.6px; margin-left: 21px; }
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { color: #ffffff; }
.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #1c5c99;
.navbar-custom .navbar-brand { color:#fff; }
.navbar-brand a { color: #fff; }
.navbar-custom .navbar-toggle { background-color:#eeeeee; }
.navbar-custom .icon-bar { background-color:#0c4d8a; }
<nav class="navbar navbar-custom navbar-fixed-top slidd">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button><a class="navbar-brand" href="" rel="home">Logo</a>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Forum</a></li> 
if ( $(window).width() > 769) {   
var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
    newscroll = mywindow.scrollTop();
    if (newscroll > mypos && !up) {
        up = !up;
    } else if(newscroll < mypos && up) {
        up = !up;
    mypos = newscroll;

You can alter the fadeIn() and fadeOut() or change them to other jQuery effect.

Change the background-color and the hover color and so on from the CSS file to fit your project needs and aesthetics.