Automatically add supporter names to campaign emails (WYSIWYG version only)

NOTE 1: The steps below outline an advanced process your can follow when adding your campaign form to a NationBuilder website. It is designed for themes based on the Bootstrap template that NationBuilder released in 2014 and using the latest version of the NationBuilder WYSIWYG editor (TinyMCE v4)

NOTE 2: This tutorial specifically relates to campaigns where the "HTML content" option has been selected when setting the default email text on the "Configure" step of the campaign creation process (see screenshot below)

Step 1:

Complete the campaign creation process with your chosen configuration options and copy the HTML from the "Get the code" step. Paste that HTML code into the template of your page.

Step 2:

Inside the textarea element of the form HTML, add the following paragraph element below any other default email content (i.e. just before the closing </textarea> tag):

<p id="sign_off" class="mceNonEditable"></p>

Step 3:

Add the following JavaScript code beneath the HTML form code

<script type="text/javascript">
  jQuery(document).ready(function() {
    function appendSupporterName() {
      var fName = jQuery('#campaign_fields_first_name').val(),
          lName = jQuery('#campaign_fields_last_name').val(),
          supporterName = fName + ' ' + lName;
      if(typeof tinyMCE != 'undefined' && tinymce.activeEditor){
        jQuery('#campaign_fields_email_body_ifr')[0].contentDocument.getElementById('sign_off').innerHTML = 'Yours sincerely, <br />' + supporterName;
        jQuery('#campaign_fields_email_body').val(tinymce.activeEditor.getContent());
      }
    }

    jQuery('#campaign_fields_first_name,#campaign_fields_last_name').on('change',function(){
      if(typeof tinyMCE != 'undefined' && tinymce.activeEditor){
        appendSupporterName();
      }
    });
  });
</script>

Step 4:

Review your form and run a test to ensure the supporter name is correctly added to each email on form submission.

Step 5 Automatically adding MPs name to salutation (OPTIONAL):

Inside the textarea element of the form HTML, add the following paragraph element at the top of the default email content (i.e. just after the opening <textarea> tag):

<p id="salutation" class="mceNonEditable">Dear MP,</p>