You are here

How to embed a Salsa sign up form in your WordPress page

Submitted by Nicole on August 29, 2013 - 12:17pm

The first step of embedding a Salsa form in a Wordpress site is to create the form in Salsa. Once you have it set up the way you would like, you can use the source code of that page to give you most of the details you will need to put it on a Wordpress site. Once you have the page created, use your web browser to view the source of that page.

Your next step is to take the important pieces from the source code, and fill them in on your form. Below is the framework for a form which asks for (and requires) first name, last name, email, and zip code. You should be able to find the organization key and chapter key in the source code of your file. If you are using different fields than the example, you can pull those fields out of the source code and replace the field section of the code. Ensure that if you change the fields, you also change the value of the required hidden field to match your new fields. If you require zip, but do not include a field for it on your form it will never submit.

  1. <h2>Form Title</h2>
  2.  
  3. <form name="actionForm" action="http://org2.salsalabs.com/save" method="POST" id="salsa-form">
  4. 	<!-- The fields which are required by the form -->
  5. 	<input type="hidden" name="required" value="First_Name,Last_Name,Email,Zip," />
  6.  
  7. 	<!-- The organization key for this form -->
  8. 	<input type="hidden" name="organization_KEY" value="ORG KEY" />
  9.  
  10. 	<!-- The chapter key for this form -->
  11. 	<input type="hidden" name="chapter_KEY" value="CHAPTER KEY"/>
  12.  
  13. 	<!-- The value of 3 says that the person submitting the form has signed up for emails -->
  14. 	<input type="hidden" name="Receive_Email" value="3" />
  15.  
  16. 	<input type="hidden" name="key" value="0" />
  17. 	<input type="hidden" name="object" value="supporter" />
  18.  
  19. 	<!-- This tells the form where to go after a submission. Very important, otherwise it will appear nothing has happened -->
  20. 	<input type="hidden" name="redirect" value="PAGE TO GO TO" />
  21.  
  22. 	<!-- The actual fields of the form -->
  23. 	<div>
  24. 		<label for="f1">First Name<span class='required'>*</span></label>
  25. 		<input title="First Name" type="text" id="f1" name="First_Name" class="blockInput salsa_first_name" value="" size="25" />
  26. 	</div>
  27.  
  28. 	<div>
  29. 		<label for="f2">Last Name<span class='required'>*</span></label>
  30. 		<input title="Last Name" type="text" id="f2" name="Last_Name" class="blockInput salsa_last_name" value="" size="25" />		
  31. 	</div>
  32.  
  33. 	<div>
  34. 		<label for="f3">Email<span class='required'>*</span></label>
  35. 		<input title="Email" type="text" id="f3" name="Email" class="blockInput salsa_email" value="" onblur="validateEmail(this.value)" size="25" />
  36. 	</div>
  37.  
  38. 	<div>
  39. 		<label for="f7">Zip/Postal Code<span class='required'>*</span></label>
  40. 		<input title="Zip Code" type="text" id="f7" name="Zip" class="blockInput salsa_zip" value="" maxlength="10" />	
  41. 	</div>
  42. 	<!-- End fields -->
  43.  
  44. 	<input type="submit" class="salsa-submit" value="Sign Up!" id="submitSignup" name="submit">
  45. </form>

One important piece you will need to supply is a redirect page. Generally, you can create a "Thank you for signing up page" on your Wordpress site, and then put the full URL to that page as the value for the redirect input. This way, when the form submits "something" happens so the user knows they signed up successfully.

Once you have your code modified appropiately, the easiest way to put this into WordPress is to use a text widget. Simply copy your code into the body of the widget, put it where you want, and viola - your form is ready to go!

One thing you may wish to add on to the form is validation. Salsa provides no feedback on if the form is submitted or not, so I recommend using the jQuery Validation Plugin.

While going into detail on the validation plugin is beyond the scope of this blog post, putting this code above the code from above in your widget will enable validation:

  1. <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
  2.  
  3. <script>
  4. $(document).ready(function() {
  5. 	$('#FORM ID').validate();
  6. });
  7. </script>

Once you have that code installed, add class="required" to any fields which are required.