You are here

Embedding Salsa Forms

Submitted by Kate on February 28, 2011 - 12:19pm

Important: This is meant for organizations that log into Salsa here: https://hq-org2.democracyinaction.org/dia/hq/login.jsp. If you use another type of Salsa service, these instructions might not work properly. Please contact us if you have any questions.

Salsa (Democracy in Action) is a great way for organizations to manage supporters, emails, and donations. It allows you to customize your donation pages, sign-up forms, and more, so that they look like the rest of your website. However, there are some reasons for wanting to embed the form into an existing page or block, especially for websites that use Content Management Systems (CMSs) like Drupal or Wordpress.

With Drupal and Wordpress, you are given the option to create sidebars and other elements to appear on multiple pages automatically. This can save a lot of time, especially when you want an element to appear on all pages. For this post, I will explain how to add a Salsa sign-up form as a Drupal block. The instructions for grabbing the code are similar for adding a text widget in Wordpress.

Step 1: Create a Sign-Up Form in Salsa

From your Salsa dashboard, click on the "website management" tab. Click on "Signup Page" and either select an existing page (by clicking "View and Edit") or click "add new." If creating a new page, follow the instructions provided. When you are finished (be sure to save), click "View Page" in the top right corner.

Step 2: Grab Code

Now that you are looking at your sign-up page, right-click (on a Mac, Command+click) and select "View Page Source." A whole page of code will appear, and might look like a bunch of nonsense unless you are familiar with HTML. Scroll down or search using Ctrl+F (Command+F) and look for a line that looks something like this: <form name="data" action="/save" method="POST">. Starting at the beginning of that line, select everything until you see a line that looks like this: </form>. Be sure to include that line as well, and paste it into a text editor like Notepad or UltraEdit.

Step 3: A Little Coding

At this point, many of the links on this page will not work. To fix this, add http://org2.democracyinaction.org wherever you see a URL in quotation marks that starts with a forward slash (/). For example, href="/dia/include/datetime/date_input.css" should become href="http://org2.democracyinaction.org/dia/include/datetime/date_input.css".

Update (Feb 6, 2013): Your Salsa organization may live on a different domain. So while we use org2.democracyinaction.org, your site may use wfc2.wiredforchange.com or another domain. The easiest way to figure out which domain your organization uses is to login to your account and check the URL in the address bar. It should read something like https://hq-org2.democracyinaction.org/salsa/hq/p/salsa/common/hq/dashboard/. You will want to copy everything after the "hq-", but before the first "/salsa". That will be the correct domain for your organization.

Step 4: Adding Code to Drupal

Log in to Drupal and go to Site Building > Blocks > List and click "Add Block." Give your new block a name and paste in your code from the previous steps into the body. At the bottom of the page, you are given the option to specifically exclude or include this block from specific pages. For the purposes of testing, you might want to create a new page and only have the block appear on that page by clicking "Show only on listed pages" and typing the relative URL of your new page (everything after example.org/). Click save, which will take you back to the list of your blocks. Under Disabled blocks, find your new block and select the region in which you would like your block to appear. Click Save at the bottom of the page.

That's it! If you feel comfortable with basic CSS, you can now easily add styles to your form. Once you are happy with the way your block looks, you can configure it to appear on different pages, in different regions, etc. It is a good idea to test your form by filling it out and clicking Submit, then checking to see that your submission went through with a Salsa query.

As always, if you find yourself stuck or if you would prefer someone else to handle this type of task, we are always happy to help!