Custom Thank You Page

Easily extend your Slapforms with a custom 'Thank You' page to provide a better user experience.

What is the 'Thank You' page

When your users submit a form using Slapform, the default behavior will be to redirect them to a page hosted on our website letting them know the submission was received.

You can of course change this!

Use the name attribute called slap_redirect to change the submission URL to any webpage!

Without any further modification, this should do just fine for most cases. However, you can use the API to make some informed decisions about the response, as we will append some useful data to the redirect URL via a query string.

Redirect and AJAX

AJAX doesn't natively redirect responses from the server, so you will not be able to use slap_redirect with an AJAX submission, although you can easily create your own redirect by setting window.location.href after the response is received.

Uisng Response Data in your Custom Thank You Page

As mentioned above, the URL you supply to slap_redirect will have the response appended in a query string. Let's look at a simple example form.

    
      <form method="POST"
        action="https://api.slapform.com/[email protected]?slap_redirect=https://yourwebsite.com">
        <input type="text" name="name">
        <textarea type="text" name="message"></textarea>
        <button type="submit">Submit</button>
      </form>
    
  

As you can see, the slap_redirect name trigger is set to https://yourwebsite.com.

This means that instead of sending users to the default Slapform submission page, they will be sent to https://yourwebsite.com. The data appended to the custom redirect would look something like this:

    
      https://yourwebsite.com?meta=%7B%22status%22%3A%22fail%22%2C%22errors%22%3A%5B%7B%22code%22%3A%221020%22%2C%22type%22%3A%22Error%22%2C%22msg%22%3A%22You%20cannot%20use%20the%20email%20your%40email.com%2C%20please%20use%20a%20different%20email.%22%7D%5D%2C%22referrer%22%3A%22http%3A%2F%2F127.0.0.1%3A4000%2F%22%2C%22payment%22%3Afalse%7D&triggers=%7B%22slap_debug%22%3Afalse%7D
    
  

Does that look a little scary? Not to worry! It's simply a few URL encoded JSON objects appended at the end! Here's what that same query string looks like after being decoded and parsed to JSON.

    
      {
      	"meta": {
      		"status": "fail",
      		"errors": [{
      			"code": "1020",
      			"type": "Error",
      			"msg": "You cannot use the email [email protected], please use a different email."
      		}],
      		"referrer": "http://127.0.0.1:4000/",
      		"payment": "none"
      	},
      	"data": {},
      	"triggers": {
      		"slap_debug": false
      	}
      }
    
  

You can easily parse responses using the Slapform library like so:

    
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slapform/index.js"></script>
      
      <script type="text/javascript">
        var slapform = new Slapform(); // The Slapform variable is exposed via the official library above

        slapform.onSubmission(function (response) {
          console.log('Submission', response);

          /*
            From here you can do things with the information in the response, such as display a message if it was a success!
            repsonse.meta.status will retrieve the status of the response (success | fail)
          */
          if (response.meta.status == 'success') {
            console.log('The submission was a success!');
          } else {
            console.log('The submission failed!', response.meta.errors);
          }

        });
      </script>

    
  

Properties of the response object

After using the above code to parse the query string into an object, you can access its properties as seen in the above example with response.meta.status.

Meta

Path Type Definition
meta object This object contains meta data about the response such as the status as well as any errors.
meta.status string A string being either success or fail. You can use this to let your users know whether their submission succeeded or failed.
meta.errors array An array of error objects. Each error object has 3 properties: code, type, and msg. You can learn more about what the errors mean in the response error codes.
meta.referrer string A string representing the URL of where the form was submitted.

Data

Due to limitations of query strings, we cannot reliably send the data of a submission yet. If you need to access the data of a submission, we encourage you to look at using AJAX submissions or the Slapform NPM module to submit instead of an HTML form.

Path Type Definition
data object This object contains data that the user submitted.

Triggers

Path Type Definition
triggers object This object contains data regarding the triggers used in a submission.
triggers.[name] string Usually you will not have to use this, but we use it on our hosted submission page to determine how to handle submissions sent with slap_debug.

Integrations

Path Type Definition
integrations object This object contains data regarding the integrations used in a submission.
integrations.[name] string Access the properties of the integration object you used on the form, such as integrations.payment.
× You are using an outdated browser that our site DOES NOT support. Please click here to update your browser.