Webflow

How to use Spara with Webflow.

Many companies customers build and maintain their marketing websites using Webflow. Installing and managing Spara in Webflow is well-supported.

Installing Spara in Webflow

Refer to specific Installing Spara Navigator instructions for more context.

Step 1: Navigate to your Webflow site's General Settings > Custom Code page.

Step 2: Paste your Spara JavaScript snippet into the "Head code" text input.

Step 3: Publish your website.

Redirecting to Spara from a Webflow form

Unfortunately Webflow does not provide a no-code mechanism way to dynamically append query parameters to a form redirect on submission. But this is easily solved by inserting a custom Javascript snippet into the head of any webpage with a Webflow-powered form.

This code assumes your Webflow forms have:

• Email, First Name, and Company Name fields

• The form name is "Marketing-Form"

Make sure to modify this code with your own form name and fields.

<script>
document.addEventListener("DOMContentLoaded", function() {
  $(document).ajaxComplete(function( event, xhr, settings ) {
    if(settings.url.includes("https://webflow.com/api/v1/form/")){
      const isSuccessful = xhr.status === 200;
      // This is the name of the form in Webflow. Give it a more meaningful name and then change here as well.
      const formName = "Marketing-Form";
      const isRightForm = settings.data.includes(formName.replaceAll(' ', '+'));
      if(isRightForm && isSuccessful){
        const email = $('#Email-7').val();
        const firstName = $('#First-Name-4').val();
        const companyName = $('#Company-Name-4').val();
	    window.location = '/chat?lead_email=' + email + '&lead_first_name=' + firstName + '&lead_company_name=' + companyName;
	  } else if(!isRightForm) {
        console.log('Not the form we want. Do nothing.');
      }
    }
  })
});
<script>