Visual Editor: Form Elements

This section covers all element options for Activities and Messages. Add different elements to email blasts and activity forms to design the kind of advocacy, event, and fundraising forms you want to display to your supporters.

The elements listed below are in alphabetical order. Add those elements from the Add an Element button on the Editor menu. Each description contains information about what types of editing options are available for each.

Note: you will see only a subset of these for any given Message or Activity.

360 MatchPro Widget

We've partnered with Double the Donation to produce two 360MatchPro Widget elements for your fundraising form data collection or confirmation screens. Add these elements to your form so donors may identify whether their employers will match their donations to you.

The checkout element helps the supporter investigate during the checkout process if Double the Donation knows about that company's matching gift program. This element transmits information to your Double the Donation account regarding the potential match.

The confirmation element lets the donor check for an organization's matching policy after they donate. Checkout screen searches also coordinate with this element, so supporters will find that their input from the checkout screen populates this widget.

See the 360MatchPro by Double the Donation article for more information.

Add to Calendar

If applied to an Event or Peer to Peer Event, this will give visitors to those pages the option to click and automatically add the event to their calendars.

• Edit button alignment, size, style, font, border, corner style, and link to an action, internal page, or external page.

Button

Apply a button to your form and choose the color, size, text, destination, and alignment.

• Edit—Text, alignment, size, color, font, border, corner style.
• Link—Enables you to link the button to your internal page, an external page, or a Form Action (including Register for Event, Donate, Add to Calendar, and P2P Fundraiser Login).

Callout

This element is similar to the Text element. However, the element calls attention to itself using color and border.

• Edit—font, style, and justification. Note, use the container settings (gears) to adjust the background color.

Designations

Designations are unique to the Form Field Element in Fundraising forms. If you use Salsa CRM, the information that supporters enter into the Salsa Engage Fundraising form will sync to Salsa CRM. It's important to keep in mind that a supporter's Designation on the fundraising form is different from the Fund set on The Basic tab. Funds tie the gifts to an account in your accounting software. Designations, in contrast, are recommendations on how to use the gift and are not necessarily tied to a Fund. Your organization determines what the Fund will be when donors complete their gift when creating the form, but the donor chooses the Designation on the live fundraising form. The Fund Name may be similar to "Operations Fund", whereas the Designation may be similar to "blankets for kennels" or "winter jackets for homeless." 

NOTE: To force donors to choose a designation, configure the element by checking the Required checkbox and selecting None as the default Designation value.

Dedications

Dedications are unique to the Form Field Element in Fundraising forms. If you use Salsa CRM, the information that supporters enter into the Salsa Engage Fundraising form will sync to Salsa CRM.

Divider

Apply a divider line element to any row. To change the color, click on the Design tab to see options. Rearrange the divider location in a row through the Outline view.

Document Summary

Provide information in your Regulation Comment Form about the Regulations.gov Document to which your form refers. The element contains hyperlinks to the regulation document, terms of participation, and privacy notice. These last two items are required to be present in the element and cannot be removed or changed.

Donate Button

This element appears as part of the Form element of the Fundraising activity and enables supporters to donate instead of registering. Choose a prominent location for the donate button or include one above and below the fold. Event registrants may also make additional donations, but they would do so during checkout. Edit the look and feel like standard buttons.

• Edit button alignment, size, style, font, border, corner style, and link to an action, internal page, or external page.

Donation Amounts

Contains controls to enable you to set the following: 

• What payment options appear.
• Payment amounts
• Whether the fundraising page accepts One-time Gifts, Recurring Gifts, or both.
• Whether users can enter their own gift amount.
• How often recurring gifts will be collected. 

• Choose button styles and designs.
• How should donation options be displayed?
• What giving options will donors have on this form?
• What donation amounts will you suggest?
• Let users enter different amounts?
• For recurring gifts, how often will donations be collected—Yearly, Quarterly, or Monthly?
• Can donors select how often their recurring gifts will be collected?
• What donation amounts for recurring gifts will you suggest?

Event Dates

Pre-populated with Start Date, Start Time, and End Time Merge Fields. Enables you to add dates to your Event Activity form.

• Edit—font, style, and justification.
• Pre-populated with applicable merge fields.

Follow

Encourage supporters to follow your organization on social.

• Use the Networks tab to select the social channels that you want to include. The URLs that you entered via Settings > Social Media Pages will be entered by default. (Click here for details about adding default social media URLs.) If you want to use different social URLs, enter the alternative URL. 
  
  NOTE: users will have to log in to their social channels. This tab also enables you to edit alignment, font, style, justification.
  
  NOTE: you must check the social network checkbox and include a URL to include the social channel on your page. If you do not check the social network, but there is a URL filled out, the system treats that as an error.
• Use the Design tab to edit icon size, color, orientation, and alignment.

Form

Enables you to create an embedded, single-page form into which supporters can enter their information. You can add additional fields, such as Dedications and Designations (where applicable), by dropping Form Field elements into the Form or Multi-step Form element. If you want an embedded form with multiple, embedded steps, see Form Field below. Note, you cannot use a Form element and Multi-step Form element at the same time. So, if you drag the Multi-step Form element onto the page, the Form and Multi-step Form elements will both be grayed out in the Elements chooser. Alternately, you can use the Step control to add additional steps to some forms. (Note, some forms do not have this option.) The difference between adding additional steps to a Form and using the Form Field element is that the steps you add to a Form element will be blank by default, but the Multi-step Form element steps are pre-populated. This Element contains the following controls:

• Header
• Email Address
• First Name
• Last Name
• Address, line 1
• Address, line 2
• City
• State
• Zip Code
• Receive update?
• Button

NOTE: Country is not a default element on a form. The United States is the default country for a form. To be compliant with Canadian addresses, you must add a Country form field to the form.

Form Field

Drop this element only into a Form or Multi-step Form Element. It enables you to add fields to Form or Multi-step Form elements. Drag and drop the Form Field element to where you want it to appear in the Form or Multi-step Form element. When you place the form Field element, the Select Field dialog box will open. Choose the type of element that you want to include. Elements include the list below and Custom Fields that you have added.

NOTE: To see the Parameter name for any field, view it in Edit mode. Edit mode opens when you first add the Form Field or click the edit pencil icon for a Form Field.

This Element contains the following controls:

Form Field Name		Data Type	Type
Confirmation Checkbox		Input	Activity
Designation		Input	Activity
Display my donation anonymously		Input	Activity
Do not display my donation amount		Input	Activity
Donation Dedication		Input	Activity
I would like to make a donation		Input	Activity
Increase donation amount to cover processing fees? Please note that if you add this parameter to your form, a Total Fees line item is added to the Donation Summary element on any receipt autoresponder.		Input	Activity
Please keep me informed. If checked, this subscribes supporter as an 'opt-in condition. Unchecked submissions will never unsubscribe a supporter that is already opted-in. Only Manage Subscription can do that.		Input	Activity (not necessary on Sign-Up Forms but can be added to other Activity forms)
Please notify the following person(s) that a donation has been made		Input	Activity
Public Display Name		Input	Activity
Unsubscribe from all future emails NOTE: This element is unique in that it contains an optional Unsubscribe Message. If a supporter checks the box to opt-out of all emails, they will see optional text. You can use this area to display a friendly message or leave it blank to show no additional text. The suggested text is "We're sorry to see you go! And, we'd love you to reconsider. If you'd like to continue receiving our important messages, you can re-join our community at any time."		Input	Activity (Supporter Management Page only)
Address, line 1	Input		Supporter
Address, line 2	Input		Supporter
Cell Phone	Input		Supporter
City	Input		Supporter
Country	Select		Supporter
Date of Birth	Input		Supporter
Email Address	Input		Supporter
First Name	Input		Supporter
Gender	Select		Supporter
Home Phone	Input		Supporter
Last Name	Input		Supporter
Middle Name	Input		Supporter
Preferred Language	Select		Supporter
State	Select		Supporter
Suffix	Input		Supporter
Supporter ID	Input		Supporter
Title	Input		Supporter
Work Phone	Input		Supporter
Zip Code	Input		Supporter

Fund Selection (Fundraising, Events, P2P)

Allow supporters to select a fund to earmark their donation.

Edit this element to change the label text and decide which funds should display on this form.

Fundraiser Search

Optionally apply a fundraiser search button on the P2P Event form, allowing visitors to search for a Fundraiser/team by typing in a Fundraiser's name.

Fundraiser Login Button

Add this button to enable supporters to log in from the P2P event page rather than just their fundraising page or wherever else you decide to put the login.

Goal Tracker

Add this "thermometer" Element on Fundraising, Event, and Peer-to-Peer forms on the Setup tabs. The Goal Tracker provides a graphical display of the progress made toward the goal that you define in Setup. Then, drag and drop this control into your form so that your supporters can see how things are going. If you did not set a goal on the Setup tab, you'll still be able to place the Goal Tracker on your form, but it will not show up in the published form. There are many controls to customize the Goal Tracker.

HTML

Enter your own HTML code, including <style>, tags if you'd like. You can also wrap text around images. However, you cannot insert images from the Asset Library into an HTML element. Completely custom HTML Emails may add images from the Asset Library. In addition, use this element to embed YouTube videos into your form. Click here for directions if you want to embed a YouTube video. This feature does not support scripts.

Image

Use this element to add images. You may use images from the Asset Library or your computer. Lock image element aspect ratios so you can maintain the image as Portrait or Landscape:

• Click on the Lock icon in the top left corner of the element to lock the image's aspect ratio. 
• When an image aspect ratio is locked, you may be prompted to crop a new image to match, if needed. 
• To unlock the image, click the Lock icon again.
  

Click here for an overview about adding images to and editing images in Salsa Engage. Click here to view an article on image best practices.

Leaderboard

Optionally apply a Leaderboard to display on the Event form. It will show Top Teams and Top Fundraisers' names and amounts raised as well as profile pictures.

Logo

Choose the logo element to paste the organization's logo into a row. Add a hyperlink to another Activity page or to your website (if you would prefer to let supporters navigate away from your form). To update an existing logo or apply a new one, go to Settings > Switch to > Look and Feel. 

• Justification and size controls.
• Alt text for the image.
• Hyperlink

Location

Pre-populated with Venue Name, Event Address Line, Event Address Line 2, Event City, Event State, and Event Zip Code Merge Fields. Like the Map element, set your Location during Setup, and your event location automatically populates on Events and Peer to Peer Events pages.

• Edit—font, style, and justification.
• Preset Merge Fields.

Mailing List

This Activity element gives supporters an opportunity to opt-in to your Mailing List groups. You may choose either to...

• Display all of your Mailing List groups to supporters. Supporters can opt into any available lists that they choose, and they won't be opted out of unchecked Mailing Lists. Visit the Groups tab to change how these Mailing Lists are displayed. When you create a new Mailing List, it will be added to the published page automatically.
• Display certain Mailing Lists, as configured. Supporters can opt into any Mailing Lists that they choose from the ones that are displayed, and they won't be opted out of unchecked Mailing Lists. When this option is selected, newly-created Mailing Lists will not automatically appear on the published page. "Show on Page" must be switched on in the list below, and you must republish the page.

NOTE: The order in which your Mailing Lists display is controlled by settings on the Groups tab on the Supporters screen.

Map

This element is available only on Events and Peer to Peer Events forms, and it automatically renders based on the location entered during the Setup step.

Multi-step Form

Enables you to create an embedded, multi-step form into which supporters can enter their information. For example, you can have a Fundraising activity that contains three embedded steps: Donation Amount, Your Info, Payment Info. Once you place a Multi-step Form element, you'll see the Step controls, which enable you to toggle between steps and add additional steps. You can add fields by dropping Form Field elements into the Multi-field Form element. You can edit the buttons and text of a Multi-step Form just like you would any content in the Visual Editor.

NOTE: You may not use the Multi-step Form element and Form element at the same time. So, if you drag the Form element onto the page, the Form and Multi-step Form elements will both be grayed out in the Elements picker. This Element contains several individual, default controls and Form Elements:

• Header
• Steps navigation
• Make donation recurring?
• Donation amount
• Increase donation amount to cover fees? (Please note that if you add this parameter to your form, a Total Fees line item is added to the Donation Summary element on any receipt autoresponder.)
• Button
• Header
• Email Address
• First Name
• Last Name
• Address, line 1
• Address, line 2
• City
• State
• Zip Code
• Receive update?
• Button
• Payment block

OrgInfo

Add one or two places where you can insert your organization's contact data. You'll notice these are all merge fields. Remove any you don't want, or click and drag to reorder them to your liking.

• This element is like a Text Element, but it is pre-populated with organization information merge fields.

P2P Share

Share a link to your fundraiser page over social media with this element. Add it to your Event Participant autoresponder so that your event participants will gain access to their fundraiser page link immediately upon registering.

Payment Block

This element appears as part of the Form element of the Fundraising activity. It contains the fields into which supporters enter their credit card number, security code, card expiration date, and name on the card. You may change the element's location on the form, but otherwise, you may not edit the element. Only the container can be modified.

Register Button

Choose a prominent location for the register button or include one both above and below the fold. Like standard buttons, you can edit the look and feel. In addition to the Register button, you can also add a donate button.

• Edit—button alignment, size, style, font, border, corner style, and link to an action, internal page, or external page.

Share

Encourage supporters to spread the word via their social networks.

• Edit—channel selection, alignment, font, style, justification.
• Choose Channels—Facebook, Twitter, Pinterest, LinkedIn, Tumblr, Email.

Signatures

For Petitions, this element displays the name and comments of form signatories, provides an option to add a call-to-action, allow comments, and moderate comments.

Spacer

Enables you to place an empty <div> (content division element). You can then modify the width, height, background, etc. on its container.

Steps Navigation

The graphical timeline indicates what step the user is at in a Multi-step form. The editor enables you to modify step levels, background color, and text color.

Targeted Messages

This element contains values for the Action Page of your Targeted Action. Alter the format in which your Targeted Message appears. 

Team Block

Optionally apply an element to the personal fundraiser page that links the fundraiser to the fundraising team that the fundraiser has joined. If the fundraiser is not part of a team, this element does not display.

Team Search

Apply a team search button to your P2P Event form that allows visitors to search for a team by typing in a team name.

Text

Use this element to enter compelling content. NOTE: emojis are not supported as activity form text content but they can be appropriate in email content.

• Edit font, style, and justification.
  
• Supports Merge Fields in Email Blasts. Use the "head-and-shoulders" icon to open the Insert a merge field dialog box. Merge Fields enable you to insert dynamic text elements into your forms and messages. For example, the message could include a link to the supporter's fundraising page, so when your supporter sends a message to a donor, the donor will receive a link to the supporter's fundraising page. Insert available merge fields and use the radio buttons to format capitalization. Also, enter the message that you want if the merge field for a supporter is blank.
•  To add merge fields into your email...
  1. Click the Text Element pencil icon.
     
  2. Click the person icon to the top right of the window. The Add merge fields window will open.
     
• Add images in-line with text. To add an image inside the text element...
  1. Click the pencil icon.
     
  2. Place your cursor where you want the image to be placed. 
  3. Select the Image icon.
     
  4. Select the image to add to the text.
     
  5. Set the details on the right side that manage the size of the image, the image alignment, and the horizontal or vertical space around the image as a buffer between the text and the image.
  6. Remember to Save your content.

Tracker

Enables you to track how many supporters have signed your petition. It features the following options:

• How many signatures do you need to collect—This is the total number of signatures you want to collect. The percent complete number is relative to the number you enter here.
• We'll let you know when you hit certain milestones. How often would you like to be notified of your progress? —This feature works by percentage. For example, if you select 10%, you'll be notified when your petition is 10% complete and every time an additional 10% is completed. (In other words, you be notified when your petition is 10%, 20%, 30%, etc., completed.)
• How would you like your goal tracker to display on the petition page? —You can choose a horizontal or vertical orientation.

Web View Link

Enables you to include a link that users can click if to see a Salsa Labs hosted web version of your email. This provides a useful alternative when supporters' email clients are blocking images in your email.

• Edit—Text content, font styles, and colors.