Integrating Salsa Signup Forms Into a Website

NMC builds a lot of political websites and nonprofit websites for local, regional, and national campaigns, and we encounter many different donation, advocacy, and supporter management platforms. These tools let organizations manage and communicate with their supporters.  Some of the more notable platforms include NGP, BSD Tools, and ActionKit -- we work with all of these, and their ease of integration and capabilities vary system by system. However, perhaps my favorite donor and volunteer management platform to integrate is created by Salsa.

NMC recently relied on Salsa to collect supporter signups for Protect.org. I always get excited when a client uses Salsa because it's so easy to integrate. For Protect.org specifically, we used Salsa to embed HTML forms on their public-facing website to collect supporter signups.

Salsa has a clean, intuitive, and simple user interface. It also provides a nice HTTP API for remote programmatic integrations. Salsa also makes it easy to integrate sign up forms into our campaign websites. This last feature is what I want to explore in this post.

Settings

To embed a Salsa signup form on your website, you first need to find the following values in your Salsa control panel:

API Host

The API host is the hostname to which your account's API calls should be sent. The API host is a subdomain of "salsalabs.com" in the form [node_name].salsalabs.com. Your node name can be found in your Salsa control panel beneath the account drop down in the control panel header. If your Salsa account's node name is org, your API host is org.salsalabs.com.

Organization Key

Your organization key is also located beneath the account drop down in the control panel header.

Chapter Key (Optional)

If your Salsa account belongs to a chapter beneath a larger organization, you must also find your chapter key. This is also located beneath the account drop down in the control panel header.

Form HTML

Create an HTML form with the above settings. The form's action attribute is your API Host setting suffixed with /save. Update the organization_KEY and, if applicable, chapter_KEY hidden fields with the appropriate values. You can optionally tag each signup for later identification in the Salsa control panel with the tag hidden field. Finally, you can specify a URL to which signup users are redirected after form submission with the redirect hidden field.

This HTML form example includes three user-facing text input fields: first name, last name, and email address.

When this HTML form is submitted, the user information is delivered to and captured by your Salsa account, and the signup user is redirected to the appropriate URL.

<form action="https://org.salsalabs.com/save" method="POST">
    <input type="hidden" name="organization_KEY" value="YOUR_ORG_KEY"/>
    <input type="hidden" name="chapter_KEY" value="YOUR_CHAPTER_KEY"/>
    <input type="hidden" name="object" value="supporter"/>
    <input type="hidden" name="tag" value="website"/>
    <input type="hidden" name="redirect" value="http://example.com"/>
    <div>
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" name="First_Name"/>
    </div>
    <div>
        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" name="Last_Name"/>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="Email"/>
    </div>
    <!-- This is to prevent spam bots -->
    <div class="memberCode" style="display: none">
        Optional Member Code <input name="first_name_949" value=""/>
    </div>
    <input type="Submit" value="Sign Up"/>
</form>

All Set!

Following those quick steps and adding the form HTML will make sure the signups on your site now automatically dump into your Salsa database.  Keeping all of your data in sync can be critical to make sure your email list is up to date and all of your donor information is in one place.  

More Information

Visit the following URL to learn more about embedding Salsa forms on your website.

https://help.salsalabs.com/entries/21689130-Embed-a-signup-form