Now we'll need to go ahead and make some changes to our contact form.
So scroll down and we're gonna remove this block of text here.
We also want to remove the phone number input and label or just delete this block of code here.
We need to add an I.D. and name attribute to each field so I'll start with the name field
and then the email address
is will let the user typing a little bit more text into the message area 100 character Max and you can
increase or decrease that depending on your needs.
I just need to add the I.D. contact to the submit button and there's a hidden input here we don't need
this we just delete it.
Now add the div that will contain our error messages so our error messages will be displayed right above
the name label as you can see here
and the I.D. for that div is add underscore error to consistent with what we've been using for the other
pages as well.
Next we'll need to move the J query dot J yes include into our head tag because we want to load the
library immediately.
Now we need to create our javascript code to transmit that data to our p p script and display any success
or error messages and remember that this is done using javascript with Ajax integration so I'm just
going to paste the script in and remember that this is available to you in your Downloads folder so
you don't have to type out the entire thing
I'll just go through the script we first start with an on click event on the Submit button with the
I.D. contact once the buttons clicked we store the values of the three inputs f name email and message
the data is transmitted to our HP page called Send message got P HP we'll create this file in the next
lesson so we haven't made that yet and a lot of this should look familiar.
We worked with this script a couple of times now and below are our success and error codes.
So if our PDP script outputs the word true we're gonna display a message sent alert and then everything
else is an error code.
So for example f name long would mean that the first name has exceeded 50 characters which is not allowed
f name short would mean that the first name has not exceeded two characters and then we have email long
email short which is the same thing but for the email address e format again.
So the E format is going to check if the email address is in the correct format.
If not it's going to output the error code e format and then we have message long and message short
which checks to make sure that the message doesn't exceed 50 characters but it must exceed 2 characters
and then we have just a generic if any other error occurs.
We're going to put error processing request message.
Please try again.
And so that's the entire script.
It's pretty straightforward.
Again we've done that a few times now and so in the next lesson we'll go ahead and create our HP script
that'll take care of validation and submitting this ultimately to an email address.