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.

You can use Slapform's default system variables or create your own submission variables.

  1. System variables let you include submission meta information such as the date, the referring site, or the IP.
  2. Submission variables let you retrieve data from other fields in the submission.

System variables

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

Variable Example Value Definition
${slap_meta_date} 2019-11-17T14:34:40Z The current date and time in yyyy-mm-ddThh:mm:ssZ format.
${slap_meta_referrer} https://yourwebsite.com The referring URL that the form came from. For AJAX forms, this will be undefined.
${slap_meta_submission} 1 The number of the current submission for the current submission period.
${slap_meta_status} success The status of the submission. Cna be either success or fail.
${slap_meta_form_id} form_1aa12345-1abc-1234-c456-d1234567890e-0 The ID of the form.

Submission variables

Submission variables are defined by you, the developer.

You can access other fields in the submission using submission variables.

Simply enclose the name of a 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 Example using Variables

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

    
      <form method="POST"
        action="https://api.slapform.com/[email protected]">
        <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 named 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.

AJAX Example using Variables

Below is a an example of an AJAX form utilizing some variables. This is an exact copy of the above HTML form.

    
      <script type="text/javascript">
        $( document ).ready(function() {
          $.ajax({
            url: 'https://api.slapform.com/[email protected]',
            dataType: 'json',
            type: 'POST',
            data: {
              name: 'Jon Snow',
              message: 'Hello World! This is my first Slapform submission.',
              slap_subject: 'New message from ${name} on ${slap_meta_date}'
            },
            success: function (response) {
              console.log('Got data: ', response);
              if (response.meta.status == 'success') {
                console.log('Submission was successful!');
              } else if (response.meta.status == 'fail') {
                console.log('Submission failed with these errors: ', response.meta.errors);
              }
            }
          });
        });
      </script>
    
  

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 named name, and the variable ${slap_meta_date} would be replaced by the current date and time.

× You are using an outdated browser that our site DOES NOT support. Please click here to update your browser.