Cache + Contact Form

Hi,

I’m using Kirby’s built-in email function for my site’s contact form. However, when I enable caching the form breaks. Hitting the submit button refreshes the page and brings up the original form, rather than a success or error message. I would just disable caching for the contact page, but the form actually lives on each page, brought up via lightbox.

Any suggestions for making caching and the PHP contact form play nice together?

You could try to add your contact form page to the ignore-list, have a look here: http://getkirby.com/docs/advanced/caching#ignoring-pages

From the post:

“I would just disable caching for the contact page, but the form actually lives on each page, brought up via lightbox.”

Damn, didn’t get the most important information… sorry.

I know it would be a JavaScript-only solution, but could you submit the contact form over AJAX to avoid the cache? (And make sure that the form’s action URL has been ignore-listed)

With jQuery, it would look like:

jQuery(function($) {
  $("form").on("submit", function(e) {
    e.preventDefault();
    
    var formData = $(this).serialize();
    $.post( $(this).attr("action"), formData )
       .done(function(data) {
         //successful submit
       })
       .fail(function(err) {
         //ajax failed to submit
       })
  })
});
1 Like

@plaidpowered

Hey, in theory this works for me. I’ll play around with it some.

Thanks for the advice!

Okay, first off, thanks so much for giving me a place to start. This sent me down the rabbit hole of implementing a bunch of js-related improvements to the form which I had been meaning to get to — namely client-side validation and ajaxing in the success/failure message.

However, it still breaks when caching is enabled. The success message gets ajaxed in, but the email is not sent. I’m sure I’m missing something blatantly obvious. Any ideas?

Is the form action / email script returning the success message, or does it just always fire the a coded success message on .done() ?

If it’s the former, my guess is there’s a problem with the code sending out the email. If it’s the latter, it’s possible your script is still being cached. I haven’t messed much with the Kirby cache (yet), so that might be past my knowledge-level.

The Chrome Network Inspector (or the equivalent in Firefox) is usually invaluable when debugging stuff like this for me. If you open up the network tab in developer tools, you can see every request made, including the headers sent, and exactly what was returned.

@plaidpowered Okay, my knowledge is really limited here so please bear with me, and thanks again for your advice and your time.

In a previous comment you said to make sure the form’s action URL has been ignore-listed. I’m realizing now that the URL is not changing at all upon submission of the form, because of “e.preventDefault()” at the beginning of the function that fires when the form is submitted. But even if I remove that line of code and the page loads the action URL — “/status:go” in this case — the form data is still not being submitted.

The information in the network inspector is basically Greek to me, but the headers for status:go with the cache enabled and disabled, and it looks the same in both cases: