I have integrated Formspree (https://formspree.io/) to redirect form submissions to my email on a static website. Additionally, I am utilizing Toastr (http://codeseven.github.io/toastr/) to display a notification upon clicking the 'Submit' button.
However, I am facing an issue where both Formspree and Toastr do not work simultaneously. When I try to implement them together, none of the features function as expected.
Here is a snippet of the code:
<form action="http://formspree.io/emailhere" method="POST">
<div>
<div class="row">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="email" name="_replyto" id="email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row 200%">
<div class="12u">
<ul class="actions"> //Pressing submit redirects to a 'thank you' page
<li> <input name="submit" type="submit" value="Send" id="submit"/> </li>
<li> <input type="reset" value="Clear Form" class="alt" /> </li>
</ul>
</div>
</div>
</div>
</form>
Upon further investigation, it seems that implementing JavaScript for the toast notification disrupts the functionality of the submit button entirely.
$(document).on('click', '#submit', function(evt){
evt.preventDefault();
toastr.success('Thanks for the email, will be in touch promptly.');
});
Your assistance is much appreciated.
Edit: The HTML code allows for choosing a redirect page after submitting the form:
<input type="hidden" name="_next" value="//site.io/thanks.html" />
I aim to keep the form from redirecting anywhere while ensuring the JavaScript notification function operates smoothly.