Contact Form Web Application Tutorial Ajax HTML5 PHP
HTML-код
- Опубликовано: 16 авг 2024
- In this exercise we will demonstrate how to build a modern all-purpose website contact form that uses new HTML5 features, Ajax and PHP. Everything happens without reloading the page or navigating to another document to parse the data. You can put this form to work on any website that processes PHP, and you can modify it for other purposes.
![Chuckyy - Devil Hours [Official Music Video]](http://i.ytimg.com/vi/f3wZGj0VnZU/mqdefault.jpg)
Fantastic as usual. Followed you for years down here in NZ. Your videos are like unwrapping a present at Christmas, can't wait to see what goodies are inside.
many thanks.
i wait notification about :
MVC tutorials BY Adam Khoury
:)
Thanks for investing your time in this vids men, regards from Venezuela!
I know this tutorial is over 2 years old now but I have just used it on my website, it works as it should.
Thank you very much.
Subscribed.
Thanks for this tutorial.
This looks like it will be more convenient than sending the viewer to a separate page.
I will be doing this for my future websites.
very nice tutorial, and thanks for share, nice to have u back
Finally a simple and to the point tutorial. I fucking love you! Liked and Subscribed
I can't thank you enough.....I've learned more from you than Anything out there.
Glad you find it useful. Thanks for the feedback.
The dude is back! Thanks for all the good work Adam
Yay, you're back!!!! Awesome as always Adam, keep up the good work ✌🏻️
Thank you sir. It's good to be back in action.
Thanks a lot. Was scared of dealing with backend languages but thanks to you now i see a whole new world of possibilities!
Thank you, really nice. As for Wordpress users or others that experience the "Please wait..."-issue - it is because your parser.php cannot be found. If you are using wordpress you'll need to include it in for example your functions.php. I found this out using the inspector, use to see where the errors occur and why.
Brilliant tutorial! I'm a beginner coder and your tutorials are such a huge help: informative, clear and to the point. Thank you!
Well done. Very simple and explained perfectly. It's important to note for people having problems it's paramount that the .php file be referenced exactly the same in your javascript because once the user submits the form the target is that file, the rest is effortless.
Keep it up man! I have learned a lot from your tutorials
Thanks
Nice to see you back
You are an UNBELIEVABLE teacher! Thank you for this video!
I am curious how I take this and "connect" it to my Google or Mailgun SMTP?
I needed a refresh.
Been missing your tutorials and humor AK, can't wait till your back.
Your the best teacher!
Research the terms Cross-site Scripting (XSS) and Cross-Site Request Forgeries (CSRF) attacks in a search engine to find numerous methods to defend your forms against spam and automated attacks from malicious third party servers.
Love your content, Adam. Thanks a ton.
Thanks for the example and mostly for the code, I was really spinning around with the serialize of php which didn't worked for me in hours. Just downloaded and customized your code and its all working fine. Thanks!
... it's working for me, great job, and thanks for saving me lots of time in having to write the code, thanks again!
Hi Adam, I was browsing your site and noticed there wasn't any content about web security. I would like to express my interest in this field and request some practical tutorials about it. For example, XSS, XSRF, and anything using Ajax that might compromise a database.
Thanks.
great video once again thank you very much
The best tutorial I've seen on this topic. Subscribed.
you have great tutorial man i just like your tuts thank you for sharing your knowledge
Hi Adam the problem is you make it look so simple. Thanks for the tutorial
Thanks Adam, much appreciated!
If anyone else interested in adding a honeypot to this, here below are some slight additions/amendments made. This worked for me in terms of the form not sending. I have been scratching my head to add a 'false' success message, but failed so far...!
In form, add this line:
If you're human, leave this empty:
In script, add this:
formdata.append( "hon-url", _("hon-url").value );
In css, hide the line in the form:
.antispam {display: none;}
In php, add this:
if( isset($_POST['n']) && isset($_POST['e']) && isset($_POST['m']) && isset($_POST['hon-url']) && $_POST['hon-url'] == ' ' ) {....here goes the rest.....}
hey guy, can you provide me the full code?
Sweet.....Adam!!
very nice video Thanks bro
Wow you're a good teacher!
Love your tutorials! Thank you :D
Thanks and no problem.
thank you, it was very helpful, already up and running, i only added a subject placeholder. Only problem i have to sort is the language, in portuguese we have "ç" and "ã" and come all wrong. Great job, keep it coming and thank you for sharing
im so dissapointed i did everything u said and it does not work??? uploaded it to the server it says thanx for sending an email but it doesnt send an email?
Thank you so much! Everything worked great, except the "please wait" message and nothing is arriving in email.
This is Really Good Stuff Adam..
saludos amigo! gracias por tus tutoriales, me ayudan mucho! thanks for your help friend!
Hi Mr Adam Khoury.. and how you doin mahn??!?
I had to pause the video!! fucking love your work!! love how real you are about coding and programming, ive been watching your vids and you make me feel like ive been programming for years already.. you know when to elaborate what is a built in function of php and what is not built in, love that, doesnt leave me guessing what needs to be instantiated or not.. Keep up the awesome work! and May The Almighty bless you and those you love and care for in this world and the world after.aameen.
My php script is a little bit more complicated than yours Adam, but I always couldn't do the response message when people have sent the message and also, the HTML email. Thanks
That's exactly what I was looking for.
I guess it's kinda randomly asking but do anyone know a good site to stream newly released movies online ?
@Vincent Thiago Try flixzone. Just google for it :)
@Vincent Thiago I use flixzone. You can find it by googling :)
sir Adam I've only confirming that the message was sent but their is no message at my inbox(the recipient) ..please help
Thank you very much sir. That was awesome!
Great tutorial. Exactly what I wanted/needed. Thanks, mate. Keep up the good work.
Thanks alot, I was looking for this!
Thanks for the feedback Lars.
I was wondering if you could make a lesson that inserts data to the database with ajax of course. Let's say for example a comment system.
Check out his "Social Media' series, he has all that in there with AJAx
thanks Adam !
Not working, It just says Please Wait...... And never sends and i have a domain email
Righty'o Ill go check it out
ёмко и содержательно. спасибо, чувак! =)
Great tutorial, however, I am having a bit of an issue. When I upload and run the contact script, the form stays on the page, the page will refresh and send me back to the top and it appends all the data I entered to the end of the domain name in the address bar above. Any thoughts sir?
Just to update, im getting this Error now:
[19-Nov-2016 15:55:39] PHP Warning: PHP Startup: Unable to load dynamic library '/usr/php/54/usr/lib64/php/modules/imagick.so' - /usr/php/54/usr/lib64/php/modules/imagick.so: undefined symbol: zend_new_interned_string in Unknown on line 0
Same problem here
very good well done
Hey Adam, This form works perfectly, except for the receiving part. Whenever I sumbit,
the email is sended to my spam folder, how can i let it go into the regular inbox folder?
Kind regards
Maybe because your email checking application's spam filtering settings are high and you only allow trusted white-listed entities land in the inbox. You could try changing the $from variable to use an email address tied to your hosting account that is sending the email, instead of the user's $e variable. I am not sure really.
You should have added a else in the isset of the parser, to tell the user that ons of the fields is empty if they are using a browser that does not understand the required inputs (like iOS' safari). But nice script!
Thanks for share Adam
Mine just says please wait... and it stops there it does not redirect me to " your message has been sent" any tips?
Nice...
Still works in 2017. Thanks for this!
Nah, I followed the video exactly and it worked. The issue could be your with your host possibly?
yes it works on mine.....you need to use it on real server....maybe on local host it will not work for some reason....which is understandable....
Do you know how to configure XAMPP so that I don't get this error? ...
Warning: mail(): Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in C:\xampp\htdocs\1ContactFormWebApplicationAjaxHtml5Php\example_parser.php on line 13
The server failed to send the message. Please try again later.
I have the same error
great video thank you! is there a video out there the shows how to add spam filters to one of these contact forms?
Hi Adam, my email is not sending and form says please wait but nothing happens. any ideas? thanks.
Great tutorial! Could you make a sequel to this one teaching folks how to protect this wonderful form from spam (like recaptcha)?
Just what i was looking for - thank you so much
Doesn't work. I copied your html, JavaScript, and php code exactly form your developphp page and put the codes in their respective pages. The php page was named exactly as yours.
I entered the information into he fields properly and hit submit. all that happened was that the php code was displayed directly under the form.
learn how to debug man. look in the developer console if you've javascript errors.
great video... i have a question : why did you use iso as an unicode why did you not use utf-8
that was very easy. and you did good putting your code for us to copy. great
www.developphp.com/video/JavaScript/Contact-Form-Web-Application-Tutorial-Ajax-HTML5-PHP
Man it works perfect! THX a lot
Thank you for this simple tutorial. I've been trying to do this for almost a year and I was finally able to do it because of you. I'm a fan now. Question, is this form safe from hackers? I've seen other tutorials in which they add a "human" component in which they have to answer a simple question in order for the form to be accepted. If not, is this hard to do?
thankyou for the tutorial sir
Thank you, i may now optimize my website.
Firstly, your videos are very helpful. Thank you very much. Could you please tell, if we can call multiple jquery/javascript functions onsubmit event?
OR
Maybe you can execute those other functions from inside of the submitForm() function.
osm .. you are great .but how you learn this hard Java Script ?
Thanks for the reply. I was watching your videos relating OOP lately. I was wondering if you could please make a series of basic OOP related videos. Or if I have missed them, would you please tell me where to find them? Once again, thank you very much for the tutorials. They're very helpful.
i love u boss thank you sir u help me a lot thanksss
Great!!!
Thanks for the video man!
Really appreciate it!!!
Need form submitted message on screen of form which is whole reason for using ajax. I have a form using jquery validate, and jquery holds submit button until validation passes. Then with submit free it posts to php and php opens new window to display sent message. I want to have this message on the same page as the form.
I quadrupled check my code and its identical to yours except for the form fields and it is not working. For some weird reason it is acting as it's method is "GET" (showing the information on the browsers address bar). I made sure it was "POST" but nothing.
Do you have any idea what could be wrong?
This works wonderfully!
Hi Adam, Thanks for your excellent tutorial, which I used to create a nice contact form. I have a question: Would it be possible to use PHP's output buffer with a callback function to collect form data instead of using AJAX? Thanks in advance for any thoughts...
-- Peter
Hello, how does this send the email?
How does this work, can you explain this?
Browser discrepancies
Okay, I get the success message in safari "thanks (name) your message has been sent", but in chrome or firefox, I just stays on "please wait". I do get the email on all browsers though.
How do I fix this?
I have a few radio buttons and phone number section added in code. If I wanted to display the number I would have to add in my php section.
Thanks a lot for valuable tutorial.
Hey there Adam thanks for this tutorial but, when i upload the form to my site, and fill it out the page just refreshes. and no email set out
Do we need a sql and php to get the data saved and see who is what?
Thank you so much for this video. I visited your website where i have seen some social icons on the left side of your page . if Possible then please make a video for making that
my message no show in email, only information has been sent.... , why sir... please help ..thank so much
Hey I'm getting an error message in the console saying submitForm is not defined even though I got the same code to work for another website I'm working on. Any ideas why it would work for one site but not the other? I also tried copying and pasting the sample code and I still get the same message.
Hello Sir
I am beginner of website design and developing process through youtube specially ur all content even HTML video control. I was completed all design with HTML&CSS&JS, as well as login and sing up page with PHP& Mysql database as u providing to video. But could find out how to connect both PHP script and index.html main file together in hostgator hosting service mysql database.
Thank You
awesome man thank you so much
dude, I LOVE YOU!!!!! YOUr form works on my site beautifully......maybe you can add subject too to the form? I mean when you get the email the subject should be in the title of the email {from}
I JUST TRY BUT I GOT :- Warning: mail(): Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in C:\xampp\htdocs\CONTACT_FORM\example_parser.php on line 34
The server failed to send the message. Please try again later.
same problem
Thank you, that was really helpful
It was working fine for me. Thank you for that. But then... it quit working and stalls with "Please wait..." Any ideas?
When I try to include the security.php file, I get a HTML 500 error, and if I don't include it, submitting the form (if everything is filled in) doesn't work. Any ideas?
Can you make a video on how to make a website where you can make a admin account where you can upload, title and add a description and allow people to make user accounts to comment and like ? If so that would be awesome
not working.....it says "please wait" after submit it and then nothing happend.
me too, did you end up getting it to work?
i didnt, try:
formspree.io/
Me too then I checked the and found that because I changed the name example_parser.php to something but hadn't changed the reference in the script. Bang.
Thank you very much for Code :
sir i know only html and css can i go for this tutorial?????
plase uploaded the html5 and css3 tutorial so that its very easy to getting php and javascript
Works perfect! Thanks!
are you just copy code in website link www.developphp.com/video/JavaScript/Contact-Form-Web-Application-Tutorial-Ajax-HTML5-PHP why for my not work... please help thank you
it say mail sent .but i do not receive any mail from this .i just changed the email address in php file and then i upload it on my domain .what else should i do .plz help
Kindly let me know how did you fix it.
This was a great tutorial. I have yet to really follow up with PHP, but this was simple enough. I'll use your site references to work on the security. Other than that, everything works great. Could this work with PHPMailer?
t not working.here is my mail suikya001@gmail.com
i mean if you can send your complete codes
so I use javascript to process data then send data that has been inputted via ajax to php and php processes data from javascript to send email?
When you finish the form, and when you enter the information and click Send writes me please wait and so to write and nothing happens , I do not know what to do , please help!
please helpppppppppppppppppppppppppppppp
Dear Adam,
I uploaded your files almost as is, on the website. The only change I made was to my email address. After clicking on "Submit", the message thanked my name, but I did not receive the email at all. I have checked my spam mail as well. Please advise, if possible.
Stephen.