Variables

Easily extend your Slapforms with variables to insert dynamic data and calculated fields.

What are Variables?

Variables let you insert dynamic content into your forms.

Variables look like a snippet of text wrapped in special characters: ${example}. When you insert a variable into your submission, we'll replace it with the value stored in the corresponding variable.

Here's a list of all the Slapform special name trigger fields, along with the behaviors they control.

System Variables

System variables are predefined and every form/submission has access to them.

${slap_meta_date}

Name	${slap_meta_date}
Example value	2024-12-12T07:07:59.000Z
Description	The current date and time in `yyyy-mm-ddThh:mm:ss.fffZ` format.

${slap_meta_referrer}

Name	${slap_meta_referrer}
Example value	https://yourwebsite.com
Description	The referring URL that the form came from. For AJAX forms, this will be `undefined`.

${slap_meta_submission}

Name	${slap_meta_submission}
Example value	1
Description	The number of the current submission for the current submission period.

${slap_meta_status}

Name	${slap_meta_status}
Example value	success
Description	The status of the submission. Can be either `success` or `fail`.

Submission Variables

Submission variables are defined by you, the developer.

Simply enclose the name of any field in the Slapform variable syntax from within another field and the data will automatically be inserted.

For example:

Input

    
      {
        "variable": "apples",
        "result": "He likes ${variable}."
      }

result

    
      {
        "variable": "apples",
        "result": "He likes apples."
      }

HTML form example using Variables

Below is a an example of an HTML form utilizing some variables.

    
      <form method="POST"
        action="https://api.slapform.com/{form_id}">
        <input type="text" name="name">
        <input type="text" name="slap_subject" value="New message from ${name} on ${slap_meta_date}" hidden>
        <textarea type="text" name="message"></textarea>
        <button type="submit">Submit</button>
      </form>

So what's happening here? There are two variables in use here, ${name} and ${slap_meta_date}.

The variable ${name} would be replaced by the contents of the field with the name attribute name, and the variable ${slap_meta_date} would be replaced by the current date and time.

Pro Tip:

Generally, you should hide the fields that use variables because it is unreasonable to expect your users to fill out those fields.

JavaScript form example using variables

Below is a an example of a JavaScript form utilizing some variables.

    
      slapform.submit({
        form: '{form_id}', // Replace this with the form id you created in step 1
        data: { // The data you want submitted and emailed to you
          name: 'Jon Snow',
          message: 'Hello World! This is my first Slapform submission.',
          slap_subject: 'New message from ${name} on ${slap_meta_date}'
        }
      })
      .then(function (response) { // This function runs only on success
        console.log('Success!', response);
      })
      .catch(function (response) { // This function runs only on error
        console.log('Fail!', response);
      })
      .finally(function () { // This function runs regardless of success or error
        console.log('This always runs!');
      });