This will be a step-by-step walkthrough of creating the signup form like the kind you get to when you click the "SIGN UP" button on Audubon State or Center 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).
Creating the Form
Once logged in to EveryAction, you're going to go to Online Actions => Create New Form => Signup like so:
PLAY VIDEO ->la-signup-01.mp4
Once your draft is created, there are three "tabs" you must go through to complete your form.
The First Tab: Basics
Step 1a: Internal and User-Facing Names
As shown in the video above, 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 is what makes your form look like an Audubon Web Page with Audubon branded styles, colors, fonts, and logos.
"Standard Signup Form" is the theme you'll use.
The banner image is the main image on the form. Here's how you set those up:
PLAY VIDEO ->la-signup-02.mp4
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.
PLAY VIDEO ->la-signup-03.mp4
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. Contact us at firstname.lastname@example.org
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.
Just as with Source Codes, if you're not sure which code to use, check out our activist code glossary and naming convention document. And if the code you think you should use isn't available, we can add it.
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 editor.
PLAY VIDEO ->la-signup-04.mp4
The key thing to remember here is that you should be using the menu 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
Online Actions forms lack fields for photo captions and credits. So we had to do a hack with the "Build your Online Page" section:
PLAY VIDEO ->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 you will need to to one thing.
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:
If you want to simplify the form by making it just First Name / Last Name / Zip Code / Email Address you can do by switching the On/Off toggle buttons. The fewer fields to fill out, the greater your form conversion rate will be.
Step 2 **OPTIONAL**: Interests
If your program has sub-programs, interests, or topics you want to give people the opportunity to opt in to, then you'll want to use the "Interests" section. This will add a block of checkboxes labeled with your programs' titles.
Each checkbox must be associated with an Activist Code — mentioned in 1c above.
PLAY VIDEO ->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.
- No labels