If you have older Activities that you want to copy, after the form has been cloned, you'll want to...

1. Delete any deprecated Form Elements.
2. Replace it with the new Form Element.

For instance, any forms older than 2018 with a Social Follow element (white social media buttons) should replace the Social Follow element with a new version of the element (colored social media buttons) by deleting the element and choosing it again from the Elements tab (described below).

Old 'Follow' Element	New 'Follow' Element

In another example, if you clone any older activities with Form elements, Salsa Engage will alert you to remove the existing form element and replace it with a new element.

This section displays the activity or message type and name. If you are displaying an activity that has multiple page templates, like a peer-to-peer event that has a main page, a fundraiser page, and a team page to design, that page template type also displays here.

These links at the top of the page are called 'breadcrumbs' which represent a trail to follow through your site you are building. These links show you the current page that is displayed of all the pages in your activity as a little blue line below the page name. Clicking on that breadcrumb takes you to that page for editing that form. In the example above, this event form has 4 pages:

• The activity's Landing Page where visitors start their experience. That is the currently displayed page, indicated by the blue line below the link.
• The Registration form where tickets are selected and personal information filled out.
• The Checkout screen where supporters pay for their tickets.
• The Confirmation screen that confirms their registration was successful and directs supporters on what to do next.

This button displays the message or activity in a new window with all the editing functionality removed. The Preview view enables you to save your work and see what your message or form HTML will look like in your browser, simulating the view in a browser, tablet, or mobile device.

• Click the Preview button to the top right of the editor to open a new browser tab.
• To the right of the new screen, use the Preview controls to toggle between computer screen, tablet, and a cell phone view of your content.

"When moving from Desktop to Mobile, please note that elements from left to right will be stacked on each other. So it's important to check Preview as you're building your design, to ensure the most important information in your email/form isn't too low on the page, since mobile views are increasing as people use their mobile devices more and more often. We must ensure that a design that looks great on your desktop is still logical on a smaller screen. Tablets are the least commonly used of the three device types, ranging around 15% of opens on average."

Ilona Globa, Product Adoption Specialist and Head of the Smart Start Fundraising Program

Pro Tip: It can be challenging to create emails that render well in all email clients, because email clients, unfortunately, have little standardization in the way they display HTML. Here is a helpful resource that other clients of ours have used to mitigate these kinds of problems: http://www.email-standards.org. Consider using a third-party program like litmus.com to test how your HTML email will perform in the myriad of different email programs. In addition, keep an eye on the breakdown of email clients accessing your content and start tailoring the design to the majority of those email clients your Supporters use.
NOTE: Be sure to send yourself actual test emails before publishing. Emails render differently in various email clients from this web preview.

The teal-colored Save button in the top right saves your progress when editing your activity or message. The Exit menu to the right of the Save button will allow you to...

• Save your work and exit the Edit screen.
• Cancel all changes since your last save and exit the Edit screen.

The Editor Menu by default can be found on the right side of the screen, but if you click on the yellow title area and drag it around the screen, you can reposition the Editor Menu wherever you wish. Just below that yellow area, the Hide Options area minimizes the Editor Menu's footprint temporarily as you work within your message or form.

Within the editor menu, you will find some buttons that will make large-scale changes to your message or form:

Settings

Restore Default Look & Feel

Disable Theme Styles

Add A Row

Add An Element

Outline Mode

Element Warnings 

• Row Settings—Use the icon that looks like small, interlocking gears is where to select a background color or image, border, padding, corner style, and mobile adjustments for the given cell.
  
• Duplicate Row—Use the icon that looks like loosely stacked sheets of paper to duplicate the row and place the new copy in certain locations, as in the example below:
  • Copy to top.
  • Copy to Registration.
  • Copy to Checkout.
  • Copy to Confirmation.
    
    

"Use the [Duplicate Row] ability in the Row settings if you're building a longer email (such as a newsletter or a longer form) to help save time on the replication of a row you created. For example, if you have an event and there are multiple speaker profiles you need to list in the lower half of page, you can create an L-sidebar row, where the image is on the left, and the headline and content is in a wider section to the right of the image, as well as a "Full Bio" button underneath. You only need to create this row one time, then clone it several times to save time on the structure build."

Ilona Globa, Product Adoption Specialist and Head of the Smart Start Fundraising Program

• Delete Row—Use the 'trashcan' icon to delete the given row. You'll be prompted before the row is deleted forever. There is no Undo function with this step.

• Element Container Settings—Here is a brief description of the types of features that are available via the 'gear' icon for each type of Element (with further explanation below):
  • Design—Control the element padding, width, height, vertical scrolling within the element, border, corner style, and background.
  • Mobile—All Salsa Engage forms are responsive by default. However, you may want to make further adjustments to any element based on the size of the display you expect your supporters will be using to view your forms or emails.
  • Advanced CSS—In conjunction with Custom CSS added to Engage, you can list any custom CSS classes you want to apply to this element's container. You may define style declarations for these classes in the Custom CSS tab of your overall Design settings. Use the element ID in your Custom CSS to specify certain elements.
    
    Pro Tip: Keep in mind that support for certain CSS declarations can vary widely by different browsers and devices and may even not be supported by different browsers and devices. Only those with advanced CSS skills should use this feature.
    
    
• Edit Element—Use the 'pencil' icon to edit each type of Element (with further explanation below):
  • Button—You can add a button anywhere on your form that links to another page. Once you've selected the Pencil, you can refine the button's attributes: Adjust the link, the positioning, and the size.
  • Callout—When selecting the Pencil for this field, the Edit Featured Content window will open. It's a lot like the edit text window for the Text element. The important choice for this field, however, is made using the Design tab, in the upper right-hand corner of the visual editor. That's where you can adjust the color of the Callout field itself.
  • HTML—Be careful when using this field. Use the Pencil if you want to tweak HTML directly. Keep in mind that you can break your form if your HTML is invalid or incorrect in any way.
  • Image—For the Image element, the Pencil icon opens the Salsa Engage image library. Using the image library window, you can add to your form and images to Salsa Engage. Click here for an overview about adding images to and editing images in Salsa Engage. Click here to see images best practices.
  • Merge Fields—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 supporters 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.
  • Share (Social)—You can add the option of sharing your form to social media, such as Facebook and Twitter, to your forms. Select the Pencil to change the arrangement of these options vertically or horizontally and to decide which social media options you'd like to include or exclude. By default, all are chosen. You can also add a message which outlines why it is important that your supporters share this page. You can edit this verbiage with a slightly truncated version of the 'Edit Featured Content' window, explained in the Text section above.
  • Text—Selecting the Pencil on the Text element will bring up the Edit Text window. The window features many of the editing tools that you are familiar with from popular desktop publishing tools, such as Microsoft Word and Google Docs. Hover over any icon in the window to see a description of what it is or just experiment.
    

"There is the option to do text wrapping of an image in Engage, meaning an image can be inserted directly into a Text element. However, this should only be used in the case that text actually needs to wrap around an image, typically one that is tall and narrow, such as a person's profile photo. In other instances, it's recommended that you insert an image element for a visual, since the image and content will behave more predictably when they render in different inboxes/devices/screen sizes. This is because the visual editor's native functionality is made to be mobile-optimized."

Ilona Globa, Product Adoption Specialist and Head of the Smart Start Fundraising Program

• Everything Else—You will see additional Elements depending on the type of form you're building. If you're building a fundraising form, you won't see the 'Signatures' icon, but you will see it if you're building a petition. These are all editable with the Pencil, but you'll notice that some are grayed out. A grey icon indicates that the field is already included in the form and another cannot be added.

• Delete Element—Use the 'trashcan' icon to delete the given row. You'll be prompted before the row is deleted forever. There is no Undo function with this step.

Add hyperlinks to Activity and Messaging actions so that supporters can click to find more information. You can add hyperlinks to both Your Pages created in Engage or An External Page that exists entirely outside of Engage. Add hyperlinks to Text, Buttons, and Images Elements.

The process looks the same whenever you click to add a hyperlink to your elements:

1. the Choose a Link section, on the Your Pages tab, Link to any Salsa Engage Activities page that you have created.

   • Use Search to find the Activities page or look for it in the table below.

   • Click the Select button on the corresponding row to use that internal page as your hyperlink.

2. If you want to use an external URL, click the An External Page tab.
   

3. Enter or paste the URL that you want to link to into the Link field. Be sure the right Protocol is selected (if you paste in HTTP or HTTPS in your URL it should select the right protocol automatically) and enter only the URL in the Link field.
   
   NOTE: If you want to link to a Salsa Engage Activities page that you have created, use the Your Pages tab (above) instead of this one 
   

4. If the destination form is an Engage form and you have 'Form Prefill' enabled in your Settings, we will always pre-populate the supporter's data if known. However, using the tabs below, you can also append parameters to your link that will pre-populate custom fields with specified values on the destination page when someone clicks on this link from their email.

5. You can optionally set a Salsa Tracking Code for this email on this screen.
   
6. Click Save to add your link to your text.

Text element 

Add a hyperlink within your content by first editing your text in the text editor.

1. Highlight the text you wish to turn into the anchor for your hyperlink.
2. Click the "chain link" button in the text editor.
   

Button element

Add a button to your page that links out to either another Engage form or to an external web site. Buttons in emails are rendered in HTML. Even if a recipient doesn't display images for their emails, they'll likely see your button. 

1. Double-click your button to start editing.
2. Click the Link tab.
3. Click Add a Link.

Later, you will be able to edit this link or clear it on the same Link tab.

Image Element

Add a link to make your images clickable. Supporters can click on an image that directs them to internal Engage forms or external pages.

1. Add your Image Element as normal to your page by dragging the Image Element from the Editor Menu onto your page where you'd like to position it.
2. Double-click the element to select the image.
3. While you are selecting your image you can also Add a Link on the right side of the Select Image screen.

If you choose to code your own HTML in an email, you can add hyperlinks referencing any of 'Your Pages' created in Engage or 'An External Page' that exists entirely outside of Engage using the Link button at the top of the screen.

Add tracking codes to your email hyperlinks. For instance, your email marketing specialist generates an email for you, along with a call to action hyperlink within the email to visit your petition. The URL they send in the email may contain a tracking code to identify this exact campaign, providing a mechanism to quantify how many responded to that source by clicking the link to participate.

NOTE: When you add a tracking code to a URL, that code overrides any default code set on the activity to which the URL directs. 

To add a Tracking Code manually to a URL, simply add the following field-value pair to your URL query string:

sl_tc=[value]

A URL with a tracking code would look like this:

https://sample.salsalabs.org/index.html?&sl_tc=2018_01_30_SLCR

If the destination form is an Engage form and you have Form Prefill enabled in your Settings, we will always pre-populate the supporter's data i(f known). However, you can also append parameters to your link that will pre-populate donation amounts or custom fields with specified values on the destination page when someone clicks on this link from their email.

If you want to direct a supporter to email someone, add a Mailto: link. Adding this link to your form generates a new email message in the supporter's default mail program with one or more fields like To: and Subject: already pre-populated. To add a mailto link:

1. Add a hyperlink via one of the elements listed above.
2. Select An External Page tab.
   
3. In the Protocol field, select Mailto:.
4. In the Link field, enter the email address. 
   
   You may enter more than just the email address in the Link field. For example, add the following to the link, which will create a new email in the supporter's default email program, with a To: address (highlighted in red—you do not need to color yours), subject line (highlighted in blue), and email body (highlighted in green):
   

   example@domain.com?subject=Subject%20Example&body=Email%20Body

   NOTE: %20 is the HTML equivalent of a space between characters. Use this instead of the space key on your keyboard.
   
   
5. Click the Save button to save your changes.
6. Save your form changes in the top right corner.

You can set parameters for outgoing links from Engage emails, once you have selected the link source. One example is a link whose content says, 'Your donation of $20 will fill a backpack for a child. Donate $20 today!' The $20 donation amount will be passed to the destination form and preselected based on conditions set on the link.

In the case of fundraising forms, when someone clicks on this link from their email, donation amounts or custom fields with specified values on the destination page will automatically populate one-time or recurring donation amounts on the fundraising form.

NOTE: The Gift Designation field can be used in conjunction with this functionality.

A Default one-time or recurring donation amount may be set with the following parameters:

• A distinct Dollar Amount (in whole numbers)
• Most Recent One-Time Donation Amount
  • Increment By a specific percentage over the most recent amount.
  • With a Minimum Amount of a specific value or leave blank for none.
  • Default Amount to be used if none occurred previously, or leave blank for none.
    
• Average One-Time Donation Amount (rounded to nearest dollar)
  • Increment By a specific percentage over the most recent amount.
  • With a Minimum Amount of a specific value or leave blank for none.
  • Default Amount to be used if none occurred previously, or leave blank for none.
• Largest One-Time Donation Amount
  • Increment By a specific percentage over the most recent amount.
  • With a Minimum Amount of a specific value or leave blank for none.
  • Default Amount to be used if none occurred previously, or leave blank for none.
• Use A Custom Field-Any supporter custom fields that are Number-type fields.

If you choose to link from an external page or form, it is possible to specify the parameter that represents the amount field of that external form. Since there could be millions of combinations of what someone else called the amount field, it's not possible for us to prepopulate what that field would be on an external page. It can, however, be typed in.

Populate supporter custom fields based on answers previously submitted via sign-up form; for example, how many days of the week someone can volunteer. For example, if someone answered a question previously on a sign-up form, they have a value stored in their Engage record already. If they fill out another form that contains the same field, then the existing value is populated automatically when they use the form. If they are new, then your default values would be used, as seen below.

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 supporters fundraising page.

Supporter Type

• Address, line 1
• Address, line 2
• Cell Phone
• City
• Country
• Date of Birth
• Email Address
• First Name
• First Petition Signature Date
• Home Phone
• Last Name
• Last Petition Signature Date
• Middle Name
• State
• Subscription Change Date
• Subscription Date
• Suffix
• Supporter Since
• Title
• Total Petition Signatures
• Work Phone
• Zip Code
• [custom fields]

Fundraise Type

NOTE: Engage will automatically add a $ to the front of a merged fundraising field value. Cents will not be displayed nor will a decimal point if the decimal value is zero. A ten-dollar average donation amount will display as $10 and not $10.00.

• Amount Of Most Recent Donation
• Average Donation Amount
• Average One-Time Giving Amount
• Average Recurring Giving Amount
• Date Of Most Recent Donation
• Largest Donation Amount
• Largest One-Time Giving Amount
• Largest Recurring Giving Amount
• Last One-Time Giving Amount
• Last Recurring Giving Amount
• Lifetime Giving Amount
• Lifetime Number of Donations
• Type Of Most Recent Donation
• [custom fields]

Organization Type

• Organization Name
• Org Address Line 1
• Org Address Line 2
• Org City
• Org State
• Org Zip
• Org Phone
• Org Email

Separate types exist for custom supporter, activity, and general custom fields and are unique to every organization.