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.

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 JSON objects appended to your URL! Here's what it looks like after being 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 NPM module like so:

    
      <script type="text/javascript" src="slapform.js"></script>
      <!-- Or require in a script with: var slapform = require('slapform'); -->

      <script type="text/javascript">
        var response = slapform.getResponse(); // This passes the query string and parses it
        console.log('Response:', response); // Log the response as an object
        console.log('Status:', response.meta.status); // Access one of the properties of the response, the status

        /* From here you can do things with the information in the response, such as display a message if it was a success! */
      </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.