Create contact forms with PHP, JavaScript and CSS
4.3 (17 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
67 students enrolled

Create contact forms with PHP, JavaScript and CSS

Learn how to build multiple fully functional contact forms and start getting users feedback.
4.3 (17 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
67 students enrolled
Created by Nevyan Neykov
Last updated 5/2020
English
English [Auto-generated]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • 2 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand how to build and embed into their website a custom made contact form.
  • To see how easy is to create contact from scratch.
  • Gain skills to apply contact form to their website.
  • Build multi-step form
  • Add conditional fields to existing form
Course content
Expand 16 lectures 01:20:55
+ Contact Form
16 lectures 01:20:54

We will take a look at what you will be creating during the course.

Preview 01:31

Here is how to set up your working environment using: Apache, PHP, MySql and phpmyadmin.You could then easily try the examples from the lectures.

Preview 07:32

We will use Ubuntu to set up NginX web server, PHP, MySQL and PhpMyadmin.

Initial setup for Linux
13:22

We will structure the initial files and construct the Form with its specific form fields. We will start with using editor Sublime text to create our .php and .css. Then we will link those files and run them in a browser.

Preview 08:11

We will add code to process the information received from the contact form. We will use php's $_POST array to access the submitted information and will redisplay our form filled with information.

Note: If you would like to test on the php embedded web server, just go to your scripts directory and run: php -S 127.0.0.1:8000

How to process form and retain submitted data
08:19

Server validation is needed because users could find a way to submit our data bypassing the HTML5 and JavaScript checks. In this lecture we will process and validate the user submitted data with php. We will move function validate() into separate file and will check for empty submitted fields as well as for valid email address. Next we use php functions to escape the user input so if someone submits HTML code through our form, it would not get displayed.

Server validation
06:35

Guys I would be glad if you could send your feedback ! It is important to me.

Feedback
00:25

We will make improvements to our code in order to become more readable and easy to maintain. We will continue exploring and extending our validate() function by removing some of the variables used, adding additional error and success messages and replacing the multiple functional return statements.

Code cleanup
03:15

We will protect the form from several attacks using token and empty fields. Token protection is to ensure protection against scenario, where we visit an attacker website, specially designed to make request and submit our form, without our knowledge. This type of an attack is also known as cross-site-request-forgery. Empty field technique will stop bots from auto submitting the form.

note: For php version < 7 please use openssl_random_pseudo_bytes() function instead of random_bytes().

Form security
05:15

We will save the data from the form to a text file. Each new data will get appended to the file. This way we can later open the file to see users feedback.

Save submitted data to file
03:58

We will add easy client-side validation using HTML5 validation attributes. Validation will be added supporting empty fields, fields of a required legtht as well as basic email check.

HTML5 validation
02:05

We will add validation support for older browser with the help of JavaScript. We will do checks by examining each of the fields, then display errors directly to the form, without the need of server validation.

JavaScript validation
08:10

This lecture will show you how to prepare and insert the data into mysql table. We will protect our table from storing inappropriate character input.

Save form data in a database - establish connection
07:22

In this lecture you'll learn how to create mysql database and table. You will also learn how to connect to mysql server with the php language.

Save form data in a database - prepare and insert data
04:10

You can practice your skills using the source files. Just extract them to an executable folder of your web-server and open them in browser.

If you need the user submitted form information emailed, you can use the following code:
$msg=json_encode($post, JSON_PRETTY_PRINT);
mail("admin_email@email.com","Received form data",$msg);

Course materials
00:11

Here are discount coupons to my other courses

BONUS: Discounts to my other courses
00:33
Requirements
  • You should have access to your website files, and being able to edit them.
  • basic HTML skills
Description

During this course you will learn how to build and add to your website multiple fully functional contact forms, using PHP, CSS and JavaScript. The forms are suitable for getting users feedback, enhancing the user experience with success and error messages.

What students say:

Bill Burns
This course does assume some prior knowledge of PHP type programming, with the limited knowledge I have thus far, I find I can follow quite easily as well as learn new techniques. Instructor appears to be very knowledgeable about subject.

Dennis Ferraro
Although I could clearly see my lack of skill in php and css I was able to understand enough to execute the new information, given the platforms. The course delivered what it said it would.

Timothy Dykes
The course was to-the-point without a bunch of rambling on about irrelevant and unrelated things. It was easy to follow along with the creation of the form from start to finish in all of the languages necessary (except the styles, maybe). The finished form is also available as a .zip so that you can explore the source code yourself if there is something you had trouble following in the video.

Following the lectures will let you practice step by step the development process. During the course you will understand how to set your page, create an HTML form, stylize it with CSS and later process it with PHP and JavaScript. In the course you will find practical lecture on adding additional protection against Spam bot submission attacks. You will also gain solid understanding on the whole development process.

At first, we will overview on what you will be creating during the course, then will structure the initial files and start building the form. Next we add our PHP code to process the information received from the contact form and validate the submitted data with the help of both PHP and JavaScript. We will conclude by adding various protection methods against unwanted Spam bots.

Update 2020: Completely updated and rewritten JavaScript form validation!

Please enjoy the course !

Who this course is for:
  • Students who want to place contact form into their website with the help of PHP language.
  • Students who want to learn how to create contact forms.