Embed an Action Network form on a world.350.org site

Using a 350-hosted website for your local group or campaign? Using Action Network to manage your mailing list & online actions? If your site is part of the world.350.org multisite, here's how you can link the two up (note: it's very similar for any WordPress site, and the first two steps apply no matter where you're embedding your form):
  1. 1

    Create a form in Action Network.

    a. Create a new form in Action Network by clicking on 'Form' in the sidebar.

    b. If you're setting up a signup widget on your homepage, it's best to create a fresh Action Network form for tracking purposes. Since this form is just going to be viewed in embedded form, you don't need to worry too much about banner images and descriptive text. Since you want as many people to sign up as possible, keep your form simple. We recommend first name, last name, email, zip code, and phone number (use the existing "Phone Number" custom field). Then change the 'Add Your Name' submit button text at the bottom of the form to 'Submit' or whatever call to action you prefer.

    c. Click "Save and go to next step", then "Save & Publish."
  2. 2

    Edit the form embed options.

    After creating your action, you'll be taken to the management dashboard for that action. Scroll down to where it says "Embed this Action" on the right.

    Click "Options" and make sure you select "No Styles" & "Standard Layout." This will change the embed code above. (If you select "Standard Styles" or "Layout Styles Only", your form will have Action Network standard styling and won't match the font & colors of your website.)
  3. 3

    Copy the embed code.

    Copy the html embed code from the box above.
  4. 4

    Is your site using the old or new theme?

  5. 5

    Visit your world.350.org site dashboard.

    From your dashboard (world.350.org/YOURGROUPNAME/wp-admin/), click "Superpages."

  6. 6

    Edit your 'Homepage' Superpage

    Click 'Edit' that appears when you mouseover "Homepage" in the list of Superpages.
  7. 7

    Paste your embed code into the Action Network section.

    Scroll down to the second section in this Superpage. Then scroll down within the section until you see a comment saying
    "<!-- replace this with your own Action Network embed code -->".

    Replace everything in between this comment and the closing </div> tag with your copied embed code. You can also feel free to change the 'Lorem ipsum' dummy text within the section at this point. Just scroll to the top within this section to find the text you'd like to change.
    Hit 'Update' at the top of the page to save your changes.
  8. 8

    And you're done!

    Make sure your widget looks right on your homepage. (If the font & colors look wrong, go back to step #2.)
  9. 9

    Visit your world.350.org site dashboard.

    From your dashboard (world.350.org/YOURGROUPNAME/wp-admin/), click "Feature Boxes & Sidebars."

  10. 10

     

    Click "Feature Boxes and Bottom Bar."
  11. 11

    Create a new "text" widget.

    Find the blank "Text" widget under "Available Widgets" (you might have to scroll down), and drag it over to the "Feature Boxes" area on the right.

    Here's a quick screencast:
     
  12. 12

    Paste your embed code into the new widget.

    You'll probably want to leave the title blank, since the widget will already have some text that it pulls over from Action Network. Paste your embed code into the primary field. Once you're done, hit "save."
  13. 13

    And you're done!

    Make sure your widget looks right on your homepage. (If the font & colors look wrong, go back to step #2.)