You are here

How to add a custom email sign-up block using NGPVAN

Submitted by Blake on July 14, 2014 - 6:32pm

These instructions show you how to add an email sign-up block in your site side-bar that will appear on every page, allowing people to easily sign-up for your campaign mailing list without leaving the page they are on. Custom changes to the block's design can be made using the CSS injector under the configuration menu.

To add an email sign-up block to the sidebar:

  1. Create a new form in NGPVAN
  2. Be sure to make it as simple as possible in the beginning
    • Turn off "Fast Action Auto-fill"
    • Turn off confirmation emails
  3. When building page click "configure" and include only necessary elements eg. First name, Last name, Email
  4. Change the header: "Contact Information" to something that is more clear to the form like "Email Sign-up"
  5. Remove all text in the "body" section of the page

Now you must create a block in the sidebar of the page you wish to display the sign-up field on:

  1. Create a block in the sidebar
  2. paste in the code below
  3. change the data-id to the id number of the form you created. This can be found in the URL given to you after the creation of your page in NGPVAN.

<div class="ngp-form fastaction-enabled nv-template-accelerator" data-id="-30563139413542435712" data-options="{"drupal_master":true}" data-databag="everybody" data-labels="above" data-endpoint="https://api.myngp.com" data-template="accelerator" data-resource-path="//d1aqhv4sn5kxtx.cloudfront.net/" data-fastaction-endpoint="https://fastaction.ngpvan.com/" data-fastaction-nologin="false" id="NVTag1"><div class="ngp-form-view clearfix" id="NVSignupForm2200000000004748"></div></div>

Remember additional changes maybe made using the configuration options in NGP form settings, or by using custom CSS. In my example I had to alter the width of the forms to make them stretch across the width of the box.