Responsive Contact Form with Captcha using Jquery and PHP

 

Email has become the most popular Internet service today. Almost all websites have the section where their users/clients can contact them with ease without the need to log into their various email accounts or to avoid the issues of logging into an email account always to send a mail.

If you can observe, you will notice that majority of these websites that have the option of sending or receiving email messages via their website did their coding using the regular PHP mail() function that does not use a well configured SMTP Server for messaging.

A lot of emails are sent and delivered each day, most are treated as spam messages while others are treated as genuine messages at the receiving end. 

The most important part of an email sent is to see that the message arrives safely at the receiving end.

However, messages sent via the regular PHP mail() function are treated mostly as spam messages after so many messages have been sent via this regular PHP mail() function on a particular server because the regular PHP mail() function does not use a well configured SMTP Server.

Nowadays, Email-Clients and Servers perform massive checks on the email sending server, like Reverse-DNS-Lookups, Graylisting and whatevs. All this tests will fail with the regular php mail() function. If you are using a dynamic IP address, the situation will even worse.

The goal of this tutorial/script is to introduce a secure means through which the users of your websites can easily contact you via an SMTP server using Jquery and PHP without the need to log into an email account to send a message.

A situation where your website users/clients happen to contact you via your website contact page and the messages sent are placed in the Spam Box is not what you want and moreover, not all users bother to check their spam boxes.

This application brings an end to this kind of situation as illustrated above. This application now gives you the assurance that all genuine messages sent or received will go straight to your Inbox and no longer the Spam box.

Messages sent via SMTP server will always arrive at the receiving end as long as you specify valid information in the configuration file for the application.

The system is also responsive to screen which means that it can be used on any device and also, it can easily be added to any application by simply adjusting the width of the class with the name: ".vasplus_programming_blog_wrapper" which is already set to width:30%;/50%; in the CSS file that comes with the application.

How it Works

When a user or client sends you a message via the contact form, you will receive the message sent in your email box while the user or client who sent the message will receive a notification acknowledging or telling him or her that the message sent has been received he or she would be contacted depending on the nature of his or her message as soon as possible. 

Its a nice contact form with acknowledgement message sent to the user, client or customer to let them know that their messages have been received while the real message is received by the admin of the website concerned.

To use this application, you need to specify few details in the config file which comes with the application and such information are as follows:

(1) Outgoing (SMTP) mail server or an SMTP Address: Example; smtp.your-server-name.com, mail.your-server-name.com or an IP Address depending on what your server uses

(2) Your SMTP Port Number: Example; 25

(3) Your SMTP Username or an email address created via your hosting control panel: Example; admin@vasplus.info

(4) Your SMTP Password which is the password of the email address you may have specified as your SMTP Username or email address.

(5) Your website name which will be used by the script.

(6) Your website URL which will be the URL of the area on your server where the contact form is placed.

To add this application to your existing website, you only need to specify the above information in the config file that comes with the system and copy the CSS link at the head and body section of the index file to your existing website page and you are done