Geek Answers Handbook

How to send an email using Mandrill using JavaScript?

I followed this tutorial on sending email using JavaScript using Mandrill, but I get this error in the console: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mandrillapp.com/api/1.0/messages/send.json. This can be fixed by moving the resource to the same domain or enabling CORS. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mandrillapp.com/api/1.0/messages/send.json. This can be fixed by moving the resource to the same domain or enabling CORS.

Here is my code:

 $('#submitEmail').click(function() { $.ajax({ type: "POST", url: "https://mandrillapp.com/api/1.0/messages/send.json", data: { 'key': 'my_api_key', 'message': { 'from_email': ' test@hotmail.com ', 'to': [{ 'email': ' test@gmail.com ', 'name': 'RECIPIENT NAME (OPTIONAL)', 'type': 'to' }], 'autotext': 'true', 'subject': 'test', 'html': 'test' } } }).done(function(response) { console.log(response); }); });

What am I doing wrong?

+5
source share
3 answers

Instead of making a POST request, you should include the Mandrill API in the <script> in the <head> :

 <script type="text/javascript" src="path_to_locally_stored_copy_of_mandrill_API"></script>

Then you can access it in your JS file:

 var m = new mandrill.Mandrill('your_api_key'); // This will be public function sendTheMail(){ m.messages.send({ "message": { "from_email": "your_email_address", "from_name": "your_name", "to":[{"email": "someone's_email_address", "name": "someone's_name"}], // Array of recipients "subject": "optional_subject_line", "text": "Text to be sent in the body" // Alternatively, use the "html" key to send HTML emails rather than plaintext } }); }

However, note that this will open your API to the public , as it will be accessible from the client side using dev tools. This could open up phishing vulnerabilities and someone could abuse your key.

I will also review the full Mandrill documents for send .

+4
source

Cool, here is a solution using jQuery to submit the form. :)

I tried to create a contact form on my website using jquery + mandrill. I did not find the answer above is useful (no offense, brother). So I hope my answer can clarify this. I got some help from my good friend and developer Thomas Lane @ d00by.

Please see my form below. And below my javascript form.

  • Create form
  • Use ajax to submit form
  • return false
  • Call function when sending.

To use the mandrill, you need an API key.

 <form id="contact-form" method="POST" action="" onsubmit="return submitContactForm();" class="margin-top" role="form"> <div class="row"> <div class="form-group"> <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i> <input id="form_name" type="text" name="name" class="form-control" placeholder="Full Name" required="required" data-error="Firstname is required."> </div> </div> <div class="row"> <div class="form-group"> <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i> <input id="form_email" type="text" name="name" class="form-control" placeholder="Email" required="required" data-error="E-mail is required."> </div> </div> <div class="row"> <div class="form-group"> <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i> <input id="form_phone" type="text" name="name" class="form-control" placeholder="Phone" required="required" data-error="Phone Number is required."> </div> </div> <div class="row"> <div class="form-group"> <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i> <textarea id="form_message" name="message" class="form-control" placeholder="Message" rows="2" required="required" data-error="Please,leave us a message."></textarea> </div> </div> <button class="btn btn-primary text-center submit" type="submit">Send</button> </form> function submitContactForm() { /*var name = $('#form_name').val(); var email = $('#form_email').val(); var phone = $('#form_phone').val(); var message =$('#form_message').val();*/ //this is the html template. You can also do it as used above. But is much simpler done as below var htmlMessage = 'Contact form<br/>' + 'Name: '+$('#form_name').val()+'<br/>'+ 'EMail: '+$('#form_email').val()+'<br/>'+ 'Message<br/>'+ $('#form_message').val(); //submit the form using ajax $.ajax({ type: "POST", url: "https://mandrillapp.com/api/1.0/messages/send.json", data: { "key": 'Your API key here', "message": { "from_email": 'your email', "to": [ { "email": 'form email', "name": 'name', "type": 'to' } ], "subject": 'Subject', "html": htmlMessage } } }); return false; }
+4
source

You cannot access the Mandrill API from a browser - this is for security reasons. See how your API key will be available to any visitor to your site?

You want to make an AJAX request to your server, and then call the Mandrill API from your internal code.

0
source

More articles:


All Articles