Hello, fellow HUGOers. I’ve been building a site based on the Agency theme. For a while, the Contact form worked. At some point I broke it, but I’m not sure how or when.
The contact form is powered by formspree.io. When someone enters their data and presses the submit button, I do get the email. The trouble is, the button remains in the currently-being-clicked state, and the success/fail messages do not appear. I think the problem is with the javascript, but event listeners are pure witchcraft as far as I can tell.
I have not added additional javascript to the template (save for the debugging tester line noted below), nor have I, to my knowledge renamed the button or the success/fail divs.
The relevant custom JS from the theme is:
// Async contact form
$(‘form[id=contactForm]’).submit(function(){
alert(“You clicked the button!”);
$.post($(this).attr(‘action’), $(this).serialize(), function(res){
$(‘form[id=contactForm] #success’).hide();
$(‘form[id=contactForm] #error’).hide();
if (res.code == “200”)
$(‘form[id=contactForm] #success’).show();
}).fail(function(){
$(‘form[id=contactForm] #success’).hide();
$(‘form[id=contactForm] #error’).hide();
$(‘form[id=contactForm] #error’).show();
});
return false;
});
I added the alert("Your clicked the button!") to the top myself. When the button is clicked, that alert does not appear, which leads me to believe the problem has something to do with the button not triggering that bit of code to run…
The portion of the HTML the function should be interfacing with is:
<div class="text-success" id="success" style="display:none;">
Thank you...
</div>
<div class="text-danger" id="error" style="display:none;">
Message could not be sent...
</div><br />
<button type="submit" value="Submit" class="btn btn-xl">Send message</button>
If it matters or helps, the site is live at www.exilisconsulting.com .
Thank you all for any assistance you can provide.
