1
00:00:00,330 --> 00:00:04,360
Now we'll need to go ahead and make some changes to our contact form.

2
00:00:04,530 --> 00:00:17,960
So scroll down and we're gonna remove this block of text here.

3
00:00:17,970 --> 00:00:30,740
We also want to remove the phone number input and label or just delete this block of code here.

4
00:00:30,830 --> 00:00:39,920
We need to add an I.D. and name attribute to each field so I'll start with the name field

5
00:00:42,990 --> 00:00:43,990
and then the email address

6
00:00:55,360 --> 00:01:03,720
is will let the user typing a little bit more text into the message area 100 character Max and you can

7
00:01:03,720 --> 00:01:06,870
increase or decrease that depending on your needs.

8
00:01:07,170 --> 00:01:15,060
I just need to add the I.D. contact to the submit button and there's a hidden input here we don't need

9
00:01:15,060 --> 00:01:25,900
this we just delete it.

10
00:01:26,040 --> 00:01:37,510
Now add the div that will contain our error messages so our error messages will be displayed right above

11
00:01:37,510 --> 00:01:41,510
the name label as you can see here

12
00:01:45,670 --> 00:01:52,450
and the I.D. for that div is add underscore error to consistent with what we've been using for the other

13
00:01:52,450 --> 00:01:53,730
pages as well.

14
00:01:53,740 --> 00:02:02,740
Next we'll need to move the J query dot J yes include into our head tag because we want to load the

15
00:02:02,740 --> 00:02:08,270
library immediately.

16
00:02:08,680 --> 00:02:17,530
Now we need to create our javascript code to transmit that data to our p p script and display any success

17
00:02:17,590 --> 00:02:25,890
or error messages and remember that this is done using javascript with Ajax integration so I'm just

18
00:02:25,890 --> 00:02:33,310
going to paste the script in and remember that this is available to you in your Downloads folder so

19
00:02:33,310 --> 00:02:35,070
you don't have to type out the entire thing

20
00:02:38,930 --> 00:02:45,690
I'll just go through the script we first start with an on click event on the Submit button with the

21
00:02:45,690 --> 00:02:53,580
I.D. contact once the buttons clicked we store the values of the three inputs f name email and message

22
00:02:54,190 --> 00:03:02,790
the data is transmitted to our HP page called Send message got P HP we'll create this file in the next

23
00:03:02,790 --> 00:03:08,260
lesson so we haven't made that yet and a lot of this should look familiar.

24
00:03:08,380 --> 00:03:16,150
We worked with this script a couple of times now and below are our success and error codes.

25
00:03:16,150 --> 00:03:24,940
So if our PDP script outputs the word true we're gonna display a message sent alert and then everything

26
00:03:24,940 --> 00:03:26,220
else is an error code.

27
00:03:26,230 --> 00:03:32,800
So for example f name long would mean that the first name has exceeded 50 characters which is not allowed

28
00:03:33,130 --> 00:03:41,000
f name short would mean that the first name has not exceeded two characters and then we have email long

29
00:03:41,060 --> 00:03:47,170
email short which is the same thing but for the email address e format again.

30
00:03:47,960 --> 00:03:52,860
So the E format is going to check if the email address is in the correct format.

31
00:03:52,880 --> 00:03:58,430
If not it's going to output the error code e format and then we have message long and message short

32
00:03:58,460 --> 00:04:06,960
which checks to make sure that the message doesn't exceed 50 characters but it must exceed 2 characters

33
00:04:07,190 --> 00:04:11,050
and then we have just a generic if any other error occurs.

34
00:04:11,100 --> 00:04:14,350
We're going to put error processing request message.

35
00:04:14,460 --> 00:04:15,460
Please try again.

36
00:04:15,570 --> 00:04:17,130
And so that's the entire script.

37
00:04:17,130 --> 00:04:18,420
It's pretty straightforward.

38
00:04:18,420 --> 00:04:25,050
Again we've done that a few times now and so in the next lesson we'll go ahead and create our HP script

39
00:04:26,500 --> 00:04:32,310
that'll take care of validation and submitting this ultimately to an email address.