Web Tips & Trics

How to Develop a custom PHP ajax contact form without plugin!

September 6, 2018|

Are you new to web development? Hi5! Me too. I’ve just learned an amazing trick today which is, making a standard contact form outstanding! You can always proceed with regular HTML, PHP but if you want to make it even nicer, you gotta use AJAX to submit the data to PHP without having to reload the page. Let me share it with you. Before I start, lemme give you a brief idea of the procedure. We will use AJAX to submit form data and jQuery to simplify the JavaScript code. A PHP mail script will be there to send our form data via email. Step 1 – Creating an HTML form You need an HTML form to collect data from the user. Go ahead and do it. It’s better to name all the functions and variables after me. Let’s give your <form> element class name contact__form , set method attribute to post, and remember the…    read more 

How to add Google reCAPTCHA to Bootstrap contact form

September 6, 2018|

So, you have a website with a contact form, did you do anything to protect it from spams and abuses? If the answer is “no”, then look no further, we have a solution for you. If you don’t know how to create a contact form (without having to reload the page) check out this article (because we will be showing how to add reCAPTCHA to this form). Again, we’ll be expecting that you already have a contact form. Why Google reCAPTCHA You might want to use a regular self-hosted CAPTCHA system, but it’s better to use Google reCAPTCHA in many ways, why? Because it provides state of the art protection from spam & abuse. It’s very easy to use, your users won’t feel irritated and it will save your site from spammers at the same time. The Step by Step guideline: Registering for Google reCAPTCHA Adding reCAPTCHA JavaScript API to HTML Adding…    read more 

How to develop a custom CSS3 preloader animation for your website

September 6, 2018|

Your website may take a little more time to load all the contents regardless of how lightweight or fast your pages are. There are other contributors to this factor like your site visitors’ poor internet connection. Having a complete blank webpage on screen while waiting for the website to load is a boring experience for the visitors. This is where the CSS preloader comes into play. With many pages on your site, you might be thinking what to do to add a preloader. Hakuna matata. Today, we will tell you how you can do this in the quickest possible way. How to add CSS3 preloader to your site Adding a CSS preloader to your website is pretty simple. It is just about a few lines of code. Even a non coder can do this just by copying and pasting these codes. Let’s see how it is done. (Your desired preloader…    read more