Getting Started
Slapform works with any HTML form as well as AJAX.
Simple HTML Form Example
To use Slapform with an HTML form, you just need to change a few things:
- Point the
action
attribute to our endpoint (https://api.slapform.com/[email protected]
) - Include
name
attributes in your form input fields - 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:
- Point the
url
to our endpoint and add your email at the end - Include your submission in the
data
object - 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:
- Include advanced name triggers to customize the email, push webhooks, and more
- Go beyond forms and submit data with AJAX. Learn how to submit AJAX
- Take Slapform to the server-side with our NPM module. Learn how to submit using the NPM module