Embedding NationBuilder Forms in Other NationBuilder Pages

Page Status: 
Outline Item - Needs Work

Below are notes on how to embed a form or petition on their non-native page but maintain the same functionality and results of submission. Our goal is not to perfectly replicate the page, simply to record the core information and link it to the same ask.

NationBuilder uses liquid markup filters to generate forms. These filters generally power the functionality that lets NationBuilder forms achieve the user interface determined categories in the form. While this is critical in the actual page, a streamlined form is perfectly adequate for replication elsewhere, particularly if where the person's information goes is the same.

The petition functionality automatically generates a user who has committed to signing for a certain cause, but the user generation (and email capture is most important).

The steps for generating a form with the same functionality on another page as its 'home' page is as follows:

Create a form page (petition, signup, form, etc). Make it live.

Look at the source.

Capture the html code for the form from the source code on the original page. For a signup page it will look something like below:

  1. <div class="form_wrap">
  2. 	<div class="form">
  3. 		<form action="/forms/signups" method="POST" class="ajaxForm signup_form"><input type="hidden" value="ABCDEQWERTFAVADD" name="authenticity_token">
  4. 			<input type="hidden" value="100" name="page_id">
  5. 			<div style="display:none;" class="email_address_form">
  6. 				<p><label "email_address"="" for="">Optional email code</label><br><input type="text" autocomplete="off" id="email_address" class="text" name="email_address"></p>
  7. 			</div>
  8. 			<div class="form_errors"></div>
  9. 			<table>
  10. 				<tbody><tr height="10"></tr>
  11. 					<tr>
  12. 						<td><label for="signup_first_name">First Name</label><br><input type="text" name="signup[first_name]" id="signup_first_name" class="text"></td>
  13. 						<td><label for="signup_last_name">Last Name</label><br><input type="text" name="signup[last_name]" id="signup_last_name" class="text"></td>
  14. 					</tr>
  15. 					<tr height="10"></tr>
  16. 					<tr>
  17. 						<td><label for="signup_email">Email</label><br><input type="text" name="signup[email]" id="signup_email" class="text"></td>
  18. 						<td><label for="signup_mobile_number">Mobile phone</label><br><input type="text" name="signup[mobile_number]" id="signup_mobile_number" class="text"></td>
  19. 					</tr>
  20. 					<tr height="10"></tr>
  21. 					<tr>
  22. 						<td><label for="signup_email_opt_in"><input type="hidden" value="0" name="signup[email_opt_in]"><input type="checkbox" value="1" name="signup[email_opt_in]" id="signup_email_opt_in" checked="checked" class="checkbox"> Send me email updates</label></td>
  23. 						<td><label for="signup_mobile_opt_in"><input type="hidden" value="0" name="signup[mobile_opt_in]"><input type="checkbox" value="1" name="signup[mobile_opt_in]" id="signup_mobile_opt_in" checked="checked" class="checkbox"> Send me text message updates</label></td>
  24. 					</tr>
  25. 				</tbody>
  26. 			</table>
  27. 			<p><label for="signup_submitted_address">Address (Street, City, State, Postal code)</label><br><input type="text" name="signup[submitted_address]" id="signup_submitted_address" class="text"></p>
  28. 			<input type="submit" value="Signup" name="commit" class="submit-button">
  29. 			<div class="form_submit"></div>
  30. 		</form>
  31. 	</div>
  32. </div><!-- /form_wrap -->

Now create a new snippet with this code in it (be sure to follow the convention of naming your snippet like this: "_mysnippetname.html") but replace everything from the beginning of the <form> tag to the top of the table with "{% form_for signup %}" (or whatever form you are using. You can see this bit f liquid code if you go to that form's template). Then replace the "</form>" with "{% endform_for %}."

Now, on your target page pop in this bit of code where you want the form to show up:

  1. {% subpage "myform" with "mysnippet" %}

Where "myform" is the slug of the page you created above and "mysnippet" is that name of the snippet you created above.

-------------------------------------------

This is the old advice and may make your page act a little strange because it takes out some stuff that NationBuilder likes to use when creating a form, like the authenticity token

Look at the code and insert it into the target page, the page you want to have the form on. We removed the authenticity token - which we didn't understand the meaning of. The token changes on page refresh and the form works without it, so seemed like a good idea to remove. Below is the input tag to remove.

  1. <input type="hidden" value="ZCC2iex3ZcCcYccYvcI7GjCxjmbr+CcMk6H+CCwOccc=" name="authenticity_token">

You can create a variable result if you'd like in several ways:

  • capturing the most recent form of a certain type
  • ID in the nav
  • etc

The form should populate, with some styling. You can add other pieces of the content of the original page around the form by using the ID or variable chosen.

This section is an outlier use case - and it needs a better title

The code below is helpful if you want to put a version of a form on another page and the form you want to modify HAS ALREADY ITSELF BEEN MODIFIED. In that case you won't want to get your form html from the actual form, instead you'll want to start with something basic. This paragraph not making much sense? Not your fault - this isn't worded well - just ignore everything below.

Example liquid markup to capture the form with the {% capture %} tag and the use the replace filter.

  1. 	{% capture myform %} 
  2.           ...
  3. 	{% endcapture %}
  4.  
  5.           {% comment %}
  6.           - - - - -
  7.           Above we captured everything in the form, below we print it, swaping the page id with the one we want
  8.           - - - - -
  9.           {% endcomment %}
  10.  
  11.           {% capture myfind %}value="{{ page.id }}"{% endcapture %}
  12.           {% capture myreplace %}value="{{ page.recruiting.featured_page.id }}"{% endcapture %}
  13.           {{ myform | replace_first:myfind,myreplace }}

Comments

Hello, I am using your tutorial to add a small form on the homepage of my Nationbuilder site, but I do not understand how to create a snippet, and where I place the snippet after it is created. Any assistance you can provide would be great. Thank you!

Hi Joseph,

Thanks for your note! You can create new html snippets by going to Website > Theme > New File.

Our customization guide notes are currently still in draft form, so I apologize if they are a little confusing. If you need additional support, please feel free to fill out our contact form, and we'll get in touch shortly. We'd be happy to help you get your form set up!

Hey, thanks for writing this up. I've been looking at several blogs to find something like this. Do you by any chance have a contact email that you could share? I would like to contact you directly.

Regards
Ashley
Google promoter

Add new comment

Limited

  • Allowed HTML tags: <em> <strong> <cite> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.