WordPress Theme Development From Scratch - 12. Custom AJAX Form (2020)

Рет қаралды 20,725

Күн бұрын

Build your own custom contact form in WordPress.
There are plenty of plugins for contact forms in WordPress, and sometimes it's easiest to use them. However, you can also create your own custom forms in your WordPress theme (without a plugin).
In this video, we'll learn about how WordPress works with AJAX requests. It is possible to use WordPress' 'ajax-admin.php' endpoint to make AJAX post requests to do many things, include sending a form.
When you make a post request to admin-ajax.php, you need to specify an action in your data so WordPress knows which function to target when the post is made, you can then action what ever you want to do with that post data through a function in functions.php

Пікірлер: 84

@not1vory114 Жыл бұрын

I was watching the part before this one and was looking for how to make custom forms. I just wanted to drop a comment to thank you for covering everything making this amazing series!

@benkilowhiskey 5 ай бұрын

I am so thankful for this tutorial. Hours of scratching my head 🤯and then stumbled across this video. Love the videos and how easy and clear they are to follow, have subscribed! Thank you again! 🥳

@SuperDaveDev 3 жыл бұрын

You sir are a scholar and a gentleman!

@mohamedhouti7390 3 жыл бұрын

you are the best on this topic! bravo!

@theadedheart2307 2 жыл бұрын

THANK YOU!!!! This series is extremely helpful!

@mrdigitalau 2 жыл бұрын

You are very welcome

@lynnora 3 жыл бұрын

The "btn-block" class is depreciated in Bootstrap 5, so if you're using the latest version you need to use "w-100" instead to make the button full width

@mrdigitalau 2 жыл бұрын

Thank you!

@HQTiger 2 жыл бұрын

Very helpful for me. thanks for mentioning this. I was thinking the same about bootstrap version, but was unable to to think about the substitute. In the end, Thanks @Stephanie !!!

@madeiralevadat Жыл бұрын

Thank you for your superb and very helpful videos. Keep up the great work you do.

@tannermann6980 3 жыл бұрын

Thanks for this. It helped me at work a lot.

@ddl21 4 жыл бұрын

Thanks for the video, great work!

@mrdigitalau 4 жыл бұрын

You're welcome!

@tiendungdev 3 жыл бұрын

Better than paid courses, thank you, bro!

@mrdigitalau 2 жыл бұрын

Thank you, you're welcome!

@adolaize Жыл бұрын

Frst thing I did was install Visual Studio... you're right. It's much better! Thanks for the tip!

@cfwalker 4 жыл бұрын

Thank you! This helped me so much!

@mrdigitalau 2 жыл бұрын

You're welcome!

@MuhammadAdnan-gx6rd 4 жыл бұрын

Right for form plugin perfect

@franciscogallardo9499 3 жыл бұрын

For Linux users, I'm using Xampp and Visual Studio Code! nice tutorial

@isaackash2401 2 жыл бұрын

Great tutorial.

@yasinedr 3 жыл бұрын

Thank you !

@zamansiz_egitimler 4 жыл бұрын

Super bro :)

@nissay9661 2 жыл бұрын

Thank you so much for your efforts sir

@mrdigitalau 2 жыл бұрын

It's my pleasure

@ketanguptachidara3126 3 жыл бұрын

It would be much better if you do a series of angular tutorial as well(Hoping) .!!! BTW Thanks a ton for this series .

@HullioGQ 4 жыл бұрын

VS Code ftw! Thanks for the tuts!

@mrdigitalau 4 жыл бұрын

VS code is pretty damn good hey

@CharlyBeam 3 жыл бұрын

Thank you ! This is so cool ! it works fine ! I was wondering how does it behave with multiple users registered as administrator ? In my case my WP has several admin, but the email was only sent to the very first one ever created. Is there a way to have it delivered to all admins ? Thanks again for this amazing tutorials !

@987Stephen1 4 жыл бұрын

"I hope you've learned something today" - I've most certainly learned the value of form plugins. I also try to avoid plugins wherever possible. Do you know if Gravity Forms has much impact on the Wordpress site speed? I mean for typical usage. I imagine they try to do a lot to minimise the size and impact on speed.

@mrdigitalau 2 жыл бұрын

Tell me about it. I think Gravity Forms or WP Forms are probably the 2 best ones. Upgrade to PHP8 and they run blazingly fast.

@hibald8351 3 жыл бұрын

Thanks for much for your efforts ....but i have a question ,i have website which built with wp theme but now they want from me to optimise their site by adding vanilla javascript function to calculate co2 for people and company...So am thinking of make a template htmland javascript to calculate but my problem is how to start and where to but this template because i'd never worked with php.....some help please

@E-techuk 4 жыл бұрын

I added your code for this Ajax form but it doesn’t seem to send the email but had no errors. Any suggestions. My admin email isn’t the same domain extension as the actual site I’m running it on, does that matter

@kumaraswamy6973 4 жыл бұрын

Thank You! its working good when we login in admin panel, But when we logout the admin panel it not working its showing page can’t be found could you please help me out with this issue

@jonathanpirela807 3 жыл бұрын

Hello, i have a question, why i keep getting wp_mail return false, i need to setup or open any ports on my local pc? when im using only php it works, but with wordpress is doesn't, thanks for all this course has been so useful to me.

@davidjackson148 4 жыл бұрын

I'm getting "wp-admin/admin-ajax.php 401 (Unauthorized)". I'm running locally on Windows 10 and I'm a full admin on my computer. Any ideas.

@estevao_music 4 жыл бұрын

Thanks so much for your tutorials! Unfortunately, I am having a little problem with jQuery. The script is being used at the end of form-enquiry.php. But when the page is loaded, it says jQuery is not defined. I looked at the page source and the problem is that jQuery is being imported with wp_footer();, which comes after the form script itself. I thought of putting the form script into a separate .js file and import it in functions.php. But there is PHP code involved in the script, so it needs to be inside a .php file. Can you help me?

@mrdigitalau 4 жыл бұрын

Hey Estevao. Try remove anything you have about enqueing jquery in your functions.php and just put this: wp_enqueue_script('jquery'); It should put it in the header

@vladimirtereshenko5625 4 жыл бұрын

Thank you so much for the great explanation. Is there any part of your course where you explaining how to save this type of form to database using $wpdb; ? As I'm struggling to save the form that you've created to database.

@mrdigitalau 2 жыл бұрын

Hi Vladimir, sorry, no, but I will be doing an updated WordPress course shortly. So please subscribe :)

@roslinerla 4 жыл бұрын

Im having trouble with the email. If the person that sends it has an accent in their name like Fréderic it comes up all weird. Any idea how to fix this?

@ascoul 3 жыл бұрын

if want to send the form data to a webhook at zappier, how can we do it?

@ragingvids1693 2 жыл бұрын

what about the ability to sanitize data before sending to email? Where is the provision? Right before defining new Formdata?

@jimbob7424 2 жыл бұрын

Now I understand why you would much prefer to install a plugin each client to save time. But in a case where a client only needs a simple form sending to the admin email, just copy and pasting this code surely is the way to go?

@willia_music 4 жыл бұрын

I would like to edit my wordpress project seamlessly from laptop to desktop. (both are windows 10). I thought it would be as easy as syncing the whole C:/laragon folder (that should include database, wp content and wp theme) between machines, but i always get errors when trying to open website.test on the 2nd machine. any tips?

@mrdigitalau 4 жыл бұрын

Hi there mate. Probably can't do that. You might want to look into storing your theme on a code repository like GitHub. Maybe that's for another lesson on this series yes? That way you can update code on any PC.

@adolaize Жыл бұрын

I made it this far in your series, but now my site won’t load. It was taking a long time to refresh over the last two videos. It says something about a not having enough space. Any suggestions?

@Darenimo 4 жыл бұрын

So I get Email error when I try to use the form... Not sure how to even start to debug this one since I get no other information in any log xD I'm using LAMP stack instead of the configuration here in the video. Not sure if that could cause the issue.

@brinnnsa 3 жыл бұрын

did u get yours fixed?

@flowertube1047 2 жыл бұрын

@@brinnnsa I have same error, did any one of you get a solution ?

@philip9677 4 жыл бұрын

how do u add validation

@adriano_souza 3 жыл бұрын

Thanks a lot! But in Bootstrap 5 don't use jQuery. How I do that?

@md.rajuahmed6534 2 жыл бұрын

but WordPress using jQuery and he is using the WordPress jQuery I guess

@SeemaNelouferSN 2 жыл бұрын

wp_send_json_success($data); this function isnt recognized for some reason so I am unable to proceed :(

@icreatestuff3610 4 жыл бұрын

Hi, the alert test didn't work for me, do I need to have jquery installed for my theme for it to work?

@endimion84 4 жыл бұрын

alert() is basic javascript function, it doesnt need jquery to work

@endimion84 4 жыл бұрын

if alert() is inside a jquery code (like in this video) then yes you need jquery installed

@icreatestuff3610 4 жыл бұрын

@@endimion84 I was able to get the test alert to finally work like in the video but the next part didn't return the name it returned undefined and I'm sure everything was correct. Thanks for your help

@timshen5250 Жыл бұрын

my code not work, Do you have Github code? so I can compare with my code. Thanks

@MichaelDefo86 Жыл бұрын

have the undefined answer, do you have some code to compare

@mrdigitalau Жыл бұрын

Send me your error I can take a look? Cheees

@MuhammadAdnan-gx6rd 4 жыл бұрын

WP_Nonce security ?

@mrdigitalau 4 жыл бұрын

You are right, I will do a small video and link it here showing how to add it. Cheers

@MuhammadAdnan-gx6rd 4 жыл бұрын

Hmm ok waiting

@yasinelabe5730 4 жыл бұрын

wp_mail function is returning false and i don't whats wrong ! help

@yasinelabe5730 4 жыл бұрын

do i need any extra configuration on my local xamp! or to SMTP server

@mrdigitalau 4 жыл бұрын

Hi Yasin - Put your code on here for us to see?

@yasinelabe5730 4 жыл бұрын

@@mrdigitalau GET IN TOUCH Send Reset (function($){ $("#enquiry").submit(function(event){ event.preventDefault(); var endpoint = ""; var form = $("#enquiry").serialize(); var formdata = new FormData; formdata.append('action','enquiry'); formdata.append('enquiry',form); $.ajax(endpoint,{ type:'POST', data: formdata, processData: false, contentType: false, success: function(res){ console.log(res.data) }, error: function(res){ console.log(res.data) } }) }) })(jQuery) add_action('wp_ajax_enquiry','enquiry_form'); add_action('wp_ajax_nopriv_enquiry','enquiry_form'); function enquiry_form(){ $formdata = []; wp_parse_str($_POST['enquiry'],$formdata); // get the admin email $admin_email = get_option('admin_email'); //email header $headers[] = 'Content-Type: text/html; charset=UTF-8'; $headers[] = 'From:' . $admin_email; $headers[] = 'Reply-To: Mywebsite

@norabenlaski7260 4 жыл бұрын

same question here! did you work it out?

@elfatnianass3005 4 жыл бұрын

@yasin elabe Do you fixe this Error ?