Getting Started

Simple HTML Form Example

To use Slapform with an HTML form, you just need to change a few things:

1. Point the action attribute to our endpoint (https://api.slapform.com/[email protected])
2. Include name attributes in your form input fields
3. That's it!

Copy-paste this code and just change [email protected] to your own email.

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

Each <input> element needs to have the name attribute in order to be received properly by Slapform.

The action="..." part of the form defines where your form data will be sent to. Usually, developers will enter something like http://mysite.com/form.php. The form.php file would then parse the received data in a server-side scripting language like Node.js, PHP, Python, Ruby, or Perl.

The benefit of using Slapform is that you don't need to write any backend code to process and save the form submission. By pointing your forms to Slapform, we handle all of this for you.

Upon submitting a form you've enabled with Slapform, you simply receive the data in an email. No backend code required!

Simple AJAX Example

You can also submit forms using Ajax. Like the HTML form, it's very simple to set up:

1. Point the url to our endpoint and add your email at the end
2. Include your submission in the data object
3. That's it!

Copy-paste this code and just change [email protected] to your own email.

    
      <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]', /* replace '[email protected]' with your email */
            dataType: "json",
            method: 'POST',
            data: {
              name: "Jon Snow",
              message: "Hello World! This is where the message will go."
            },
            success: function (response) {
                console.log("Response: ", response);
            }
          });
        });
      </script>
    
  

You can read more about using AJAX submissions in Slapform to get a better idea of how to use AJAX.

Simple NPM Module Example

You can also submit forms using our custom NPM module, which is similar to using AJAX but in a way smaller and faster library. Like the HTML form, it's very simple to set up.

You can install the module using a CDN or via NPM. You should use the CDN if your code will live in a browser environment and use the NPM module if your code will live in a backend environment like a Node.js server.

Compatible with Webpack & Browserify

Slapform is 100% compatible with Webpack & Browserify. You should be using Webpack or Browserify if you are using NPM modules client-side or on a website. Read more about Webpack here.

Install Slapform via a CDN

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

Install Slapform via NPM

    
      npm install slapform
    
  

    
      const slapform = new (require('slapform'));
    
  

Using Slapform to Make Submissions

After you have followed the install step, you can start using Slapform with your website or software!

Copy-paste this code and just change [email protected] to your own email.

    
      slapform.submit({
        account: '[email protected]', // Replace this with the email that submissions should be sent to
        data: { // The data you want submitted and emailed to you
          name: 'Jon Snow',
          message: 'Hello World!'
        }
      })
      .success(function (response, data) { // This function runs only on success
        console.log('Success!', response, data);
      })
      .error(function (response, error) { // This function runs only on error
        console.log('Fail!', response, error);
      })
      .always(function (response) { // This function runs regardless of success or error
        console.log('This always runs!', response);
      });
    
  

You can read more about using the Slapform NPM module for submissions to get a better idea of how to take advantage of this capability.

Extending Slapform

Slapform can be easily extended to do some pretty advanced stuff:

1. Include advanced name triggers to customize the email, push webhooks, and more
2. Go beyond forms and submit data with AJAX. Learn how to submit AJAX
3. Take Slapform to the server-side with our NPM module. Learn how to submit using the NPM module