Send Email Using JavaScript With EmailJS | JavaScript Send Email

Подписаться 7 тыс.

Просмотров 21 тыс.

50% 1

Send Email From HTML Form JavaScript | Send Email Using JavaScript With EmailJS | JavaScript Send Email
Welcome to this channel step-by-step tutorial on how to send emails using JavaScript with EmailJS! In this video, this channel will guide you through the process of integrating EmailJS into your web application, enabling you to send emails effortlessly.
Sending emails programmatically can be a powerful tool for various purposes, such as contact forms, user notifications, and more. With EmailJS, you can simplify the process by leveraging their API, eliminating the need for complex server-side configurations.
Throughout this tutorial, this channel will cover the following topics:
- Setting up an EmailJS account and obtaining necessary credentials
- Creating an HTML form to capture user inputs
- Writing JavaScript code to handle form submission and send emails
- Customizing email templates to match your branding and requirements
🌟 Remember to like, share, and subscribe for more exciting web development tutorials! 🌟
Assets :
- email.min.js = cdn.jsdelivr.net/npm/@emailjs...
- EmailJS = dashboard.emailjs.com/
To set up your Gmail account as a sender using the EmailJS service (dashboard.emailjs.com/), you need to follow these steps:
1. Sign up for an EmailJS account: Visit the EmailJS website and create a new account.
2. Verify your email address: EmailJS will send a verification email to the address you provided during the sign-up process. Open the email and click on the verification link to confirm your email address.
3. Create an Email Service: Once your account is verified, log in to the EmailJS dashboard. Click on "Email Services" and then click on the "Create new" button. Provide a name for your email service and select "Gmail" as the service type.
4. Connect your Gmail account: To connect your Gmail account, click on "Connect with Gmail."
5. Set up email templates: After connecting your Gmail account, you can create email templates that you'll be able to use later. Click on "Email Templates" and then click on "Create new" to start creating your templates.
6. Use the EmailJS API: To integrate EmailJS with your application or website, you'll need to use the EmailJS API.
Contact :
TikTok = / davidgtech
GitHub = github.com/davidgrcias
Instagram = / davidgtech
Music :
1. Luke Bergs & Waesto - Follow The Sun | / bergscloud
Music promoted by www.chosic.com/free-music/all/
Creative Commons CC BY-SA 3.0
creativecommons.org/licenses/...
2. Let Go by Luke Bergs & Waesto | / bergscloud
Music promoted by www.chosic.com/free-music/all/
Creative Commons CC BY-SA 3.0
creativecommons.org/licenses/...
3. Ocean by Luke Bergs | / bergscloud
Music promoted by www.chosic.com/free-music/all/
Creative Commons CC BY-SA 3.0
creativecommons.org/licenses/...
4. Blessed by Luke Bergs | / bergscloud
Music promoted by www.chosic.com/free-music/all/
Creative Commons CC BY-SA 3.0
creativecommons.org/licenses/...
Source Code :
- bit.ly/sendemailjsdavidgtech (PayPal)
- bit.ly/sendemailjsdavidgtechgr (Gumroad)
- bit.ly/sendemailjsttr (Trakteer)
--
Tags :
send email javascript,send email using javascript,javascript send email,javascript how to send email,javascript send email on form submit,send email from html form javascript,how to send email javascript,how to send email using javascript html,send email from javascript,emailjs send email,send email in javascript,html javascript send email,javascript send email gmail,javascript send email from form,send email javascript gmail,send email with javascript,send email javascript,send email using javascript,javascript send email,javascript how to send email,javascript send email on form submit,send email from html form javascript,how to send email javascript,send email using javascript and gmail, send email from html form using javascript and gmail, send email using javascript and smtp, send email from html form using javascript and smtp, send email from,send email using emailjs,emailjs send email tutorial,emailjs tutorial for sending email,javascript email sending with emailjs,how to send email with emailjs,send email using javascript and emailjs,email sending using emailjs in javascript,javascript email sending tutorial with emailjs,send email with emailjs in javascript,email sending using emailjs and javascript,send email in javascript using emailjs,javascript email sending example with emailjs,sending email with emailjs in javascript,emailjs tutorial for sending email with javascript,how to send email using emailjs and javascript,javascript email sending using emailjs library,send email using emailjs in javascript tutorial,javascript email send

Опубликовано:

7 июл 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 69

@ACA1975 11 месяцев назад

Mantul

@Lordalba 7 месяцев назад

dude you are the best!! you kinda saved me it didn't work for me for a while

@DavidGTech 6 месяцев назад

Hey @Lordalba, I'm so glad to hear that the tutorial helped you out! 😊 If you have any more questions or need further clarification on anything, feel free to ask. Happy coding!

@tjioelenawati9824 8 месяцев назад

Good .. Good

@DavidGTech 6 месяцев назад

Thanks

@markjosephortizano5084 8 месяцев назад

sir i follow your step it's working on my test contact form. it helps me a lot to Analize how does it works. my question is how proper put this code on my contact form with professional coding? any clue or suggestion.

@DavidGTech 6 месяцев назад

Hi @markjosephortizano5084, I'm delighted to hear that the tutorial was helpful for your test contact form! Integrating this code into a professional contact form involves a few best practices: - Separation of Concerns: Consider organizing your code with a separation of concerns. Have separate files or sections for HTML, CSS, and JavaScript. This makes your codebase cleaner and more maintainable. - JavaScript External File: Move your JavaScript code into an external file and include it in your HTML using the tag. This keeps your HTML cleaner and promotes code reusability. - Event Listeners: Utilize event listeners to trigger the email sending functionality. For example, you might want to send the email when the user submits the form. - Error Handling: Implement error handling to provide clear feedback to users if something goes wrong during the email sending process.

@25-nguyenminhanh46 18 дней назад

Thank you so much, it really works.

@DavidGTech 2 дня назад

Hi @25-nguyenminhanh46, You're welcome! 😊 I'm glad it helped!

@johngeromego2310 5 месяцев назад

Thanks a lot! it helps me a lot

@DavidGTech 5 месяцев назад

Glad to hear that! You're welcome!!!

@longoquang7861 5 дней назад

Hi I have the problem with UserID. My emailJS dashboard do not have the same option as you it only provide the API public key and not the UserID so when I try to put the API key in the UserID there is an error that UserID cannot be found how can I resovle this

@DavidGTech 2 дня назад

Hi @longoquang7861, Thanks for reaching out! 😊 It sounds like there might have been some changes to the EmailJS dashboard. If you only have the API public key, try using that in place of the UserID. If the issue persists, I recommend checking the EmailJS documentation or contacting their support for the latest updates. I'll look into this as well and update the tutorial if needed. Hope this helps! 👍

@samuel_nicholas 6 месяцев назад

Thanks bro!

@DavidGTech 6 месяцев назад

Any time

@user-dj9no4qq6c 6 месяцев назад

Awesome, Thx a lot! I have 1 more question, If I want to post an image , how can I do that?

@DavidGTech 4 месяца назад

You're very welcome!!! Thank you for your suggestion, I will make a video about that soon!

@nesrineg6496 19 дней назад

thank you veru muck i sepend more than a monthe to make it work until i saw this vedio

@DavidGTech 2 дня назад

Hi @parsifall6746, You're welcome! 😊 Glad you found it helpful!

@keisen7921 Месяц назад

Thanks bro

@DavidGTech Месяц назад

No problem

@LU-qm9qg 7 месяцев назад

works 100% ty

@atanughorai4245 6 месяцев назад

In 0:34 sec how to get this website link? I am unable to find it

@DavidGTech 6 месяцев назад

You're welcome mate!

@DavidGTech 6 месяцев назад

The website link is in this youtube video description

@jorensumagang3533 9 месяцев назад

GOD DAMN GOOD VIDEO BROO

@DavidGTech 6 месяцев назад

Hey @jorensumagang3533, Haha, thanks a million! 😊 I'm thrilled you enjoyed the video! If you ever have more questions or need help with anything, feel free to drop a comment. Happy coding, and stay awesome! 🚀🙌

@idrispamilerin7037 10 месяцев назад

this is a very good one and it works, although does it not send attachments?

@DavidGTech 10 месяцев назад

Glad to hear that it works, thank you. It can send attachments also, but it will lengthen the video time, so I didn't include the tutorial to send attachments

@DavidGTech 10 месяцев назад

But I will do next time to make a video tutorial to send attachments from email

@Dani-yk7mf 9 месяцев назад

Please make a video where you only send the attachment without anything else. I need.

@markjosephortizano5084 9 месяцев назад

Sir how about laravel API Can upload also a video. I'm newbie at developer industry I need to enhance thid skill

@DavidGTech 6 месяцев назад

Hi @markjosephortizano5084, Absolutely! I appreciate your interest in enhancing your skills. Creating a Laravel API is a fantastic next step. I'll definitely consider creating a video on that topic. In the meantime, if you're new to development, I'd recommend getting familiar with the basics of Laravel. The Laravel documentation is an excellent resource, and there are many tutorials available online. To give you a head start, you can explore topics like: - Setting up Laravel and understanding its structure. - Creating routes and controllers. - Working with databases using Eloquent ORM. - Building API endpoints with Laravel's built-in tools. Feel free to let me know if you have specific questions or if there's a particular aspect of Laravel API development you'd like more guidance on. Remember, the journey in the developer industry is about continuous learning. Best of luck, and enjoy the process of enhancing your skills! Happy coding!

@yogeshwarkalpande 2 месяца назад

Can we send email using this method to any one of just to those which account we added to the emailjs

@DavidGTech День назад

Hi @yogeshwarkalpande, You can send emails to any recipient using EmailJS, not just to those whose accounts are added to EmailJS. You just need to configure your EmailJS service correctly. Hope this helps! 😊

@MuhammadFaizanVlogger 2 месяца назад

emailjs plan offer 200 request for every month or just for one time 200 request?

@informationdesk4267 2 месяца назад

Every day

@lifebest4404 10 месяцев назад

Sir php current location get but current location not show another place area show

@DavidGTech 10 месяцев назад

Thank you for your comment! In the video tutorial, the focus is on demonstrating how to send an email using EmailJS, rather than retrieving the current location. If you're specifically interested in getting the current location using PHP, you might find other resources or tutorials that cover that topic specifically. However, feel free to ask any questions related to the email sending process using EmailJS, and I'll be happy to assist you!

@lifebest4404 10 месяцев назад

@@DavidGTech thanks sir

@sota5455 8 месяцев назад

Thank you for the helpful video! I've got one question. How can we protect our credential info such as serviceID, templateID and public key?

@UnrealArman 8 месяцев назад

Are u get anything to secure it!?

@digimori1142 8 месяцев назад

Environment variables and gitgnore the .env file

@DavidGTech 6 месяцев назад

Hi @sota5455 , Thank you for your kind words! I'm glad you found the video helpful. 😊 When it comes to protecting credential information in JavaScript, it's essential to follow best practices to enhance security: - Use Environment Variables: If you're working in a Node.js environment or using tools like Webpack, consider using environment variables to store sensitive information. This helps keep your credentials separate from your codebase. - Server-Side Handling: For particularly sensitive information, consider moving the handling of credentials to the server side. Create an API endpoint on your server that securely interacts with services requiring credentials, and let your client-side JavaScript make requests to that endpoint. - Restrict Access: Ensure that your credentials have the minimum required permissions. For example, if using API keys, only grant the necessary permissions to perform specific actions. - Avoid Hardcoding: Refrain from hardcoding sensitive information directly into your JavaScript files. If someone gains access to your code, hardcoded credentials become vulnerable. - Encryption: If possible, encrypt sensitive information. This adds an extra layer of protection, especially if the data is stored or transmitted. Remember, security is a layered approach. While you can take steps to make it more challenging for unauthorized access, no solution is entirely foolproof. Choose an approach that aligns with the security requirements of your project. If you have more questions or need further clarification, feel free to ask!

@DavidGTech 6 месяцев назад

@digimori1142 correct

@lifebest4404 10 месяцев назад

Sir how send image WhatsApp js use no thirt party api use tutorial

@DavidGTech 10 месяцев назад

Ok coming soon

@bombastic_king8566 4 месяца назад

For some reason it doesnt works for me, but for some reason it doesn't throws me back an error :/ Although im trying to use a module script

@DavidGTech День назад

Hi @bombastic_king8566! If you're using a module script and it's not working, ensure that your HTML file has the type="module" attribute in the script tag. Also, check for any errors in the console that might indicate what’s going wrong. If you need more help, feel free to share more details!

@TechHaven_ 5 дней назад

can someone please post all the code in this comment I tried and its not working with no errors so I thing I misspelled someonething but not sure

@DavidGTech 2 дня назад

Hi @TechHaven_, Thanks for your comment! 😊 It sounds like there might be a small typo causing the issue. Double-check your code for any misspelled variables or function names. Sometimes, even a small error can cause problems. If you're still having trouble, feel free to share the specific part you're stuck on, and I'd be happy to help you troubleshoot it! 👍

@janssena8858 11 месяцев назад

Konten terlaluberkualitas. Izin save awokokokokokokokok

@DavidGTech 10 месяцев назад

Awowowkwwkowo makasih jan

@dohasbi 6 месяцев назад

how to use html templates in message boxes

@DavidGTech 4 месяца назад

Hi @dohasbi, Using HTML templates in message boxes can add a dynamic and visually appealing touch to your email messages. If you're working with EmailJS in JavaScript to send emails, you can include HTML templates in the message body. Here's a basic example to get you started: - Create an HTML Template: Design your HTML template for the message box. You can use HTML tags and inline styles for formatting. For example: Hello {{user}}, Thank you for subscribing to our newsletter. We appreciate your interest! - Use the Template in JavaScript (EmailJS): Incorporate the HTML template into your JavaScript code using EmailJS. Replace the message content with your HTML template. Here's a simplified example: emailjs.send('your_service_id', 'your_template_id', { to: 'recipient@example.com', user: 'John Doe', // This is a dynamic value you can replace with user-specific data }); Ensure that you replace 'your_service_id' and 'your_template_id' with your actual EmailJS service and template IDs.

@ZeyadKarem-jd7md 4 месяца назад

Can you send multi users

@DavidGTech День назад

@ZeyadKarem-jd7md Yes, you can send messages to multiple users using EmailJS. You can customize the recipient email addresses in your JavaScript code to send emails to multiple recipients.

@kjaswanth3552 10 месяцев назад

Bro it was not working

@DavidGTech 10 месяцев назад

Thank you for watching my video and leaving your feedback! I'm sorry to hear that you encountered issues with the code. To better assist you, could you please let me know which specific part of the code or functionality was not working for you? I'd be more than happy to help troubleshoot the problem and find a solution together. Your feedback is valuable, and I want to ensure that everyone has a smooth experience with the tutorial. Looking forward to assisting you further!

@Onthaluvsu 9 месяцев назад

kisses

@DavidGTech 6 месяцев назад

Thank you @Onthaluvsu!!!

@Leonardo-ub2wd 6 месяцев назад

doesn't work...

@DavidGTech 6 месяцев назад

Hi @Leonardo-ub2wd, I'm sorry to hear that you're having trouble. Let's try to figure out what might be going wrong. Can you provide more details about the specific issue you're facing? Are there any error messages you're encountering? Additionally, make sure you've followed each step in the tutorial carefully. If you can share more information, I'll do my best to assist you and get it working. Thanks for reaching out!

@hassanaftah966 3 месяца назад

is js free?@@DavidGTech

@heckyyy4 2 месяца назад

I’m having issues

@jimmysalto1749 2 месяца назад

Doesnt work!!!

@DavidGTech День назад

Hi @jimmysalto1749, Sorry to hear it's not working for you. 😔 Double-check your API keys and the code setup. If you can provide more details about the issue, I'll do my best to help you troubleshoot it. Let me know! 😊