发表新帖
发表新帖

How to send an email with Mandrill using JavaScript?

后端 未结
关注
3 598
夕颜
夕颜 2021-01-02 21:15

I have followed this guide on how to send an email using JavaScript with Mandrill, but am receiving this error in my console: Cross-Origin Request Blocked: The Same Or

相关标签:
3条回答
  • 终归单人心
    2021-01-02 21:57

    Cool, here's a solution using Jquery to send the form. :)

    I was attempting to make a contact form on my website using jquery + mandrill. I did not find the above answer helpful (no offense bro) So i'm hoping that my answer can clear this up. I got some help from my good friend & Developer Thomas Lane @d00by.

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

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

    In order to use mandrill you will 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;
}
    0 讨论(0)
  • 梦如初夏
    2021-01-02 22:00

    You cannot access the Mandrill API from a browser - this is by design, for security reasons. See how your API Key will be exposed to anyone visiting your website?

    You'll want to make an AJAX request to your server, and then call the Mandrill API from your backend application code.

    0 讨论(0)
  • 故里飘歌
    2021-01-02 22:12

    Rather than making a POST request, you should include the Mandrill API in a <script> tag in your <head>:

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

    You can then 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 expose your API to the public, as it will be accessible from the client side using dev tools. This can open you up to phishing vulnerabilities and someone could abuse your key.

    I'd also take a look at the full Mandrill docs for send.

    0 讨论(0)
 看不清?
提交回复
热议问题