This is a continuation of a two-article process. If necessary, you can return to the beginning of Creating an Email Signup Form.
The Third Tab: Confirmation Page
Step 3a: Customizing the Thank You page
This is what people will see immediately after submitting the form. Generally it's best to stay brief here; mostly, you just want to let people know that the form was successfully submitted.
By default, this section contains variables for some of the info the user submitted. For a simple signup form, however, it's fine to delete this and replace it with a simple statement. The following video shows:
- Replacing the default content with custom copy
- Removing formatting using the Tx button
- Removing extra whitespace
- Changing the last paragraph to a "Heading 3"
- Using the chain button to hyperlink text in the last paragraph
Step 3b: Confirmation Email Setup
Before we create content for the confirmation email, we'll set a few things like the "From Name" From Email Address" Reply-To Email Address" and "Subject Line".
IMPORTANT NOTE: The "From Email Address" must ALWAYS be email@example.com — NOT firstname.lastname@example.org a the video shows.
The end of that video shows navigating to "The Email Machine" to create content for the body of the email. Log in to the email machine at http://audubon.stagecoachdigital.com/.
Step 3c: Create HTML Content with The Email Machine
The Email Machine is Audubon's custom content creator for emails — both of the marketing/fundraising variety, and the autoresponders for forms such as this.
In this case we'll use it to create an "Autoresponder Message" by picking it from the dropdown near the top of the "Messages" view, which is where you arrive when you sign in. The following video is the longest of all those here, and shows filling out several fields in the message creation process:
- The title — an internal title that should follow the same naming conventions as the form.
- The "Sender" which will set up the header and the footer of the email body. There's a sender in The Email Machine for every state and center office, as well as several for National programs.
- The "Preview Text" which is the snippet of body text you see in your inbox's preview, just after the subject.
- Showing (but not editing) the section for the social sharing buttons, and saving the content.
Step 3d: Adding the HTML Content to EveryAction
The Email Machine is just a step-by-step way of creating an email in Audubon's custom templates. Now we need to copy that content, and then paste it into the appropriate field in the form's Confirmation Page tab.
A button in The Email Machine lets you copy the content of the email you've just created. This will be raw HTML code, so in order to add it to the form, you'll need to find the HTML Content Field and use its "Source" button to switch to viewing the raw HTML code in that field. Then you'll delete everything there and paste in the code you just copied from The Machine. To do this, you'll have to use the keyboard shortcut CTRL + V, because paste isn't an option available via right-clicking, as the video shows.
Once you've pasted in the HTML code, click "Source" one more time to show the formatted email again. You can also click "Preview" to see the email without the editor's guide lines, which tend to distort the content a bit.
Step 3e: Adding the Plain Text Content to EveryAction
Every email in systems like this one will have two versions: the HTML version and the Plain Text version. Most of you see HTML versions of emails; the Plain Text is a fall-back for the dwindling systems that don't display HTML, like flip-phones and blackberries. Or maybe you just prefer plain text, and have your email program's settings configured so that's the way they display. Anyway, here's where we customize that version so the email is readable in all situations.
While there is a "Copy Text form HTML Version" button, it tends to spit rather messy content out. Better is just to manually copy the email's text from the HTML Preview, or the "View" tab of the content in The Email Machine. It still requires a bit of cleanup — removing the social sharing and footer icons, because they're not much use in this version — but it's a bit quicker.
The last thing shown in that video is the "Send Confirmation Copy To" field. Put any email addresses in this field of people who want to be BCCed on these confirmation emails, so that they're alerted that someone used the form right away. Note that the addresses are entered as a comma-separated list, with NO SPACE between the comma and the following address.
Also a bit of warning: if you're BCCed on a confirmation email, and you choose to share it by "Reply All", the recipient list of your response WILL INCLUDE THE FORM SUBMITTER. So just be aware of that, and try to avoid Replying-All to these alerts.
Step 3f: Social Sharing Information
Just as the confirmation email sports a couple of social sharing buttons for Facebook and Twitter, so can the confirmation page. But you have to turn them on first, by checking the boxes in the Social Sharing Information section.
Once you have done so, some extra fields will appear. Put "fbshare" and "twshare" in the "Market Source Code" field for each button, respectively. Twitter also has a field for the Twitter Handle, if you want to put that in, as well as for a customized Tweet.
Finally, check the box for "Enable Referrer Tracking".
You are now done with the form. Publish it.
Links and Testing
You now have a complete, working form to use. Here is some helpful follow up just to dot the i's and such.
The Link & Embed Area
No matter what tab of the form setup you're on, near the top right there will be a "Link & Embed" button. Clicking this opens a modal pop-up in the middle of the page that features a link to the form (which you can copy the old-fashioned way, or with a Special Button) and a section of code for embedding the form (advanced users only).
Also, just after you've published the page, the form's URL will appear in a green-backed alert bar just beneath the page title.
Testing Your Form
Even a relatively simple form such as this has a lot of parts. The best way to make sure you didn't skip any of them, or put incorrect content anywhere, is to test the form. To do so, just use it as one of your supporters would. Don't forget to use a real email address, so that you can check the confirmation email.
- No labels