Working Contact Form With JavaScript | Send Email From Contact Form Using JavaScript With EmailJS
HTML-код
- Опубликовано: 29 июл 2023
- Working Contact Form With JavaScript | Send/Get Email From Contact Form Using JavaScript With EmailJS | JavaScript Email Contact Form | Form Send Email JavaScript | ASMR Programming
Assets :
- email.min.js = cdn.jsdelivr.net/npm/@emailjs...
- EmailJS = dashboard.emailjs.com/
To set up your Gmail account as a email receiver 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
Source Code :
- bit.ly/wcontactformdavidgtech (Gumroad)
🌟 Remember to like, share, and subscribe for more exciting web development tutorials! 🌟
Music :
1. Late at Night by Sakura Girl | / sakuragirl_official
Music promoted by www.chosic.com/free-music/all/
Creative Commons CC BY 3.0
creativecommons.org/licenses/...
2. Faithful Mission by Artificial.Music | / artificial-music
Music promoted by www.chosic.com/free-music/all/
Creative Commons CC BY 3.0
creativecommons.org/licenses/...
3. Water Wood & Stone by Audionautix | audionautix.com/
Music promoted by www.chosic.com/free-music/all/
Creative Commons Attribution 4.0 International (CC BY 4.0)
creativecommons.org/licenses/...
4. Crescent Moon by Purrple Cat | purrplecat.com/
Music promoted by www.chosic.com/free-music/all/
Creative Commons CC BY-SA 3.0
creativecommons.org/licenses/...
--
Tags :
how to receive emails from contact,complete contact form html,send emails from html contact form,formspree,how to create contact us page in html and css,how to make contact form,formspree contact form,send email from html form javascript,formsubmit,working contact form html,contact form,formsubmit,send emails with contact from,contact form html,contact form html css,html form to mail,formsubmit tutorial,formspree,web development,dev portfolio tutorial,prersonal portfolio tutorial,recaptcha in html form,software engineering,software developer,coding tutorial,learn to code,contact form tutorial,working contact form,coding for beginners,submit form,how to create a php contact form,how to create a php contact form tutorial,working contact form php,how to create a contact form,how to make a contact form,php contact form,contact form,html contact form,php form,create a php contact form,php mail,send email using phpmailer,how to make working html php contact form,how to create a contact form in html and css,how to make contact form,contact form using javascript,contact form data on email,contact form enquiry on email,javascript contact form,contact form on website,make working contact form,receive contact form data,store contact form data,web design,web development,html form,html css contact form,technology,computer engineering,email contact form,contact form email,working contact form,working contact form javascript,contact form html css javascript,contact form,functional contact form,contact form data on email,javascript contact form,contact form send email,contact form using javascript,contact form enquiry on email,receive contact form data,store contact form data,create working contact form,working contact form html,contact form send email javascript,send email from contact form,working contact form with javascript | send email from contact form using javascript with emailjs,email contact form,contact form email,working contact form,working contact form javascript,contact form html css javascript,contact form,functional contact form,contact form data on email,javascript contact form,contact form send email,contact form using javascript,contact form enquiry on email,receive contact form data,store contact form data,create working contact form,working contact form html,contact form send email javascript,send email from contact form
Did you enjoy watching this video? Share your feedback in the comments!
Good video2nya
Excelent video solved my problem, thank you!!!
You're very welcome!!
Tyvm my friend.
Very welcome!!!
can you leave the service id and template id in your code without it being too much of a security risk or is there any way of hiding it without losing functionality
Hi @vy3per386,
Great question! While it's generally not recommended to expose sensitive information like service IDs and template IDs directly in your client-side code due to security concerns, there are more secure ways to handle this.
Instead of embedding such sensitive information in your frontend code, you can use a server-side solution to manage these credentials. Set up a server (e.g., Node.js with Express, PHP, etc.) to handle the interaction with your email service, and use environment variables or a configuration file on the server to store the sensitive information.
Here's a high-level overview:
- Server-side Code: Create a server-side script to handle the email sending process. This script will contain your service ID and template ID. Ensure that this server-side script is secure and accessible only to authorized users.
- API Call: From your client-side JavaScript, make an AJAX or fetch call to your server-side script, passing any necessary data (e.g., user input). The server-side script then handles the email sending logic, including using the service ID and template ID.
This way, you keep sensitive information hidden on the server, reducing the risk of exposing it to potential attackers. Always remember to validate and sanitize user input on the server to prevent security vulnerabilities.
If you need further assistance or a more detailed example, feel free to ask!
Can i send in the email a JSON file with all the data or can i just send the String ?
Absolutely! You can send data to your server either as a JSON file or as a string. It depends on your preference and how your server is set up to handle the data.
If you choose to send it as a JSON file, make sure to set the appropriate content type in the headers of your HTTP request. On the other hand, if you prefer to send it as a string, you can encode your data as a JSON string and include it in the request payload.
In the context of a contact form with JavaScript, it's common to send form data as a JSON object. Just ensure that your server-side code is configured to parse incoming JSON data correctly.
Feel free to ask if you have any more questions or need further clarification!
How can i get the source code ?
I tried to follow your instructions for building the system, but unfortunately, I receive an email, but the messages inside have not been delivered. Could you please help me?
Hi @christinejoydiolata24,
I'm sorry to hear that you're facing issues with the email messages not being delivered. Let's troubleshoot this together. Here are a few steps to help pinpoint the problem:
- Check Spam Folder:
Ensure that the email isn't landing in the recipient's spam or junk folder. Sometimes, legitimate emails can be misclassified.
- Email Configuration:
Double-check your email configuration in your server-side code. Make sure you have the correct SMTP settings, including the host, port, username, and password.
- Error Handling:
Implement error handling in your server-side code to capture any errors that might occur during the email sending process. This will provide more insight into what might be going wrong.
- Console Logs:
Add console logs or debug statements in your JavaScript code to see if the client-side is successfully triggering the email sending process.
- SMTP Provider Restrictions:
If you're using an external SMTP provider, make sure there are no restrictions or issues on their end.
If the issue persists, feel free to share relevant snippets of your code (especially the email sending part) so that I can take a closer look and provide more specific guidance. Let me know if you encounter any error messages or if there's anything else you've observed during the process.
Looking forward to helping you get this sorted out!
I think. Tutorial better than this.The reason is most of people want to learn like this stuff.instead of music you might use explanation for this.Explain each tag article elements ..... short explain why you use this or that what is the function of that and..... I RESPECT YOU:
Thank you for taking the time to share your thoughts and feedback! I truly appreciate your input and respect your perspective.
You make a valid point about catering to different learning styles, and I understand that some viewers prefer a more detailed explanation with explanations of each tag and element used. I'll definitely keep that in mind for future tutorials.
In this particular video, I aimed to provide a concise and focused demonstration of creating a working contact form with JavaScript. However, I understand that a more in-depth tutorial with a thorough explanation of each step and tag used could be valuable for some learners.
I'll strive to create a variety of content to cater to different preferences, including more detailed tutorials with explanations. Your feedback helps me understand the needs of my audience better, and I want to ensure that everyone can learn and benefit from my videos.
Once again, thank you for sharing your thoughts, and I hope you'll continue to find value in my future videos. If you have any specific topics or concepts you'd like to see covered in detail, please feel free to suggest them, and I'll be more than happy to consider them for future tutorials.
Bang kok gw waktu pencet kirim pesan ,ga muncul notifikasi kalo pesannya dah ke kirim
Halo @abbyhafizh4038, coba cek lagi yah kodingannya, karena kalau kodingannya benar pasti bisa ke kirim, thanks
break a leg next project.
Thank you so much for your kind words and support!
Why do I even have an error? Even though I have checked up to 3x, huft
Hello Bambang, I totally understand how frustrating it can be when encountering errors, even after double-checking everything. Don't worry; we've all been there! Let's try to figure this out together.
Firstly, I appreciate your effort in checking multiple times; it shows your dedication to resolving the issue. Error messages can be tricky, but I'm confident we can find a solution.
To help you better, could you please provide more details about the error you're facing? Any specific error message or any part of the code that seems to be causing the issue would be useful.
In the meantime, here are a few general troubleshooting tips you can try:
- Ensure all your JavaScript code is error-free and there are no typos or missing brackets.
- Check if all the variables and functions are correctly named and used throughout the script.
- Verify that your HTML elements are correctly connected to the JavaScript code, particularly the form elements in this case.
The error occurs when I send a message but doesn't appear and doesn't enter Gmail, maybe you want to provide a solution? But if maybe there is something wrong I'm sorry because I'm still a beginner😇🙏
@@05.bambangaryabimapamungka35 By the way, are you Indonesian or Malaysian?
Im a Indonesian
Wkwkwk gw juga orang Indo bro, ngomong pake bahasa aja wkwk, pantes dari namanya kek orang Indonesia ini
It wont send email :/
Please provide more specific details or code snippets, and I'll do my best to assist you further.
this is not giving us full details
Hi @xyzshoaib3759! If the tutorial is not providing full details, please let me know which specific part you need more information on, and I'll do my best to provide a more detailed explanation.
plz give the source code without payment
Please email me, I'll give you the free source code
Your mail?
Give me
davidgarciasaragih7@gmail.com
Done!
Please give me source code for free without payment, Thank you
Contact my gmail then
Give me source code for free
@Krushildetroja
Hello! Unfortunately, I can't provide the source code for free as it's part of a paid course/tutorial. However, I can guide you on how to build a similar contact form using JavaScript with EmailJS. Would you like me to assist you with that?