Create a JavaScript Form with Slapform

Simple JavaScript Form Example

To use Slapform with JavaScript, you can either install the NPM module or make a fetch request to our endpoint.

1. Create a form on Slapform

Create a free account and choose "New Form".

2. Install the Slapform NPM module or use the CDN

Install via NPM

If you plan to use the npm version of Slapform in a browser environment, you will probably need to use Webpack, Browserify, or a similar service to compile it.

    
      npm install slapform
    
  

    
      <script type="text/javascript">
        var Slapform = require('slapform');
        var slapform = new Slapform();
      </script>
    
  

— or —

Install via CDN

Install with CDN if you plan to use Slapform only in a browser environment.

    
      <script src="https://cdn.jsdelivr.net/npm/slapform@latest/dist/index.min.js"></script>
      <script type="text/javascript">
        var slapform = new Slapform(); // The script above exposes the global variable 'Slapform'
      </script>
    
  

3. Make a submission

Call the slapform.submit() method to create a submission.

    
      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!'
        }
      })
      .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!');
      });
    
  

— or —

Skip installation and library usage and use the browser's built in fetch() method.

    
      fetch('https://api.slapform.com/{form_id}', {
        body: JSON.stringify({ // The data you want submitted and emailed to you
          name: 'Jon Snow',
          message: 'Hello World!'
        })
      })
      .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!');
      });
    
  

Customize the behavior of your form with custom name triggers

Did you know you can use special name attributes to change the behavior of the submission?

For example, you can use slap_replyto to change the replyto email to that of your customer.

Customize the behavior of your form with custom name triggers