In a previous post on Customizing page styling, we explored how to add custom CSS code to your pages on a one-off basis.
(One-time) Create a custom page field
Custom page fields allow you to change the layout or functionality of your pages on a page-by-page basis.
From the Pages tab, choose Other > Custom Page Fields from the sidebar. You’ll then be able to see any custom page fields you have already created.
Let’s add a new custom page field. This is something that you’ll set up once — and then you’ll be able to use it again and again on lots of pages.
(One-time) Add the custom page field to your templateset
Like creating a custom page field above, this is a one-time setup step that will help us to customize our pages easily once we’ve set it up.
Caution: Editing templatesets will change the look and feel of every page that uses that templateset, so when making changes to your templatesets, use the Preview feature and test lots of pages to make sure everything looks correct!
From the Pages tab, choose Appearance > Templatesets from the sidebar. You’ll then see all of the templatesets your organization is using.
Find the templateset you want to change and click Edit. You’ll see a list of all of the templates available. We want to make this custom page field available on every page, so scroll to the bottom and open wrapper.html.
Search for a closing
</body> tag and add this code just above it:
Preview a handful of pages that use this templateset — they should look completely unchanged, since this code asks: “Does this page have anything in the custom page field custom_js? If so, add it in here!” But it won’t do anything until our page itself has something in the custom page field custom_js. We’ll cover that in the next step.
Once you’ve tested several pages and you’re confident that your changes to your templateset didn’t break any existing pages, go ahead and publish your changes.
Note: if you use multiple templatesets and want to add this functionality to each of them, repeat this step for each templateset.
Add the custom page field to your page
Unlike the other steps, this is one you’ll do on each page where you want to customize the functionality or layout.
Let’s start with a survey page:
Notice that there are four survey questions we’ve written here. But what if we want to only show question 2, 3, or 4 based on your answer to the first question?
On the Action basics screen of your page, scroll to the bottom and expand the Custom Page Fields, then add the field Custom JS.
This will hide questions 2, 3, and 4 — and only show them depending on my answer to the first question.
Once you save your changes, refresh the page and take another look.