Welcome to my sixth and final post on developing websites in NationBuilder. We've covered getting started, using Liquid, applying logic and tags, organizing assets and pages, and communicating with your users. But today, we're going to wrap it up with some tips and tricks around signing up members and enabling actions. That is, how do you allow your users to engage with you?
We’ll start in the NationBuilder Control Panel, where you can customize action settings for any action page type.
Action Settings
Many NationBuilder page types allow for visitors to take an action like sign a petition, make a donation, or RSVP to an event. And for each action, there are settings you can control by going to [Page name] > Settings > [Action] Settings. So for a page with page type Signup, that tab would be labeled Signup settings. This is where you can do things like automatically add tags to any person who signs up on your site.
To add or remove a tag associated with a signup form, go to: Signup settings > Radio buttons. You can allow users to select multiple tags here: Signup settings > Basics in which case the Radio buttons section will be renamed Checkboxes. For more info, check out how to create a new tag for a signup form.
Data and Forms
Very often, you want a field in your form that NationBuilder doesn’t have as a default. To include such a field, you’ll need to do a bit of customizing.
The first step to customizing forms is knowing how to direct the data to the correct place. Data from forms are either stored in one of the already existing signup fields (signup variables) or in custom fields.
To allow users to signup for an email blast, for example, you would create a signup page (or use the existing join page) to control the settings (tag, path, followup, membership assignments, redirects after form submission, whether or not autoresponses are triggered, etc.), and then create a partial HTML template to control the form fields you’d be asking for. You’d associate the two via either the subpage or include Liquid tags.
Signup Form Example:
{% include "signup_form" with site.signup_page %}
This associates a partial HTML template (_signup_form.html in the theme files section) with the site’s default signup page. So _signup_form.html would then contain:
{% if request.logged_in? %}
{% elsif request.sorta_logged_in? %}
<div class="box"></div>
Hi <strong>{{ request.current_signup.name_or_email }}.</strong>
<br>
<div class="social"></div>
Sign in with <a href="{{ request.facebook_connect_url }}">Facebook</a>, <a href="{{ request.twitter_connect_url }}">Twitter</a> or <a href="/login">email</a>.
<br>
Not {{ request.current_signup.name_or_email }}? <a href="{{ request.current_signup.logout_url }}">click here</a>.
{% else %}
<div class="email-signup form"></div>
{% form_for signup %}
{% hidden_field_tag "page_id", page.id %}
<div class="form-errors">{% error_messages_for signup %}</div>
{% email_field "email", class:"text", placeholder:"Email address", required: "required" %}{% submit_tag "Join", class:"submit-button" %}
<div class="form-submit"></div>
{% endform_for %}
{% endif %}
The above code first checks for login status; if the user isn’t logged-in, it would display only the email address field. Then, the form housed in this partial would be submitted through the associated page (default signup page in this case).
So there you have it: our six-part introductory development guide to help you harness the power of NationBuilder. Thanks for coming along with me!
If you have any questions or need some help with your site, just reach out, and we’d be glad to help. And in the meantime, may your theme always sync and may your Liquid never fail to render.