Using Webhooks

Easily extend your Slapforms with Webhooks to notify your server whenever someone submits one of your Slapforms.

What are Webhooks

Webhooks are one way that apps can send automated messages or information to other apps. For example, webhooks enable PayPal to communicate with your accounting app when your clients pay you and help WooCommerce to notify you about new orders in Slack. Using the name trigger called slap_webhook, you can send your form submissions to any webhook endpoint.

If you aren't sure how to set up a webhook, you can learn a few ways here:

  1. Set up a webhook as a Zapier trigger.
  2. Set up a webhook as a Firebase Functions trigger.

Make your Slapform execute a Webhook call

Using HTML Forms

Copy-paste this code and just change [email protected] to your own email and https://yourwebsite.com/your-webhook-here to the webhook URL Zapier gave you.

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

Using AJAX Submissions

Don't forget that you can use AJAX to submit forms as well!

Copy-paste this code and just change [email protected] to your own email and https://yourwebsite.com/your-webhook-here to the webhook URL Zapier gave you.

    
      <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

      <script type="text/javascript">
        $( document ).ready(function() {
          $.ajax({
            url: 'https://api.slapform.com/[email protected]?slap_webhook=https://yourwebsite.com/your-webhook-here',
            /* replace '[email protected]' with your email and https://yourwebsite.com/your-webhook-here with your Webhook URL*/
            dataType: "json",
            type: 'POST',
            data: {
              name: "Jon Snow",
              slap_replyto: "[email protected]"
              message: "Hello World! This is where the message will go."
            },
            success: function (response) {
                console.log("Response: ", response);
            }
          });
        });
      </script>
    
  

Properties of the webhook object

After using the above code to send a webhook to your webhook URL, you need to do something with the data sent!

Below is a table to help you access the properties of the JSON object that is sent via a Sapform webhook.

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.
meta.submission number The submission count for the period. For example, if it's your 5th submission of the month, this value will be 5.
meta.submissionId number The unique submission ID associated with the submission. It will look something like sub_9999-9999-999999999
meta.formId number The unique form ID associated with the form that handled this submission. It will look something like form_99999-9999-9999-9999-99999

Data

Path Type Definition
data object This object contains data that the user submitted.
data.[name] string, number, boolean The value of [name] would depend on what data you submitted. For example if you use an HTML form and one of your name attributes is message then you would access it via data.message.

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. You can access any of the triggers used. To get a full list of the available name triggers, see this page.

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.