Skip to end of metadata
Go to start of metadata

This will be a step-by-step walkthrough of creating the signup form you get to when you click the "SIGN UP" button on Audubon Louisiana's Website. In this case, the form submitter is signing up to receive emails from Audubon Louisiana, as well as an optional selection of sub-topics. Attempts have been made to note where you would do things differently (and how and why) were your intentions the latter.

The First Tab: Basics

Step 1a: Start Making the Form and Name It

Once logged in to EveryAction, you're going to go to Online Actions => Create New Form => Signup like so:

la-signup-01.mp4

As shown, the Form Name is the internal name for the form, and should start with the state or center in parentheses, and include the type of form it is. The Form Title is the public-facing title of the form.

Step 1b: Form Theme and Banner Image

The Form Theme makes the form look like an Audubon Web Page with all the styles and colors and fonts and logos and what have you. The banner image is the main image on the form. Here's how you set those up.

la-signup-02.mp4

"Standard Signup Form" is the theme you'll use. This video shows choosing an image already in the library for this committee, but you can upload one from your computer instead by clicking "Upload" and choosing "Local Machine" as pictured on right. The image should be 800x800 px, or whatever our current image guidelines say.

Step 1c: Source Codes and Activist Codes

In the Track Your Efforts box, you'll be using two kinds of codes. Source Codes mark any new records for all time as coming from this source, and you can only use one per form. Activist Codes are used in reporting and Targeted Email segmentation, and you can add as many as you think are appropriate for what you're doing.

la-signup-03.mp4

The source code is the one for general online acquisition for Audubon LA. If you're not sure which source code to use, check out our source code glossary and naming convention document. And if the code you think you should use isn't available, we can add it. If you're not sure, just ask. As of October 2018, source code creation is centralized so that we can more easily keep track of what there is out there.

As a baseline, you should always be using the activist code "Region: XXXXX - interest" if you're a state or regional office, as well as "Location: XXXXX" if you're a center or sanctuary. Additional codes might be used if this is a signup for a particular program or issue.

Again, the codes can be a bit confusing, so please feel free to ask if you're not sure. Finish the first section of form creation by clicking "Continue" which goes on to the next step as well as saving your work.

The Second Tab: Build Page

Step 2a: Setting up the Form's Main Copy

The words that appear directly below the banner image are in the "Build Your Online Page" section. This is a rich text or "WYSIWYG" editor, so there's a few things you can do here, all of which are covered in this article all about rich text editors and how to use them properly.

la-signup-04.mp4

The key thing to remember here is that you should be using the menu of existing paragraph and heading types to format text; do not change the font, size, or color of text manually. Also, please do not center text. That doesn't look good with our current templates.

Step 2b: Photo Caption and Credit

Sadly, Online Actions forms all lack fields for photo captions and credits. So we had to do a hack with the "Build your Online Page" section:

la-signup-04a.mp4

No matter where in the box you add either of those two lines, they will get pulled out of the flow and placed in the appropriate places on the published page. The "Photo:" will remain in the credit, but the "Caption:" will be stripped. Check out the published form to see how it looks.

Step 2c: Contact Information (a.k.a. the actual form)

There's no video of this step because for a standard email signup form, you don't have to do anything. In fact, if you're not doing the optional next step, you can just scroll down to the bottom and click the "Continue" button again to advance to the next section, "Confirmation Page".

But if this is an RSVP form for an event — or, if you're using this article as a base for working on other kinds of forms, like a Ticketed Event Form or a Donation Form — you will need to to ONE thing. It's with the "Sign me up for email updates" field, which is third from the bottom of that section and initially looks like this:

This field is on, the default value is checked . . . and it's hidden, as subtly hinted by the slash through the eye icon. For a standard email signup form, that's fine, because it should be obvious to the submitter that they'll be getting emails as a result. But if the form is for some other purpose, Audubon's policy is to inform the submitter that getting emails is a standard part of the deal, and give them the opportunity to opt out (few people do).

We also have some standard language for that informing, which is, "Send me email updates about Audubon's conservation work and how I can help birds." You want to swap that out for what's in the label currently, and click the eye so it gets deslashed. Here's the finished product:

One more thing . . . see all those On/Off toggles? If you want to simplify the form by making it just First Name / Last Name / Zip Code / Email Address, feel free. The fewer fields to fill out, the greater your form conversion rate will be.

Step 2 **OPTIONAL**: Interests

If your program has sub-programs or issues or interests or topics or what have you that you want to give people the opportunity to opt in to, then you'll want to use the "Issues" section. This will add a block of checkboxes labeled with your programs' titles. Each checkbox must be associated with an Activist Code — you know, the things mentioned in 1c above. Chances are good that if these are core issues for your program, you'll already have the activist codes set up, and the searches to target them as audiences.

la-signup-04b.mp4

Note that you can title the section whatever you want, and there's even a rich text field for a description or any other explanatory details you want to provide.

Congratulations! You're halfway through. Now it's time to click "Continue" to save and move on to the 3rd section, "Confirmation Page". You'll also want to continue to the second half of the tutorial.

Continue to Part 2 >>



  • No labels