Ever want to send a survey that you can fill out in an email? Now you can!
AMP for Email (Accelerated Mobile Pages for Email) is a new feature that allows you to do just that. In select email clients (mostly Google, which created AMP, and others who are adopting it), you can add forms and other similar web-like dynamic elements within your emails themselves.
And if your user’s email client doesn’t support AMP? They’ll receive the HTML version of your email instead.
In other words, AMP is NOT meant to replace your current emails. It’s there to supplement them!
Setting up AMP takes a bit of work and has a learning curve, but we’re here to help. Here’s how to get started.
Before you can use ActionKit forms in your AMP emails, you need to add https://mail.google.com as an Allowed Origin under CORS Settings on the Configuration screen. (If you forget to add this as an Allowed Origin, actions will be processed but the form success message won’t display to your users, making it seem like your form did not work.)
You can begin using AMP in your mailings by using any AMP-compatible Email Wrapper. We’ve provided an AMP-compatible Email Wrapper for you (AMP Template with Sidebar), but you can also create your own. Once you’ve chosen a suitable Email Wrapper, the AMP HTML Body field will automatically appear on the Compose screen of your mailing.
It’s important to note that AMP is non-standard HTML. Some elements like img have a direct replacement (amp-img), other elements aren’t supported at all in AMP. There are a large number of features in standard HTML/CSS that are not supported in AMP.
To help you write AMP-compliant email, we have a validator that checks your code for compliance as you go. If the validator finds any tags, attributes, or other code that doesn’t pass Google’s requirements, we’ll issue a warning to help you correct the code. Sometimes the edits you need to make might be in your AMP HTML Body, other times you may need to edit your email wrapper in order to fix the validation error.
To make things even easier, we’ve provided an example form and highlighted some common issues in our documentation.
While you’re testing, you can send yourself AMP-enabled emails if you enable a setting in your email address’s Gmail (or equivalent) account.
In order to send yourself AMP emails, open your Gmail settings. Under General, go to Dynamic Email:
Make sure Enable dynamic email is checked, then click on Developer settings and enter your sender email to always allow dynamic emails from this sender, like this:
That will work to send yourself test AMP emails, but before you can send AMP emails to your supporters, you’ll need to first register with Google. You’ll need to do this once per sender email address (e.g. the email part of this from line: “Shannon Turner” <info@actionkit.com>). This process involves sending a production-quality (non-test) AMP email to Google, and completing a short Google form.
When we registered with Google, we used the following AMP HTML Body when sending our working, production-quality email:
<form class="ak-form" method="POST" action-xhr="https://clientcon.actionkit.com/act/" accept-charset="utf-8">
<input type="hidden" name="page" value="what-trainings-would-you-like-next">
<input type="hidden" name="response_type" value="json">
<input type="hidden" name="email" value="{{ user.email }}">
<input type="hidden" name="source" value="mailing">
<input type="hidden" name="mailing_id" value="{{ mailing_id }}">
<div class="ak-grid-row">
<div class="ak-grid-col ak-grid-col-12-of-12">
<div class="ak-mobile-padding ak-text-expander">
<p>{{ user.first_name|default:"ActionKitties"|title }},</p>
<p>We've run a ton of trainings over the years -- some highlights include:</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=S7h__59AJpg">ActionKit 101</a></li>
<li><a href="https://www.youtube.com/watch?v=hedlvovaI6o">Advocacy 101</a></li>
<li><a href="https://www.youtube.com/watch?v=5bm-xcSiGdk">Fundraising 101</a> </li>
<li><a href="https://www.youtube.com/watch?v=hNAT5EdBKxc">Mailing Wrappers & Template Blocks</a></li>
<li><a href="https://www.youtube.com/watch?v=H7brrWwtK7o">Building Dashboards</a></li>
<li><a href="https://www.youtube.com/watch?v=Z3p3KMU-KW0">Intro to the Query Builder</a></li>
<li><a href="https://www.youtube.com/watch?v=Y8eSnR741H8">Intermediate Mailings</a></li>
</ul>
<p>But we're curious: what topics would you like to see covered in the next training?</p>
<p><b>Complete the ActionKit survey in this email below to let us know -- you can submit the survey right from this email!</b></p>
<hr>
</div>
</div>
</div>
<div class="ak-grid-row">
<div class="ak-grid-col ak-grid-col-4-of-12">
<div id="survey-contact" class="ak-styled-fields ak-labels-overlaid ak-errs-below">
<ul class="compact" id="ak-errors"></ul>
</div>
</div>
</div>
<div id="ak-survey-questions" class="ak-grid-col ak-grid-col-8-of-12">
<div class="ak-field-box ak-field-box-padded ak-styled-fields ak-labels-above ak-errs-below">
<div>
<label class="ak-survey-question-label">
<h3> What level of complexity would you like to see more trainings on?</h3>
</label>
<div class="checkbox-item ak-survey-checkbox-set ak-input-set"><label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_complexity" id="id_action_action_training_complexity_1" value="1"> Beginner-friendly, please. These trainings are especially helpful for onboarding new staff.</label><br> <label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_complexity" id="id_action_action_training_complexity_2" value="2"> Intermediate. Beginner-level trainings are already recorded and we're eager to dig deeper.</label><br> <label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_complexity" id="id_action_action_training_complexity_3" value="3"> Advanced. The intermediate level trainings aren't advanced enough for me!</label> </div>
</div>
<div>
<label class="ak-survey-question-label">
<h3> Broadly, what areas would you like to see more trainings on?</h3>
</label>
<div class="checkbox-item ak-survey-checkbox-set ak-input-set">
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_pages" value="Pages"> Pages</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_targets" value="Targets"> Targets</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_templatesets" value="Templatesets"> Templatesets</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_custom_page_fields" value="Custom Page Fields"> Custom Page Fields</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_a_b_page_tests" value="A/B Page Tests"> A/B Page Tests</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_delivery" value="Delivery"> Delivery</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_suggested_asks" value="Suggested Asks"> Suggested Asks</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_tags" value="Tags"> Tags</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_spam_prevention" value="Spam Prevention"> Spam Prevention</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_events" value="Events"> Events</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_custom_event_emails" value="Custom Event Emails"> Custom Event Emails</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_mailings" value="Mailings"> Mailings</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_custom_mailing_fields" value="Custom Mailing Fields"> Custom Mailing Fields</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_email_wrappers" value="Email Wrappers"> Email Wrappers</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_custom_email_wrapper_fields" value="Custom Email Wrapper Fields"> Custom Email Wrapper Fields</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_merge_files" value="Merge Files"> Merge Files</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_merge_data" value="Merge Data"> Merge Data</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_intermediate_snippets" value="Intermediate Snippets"> Intermediate Snippets</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_advanced_snippets" value="Advanced Snippets"> Advanced Snippets</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_re-engagement" value="Re-engagement"> Re-engagement</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_pre-flight_mailing_dashboard" value="Pre-flight mailing dashboard"> Pre-flight mailing dashboard</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_reports" value="Reports"> Reports</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_building_dashboards" value="Building dashboards"> Building dashboards</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_query_templates" value="Query templates"> Query templates</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_users" value="Users"> Users</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_custom_user_fields" value="Custom User Fields"> Custom User Fields</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_advanced_features" value="Advanced Features"> Advanced Features</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_salesforce_sync" value="Salesforce sync"> Salesforce sync</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_everyaction_sync" value="Everyaction sync"> Everyaction sync</label><br>
<label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_topics" id="id_action_action_training_topics_not_sure" value="Not sure"> Not sure</label><br>
</div>
</div>
<div>
<label class="ak-survey-question-label">
<h3> Are there other resources you want to see more of?</h3>
</label>
<div class="checkbox-item ak-survey-checkbox-set ak-input-set"><label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_other_resources" id="id_action_action_training_other_resources_documentation_-_the_campaigner_s_guide_is_very_helpful" value="Documentation - the campaigner's guide is very helpful"> Documentation - the campaigner's guide is very helpful</label><br> <label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_other_resources" id="id_action_action_training_other_resources_documentation_-_the_developer_s_guide_is_very_helpful" value="Documentation - the developer's guide is very helpful"> Documentation - the developer's guide is very helpful</label><br> <label class="ak-survey-checkbox-choice"><input type="checkbox" class="ak-survey-input" name="action_action_training_other_resources" id="id_action_action_training_other_resources_blog_posts_tutorials_and_how-to_guides" value="Blog posts, tutorials, and how-to guides"> Blog posts, tutorials, and how-to guides</label><br> </div>
</div>
<div>
<label class="ak-survey-question-label">
<h3> Specifically, what would you like us to do more trainings on?</h3>
</label>
<textarea class="ak-survey-input" name="action_action_training_freeform" id="id_action_action_training_freeform" rows="4" style="height:5.0em; width: 80%;" ></textarea>
</div>
<div>
<label class="ak-survey-question-label">
<h3> Anything else you want to share?</h3>
</label>
<textarea class="ak-survey-input" name="action_action_training_anythingelse" id="id_action_action_training_anythingelse" rows="4" style="height:5.0em; width: 80%;" ></textarea>
<br><br>
</div>
<button type="submit" class="ak-submit-button" value="Submit Survey" style="border-radius: 16px; background-color: #dd0000; display: inline-block; padding: 0 22px; margin-bottom: 10px; line-height: 200%; height: 32px; color: #fff; font-size: 16px; font-weight: bold; text-transform: uppercase; font-family: Helvetica, Arial, sans-serif; text-align: center; text-decoration: none;">Submit Survey</button>
<div submit-success>
<template type="amp-mustache">
Your survey responses have been recorded! Thanks for letting us know what you'd like to see!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Hmm, something went wrong and your survey response didn't go through.
</template>
</div>
</div>
</div>
</div>
</form>You can modify the above to meet your needs, but hopefully this helps get you started.
While testing, don’t forget that any proofs you get WILL RESULT IN AN ACTION BEING TAKEN IF YOU SUBMIT THE FORM, just like if you were to submit a form after clicking a non-AMP email proof.
If you have trouble setting up your AMP email, consult the AMP for Email specification. If you’re still stuck, file a support ticket!
Looking forward to seeing what you come up with!
Interested in scheduling a demo with ActionKit? Let us know!