All you need is an event page and a few minutes of copy paste

A question was posted in the NationBuilder Expert Linkedin group about the best way to run an email-writing campaign using NationBuilder. The OP wanted users to easily choose from a list of contacts and email them quickly using pre-filled messages. This kind of functionality is a staple of advocacy campaigns, and I think it's possible through NationBuilder with a modified event page and some custom code. 

First, create an event page, like so:

Next, go to Event settings > Hosts and add every account you want your users to be able to email. They must be in your system, and they must have emails, of course (though you could also do this with phone numbers, or any signup variable).

Great! Now we need to scoop out all the guts from that event template and replace them with our own concoction. Copy the code below and paste it over the existing code in the Template section.

   
{% include "breadcrumbs" %}
{% if page.headline.size > 0 %}
<div id="headline">
   <h2>{{ page.headline }}</h2>
</div>
{% endif %}
<div id="content">
   {% if page.event.content.size > 0 %}
   <div id="intro" class="intro">
      {{ page.event.content }}
   </div>
   {% endif %}
   <div class="row-fluid">
      <div class="span4">
         <select id="foo" class="user-success">
            <option value="">Pick a Person to Email</option>
            {% for host in page.event.hosts %}
            <option value="mailto:{{ host.signup.email }}?&subject=Put whatever you want here, including liquid signup fields.&body=Dear {{ host.signup.first_name }}, You can do the same thing here with text. Put whatever you like, and let them fill in the rest">{{ host.signup.first_name }} {{ host.signup.last_name }}</option>
            {% endfor %}
         </select>
      </div>
   </div>
</div>
<script>
   document.getElementById("foo").onchange = function() {
   if (this.selectedIndex!==0) {
   window.location.href = this.value;
   } 
   };
</script>

Let's break that down. It begins with normal code that displays the "event" headline and let's you write whatever content you like in the Intro section (ie: "Select your representative"):

   
{% include "breadcrumbs" %}
{% if page.headline.size > 0 %}
<div id="headline">
   <h2>{{ page.headline }}</h2>
</div>
{% endif %}
<div id="content">
   {% if page.event.content.size > 0 %}
   <div id="intro" class="intro">
      {{ page.event.content }}
   </div>
   {% endif %} 

Next, we'll use Liquid to call each "host" and pull some key signup variables: first name, last name and email. You can display hundreds of host entries using this method (If there's a limit, I haven't hit it yet).

Each entry is automatically added to an HTML dropdown form. The first option is a blank placeholder. 

I then used the mailto protocol to pre-fill out the subject and content sections and dynamically generate an email.

Simply change the text to meet your needs.

<div class="row-fluid">
   <div class="span4">
      <select id="foo" class="user-success">
         <option value="">Pick a Person to Email</option>
         {% for host in page.event.hosts %}
         <option value="mailto:{{ host.signup.email }}?&subject=Put whatever you want here, including liquid signup fields.&body=Dear {{ host.signup.first_name }}, You can do the same thing here with text. Put whatever you like, and let them fill in the rest">{{ host.signup.first_name }} {{ host.signup.last_name }}</option>
         {% endfor %}
      </select>
   </div>
</div>
</div>

The last part is a simple script that instantly activates the mailto link when the user selects a name.

<script>
   document.getElementById("foo").onchange = function() {
   if (this.selectedIndex!==0) {
   window.location.href = this.value;
   } 
   };
</script>

And there you have it. I haven't tested it very fully, but it seems to work across browsers and on mobile devices. Here's an example using some email addresses I own. Dress up your form with CSS and experiment with HTML inside the email content. Liquid will also work. You'll notice I used "Dear {{ host.signup.first_name }}," for extra personalization.

Please give it a try and let me know how it goes!