Using Statamic HTML Caching with a dynamic Raven form. Put the form on a separate page and pull it in via JS.

form.html

<!--
  A template for raven stuff.
  
  Display this at a URL like /contact-form for example
  Exclude this URL from html_caching
  
  Make this form look/act like it was part of the parent page.
  The contents of #raven will be injected into it.
-->

<div id="raven">

  {{ if {raven:success} }}
	  ...
  {{ /if }}

  {{ if {raven:has_errors} }}
    ...
  {{ /if  }}

  {{ raven:form }}
    ...
  {{ /raven:form }}
  
</div>

form.js

// When the DOM is ready
$(function(){
  
  // Cache the element
  var formDiv = $('#contact-form');
  
  // Set the URL the form lives on
  var ravenURL = '/contact-form';
  
  // Perform an ajax request to the form page
  var req = $.ajax({
    url: ravenURL
  });
  
  // When the request is done...
  req.done(function(data){
    // Get the contents of the #raven div
    var ravenHtml = $(data).find('#raven').html();
    // and put it inside the #contact-form div 
    formDiv.html(ravenHtml);
  });
  
  // Hijack the form submission
  formDiv.on('submit', 'form', function(e){
    var form = $(this);
    // Don't submit the form
    e.preventDefault();
    // Submit it via ajax instead
    var req = $.ajax({
      url: ravenURL,
      data: form.serialize()
    });
    // When the request is done...
    req.done(function(data){
      // Get the contents of the #raven div
      var ravenHtml = $(data).find('#raven').html();
      // and put it inside the #contact-form div 
      formDiv.html(ravenHtml);
    });
  });
  
});

html_caching.yaml

enable: true
exclude: contact-form

parent.html

<!--
  The template where you want the form to be injected to.
  For example, a contact page.
  
  You *should* cache this page.
  
  The form will be injected into the #contact-form div with
  JavaScript, but without JS there will be a link to the
  form template anyway.
-->

<h1>Contact</h1>

<div id="contact-form">
  <a href="/contact-form">Send us a message using our form.</a>
</div>

<!-- Scripts should be placed in the appropriate place. -->
<script src="jquery.js"></script>
<script src="form.js"></script>

Hi Jason, I want to use Raven on pages that are affected by the HTML Caching feature, so I've tried your suggested JS solution...

I can't seem to get it to work. Could that be because Raven forms only work with the Post method, but the $.ajax({url: ravenURL, data: form.serialize() }); call in your example is using the GET method to submit the form data to another page quarantined from HTML Caching and holding the form?

Changing the ajax call to

var req = $.ajax({
      url: ravenURL,
      data: form.serialize(),
      type: 'POST'
});

Seems to do the trick.