Customizing Your Forms Using Page Templates
You can customize the design of Community Fundraisers and Landing Pages using Page Templates. Page Templates are HTML ‘wrappers’ around the form elements defined in your Community Fundraisers, Landing Pages and their Confirmation Pages. Page Templates allow you to define and reuse HTML content that contain your existing branding and web content or common styles you want on all your DonorPoint pages. You apply a Page Template to a Landing Page, Community Fundraiser or Confirmation Page by selecting a Page Template in the corresponding editor.
Note that Page Templates do not apply to Catalogs. Catalogs have their own specific design definitions on the Design tab.
Page Templates are found on the Content sidebar menu. The elements of a Page Template are
- Name
- Favicon - the image that appears on the browser tab for pages containing the Page Template
- HTML Header - content for the <head> tag of pages containing the Page Template
- Content - the <body> content of pages containing the Page Template
Within the HTML Header you define the typical content of the <head> tag for an HTML page - links to stylesheet and Javascript files, etc.
The HTML data in the Content element wraps around the dynamically generated page that Donor Point creates based on your page definition - the contact fields, items, payment methods, etc. Merge tags within the Content data tell Donor Point where to put that dynamic page content. The #{CONTENT} tag within the Page Template indicates where the Page content is supposed to go.
Within the Landing Page or Community Fundraiser itself, you can have additional HTML content between the Page Template content and the dynamically generated content. In Landing Pages and the splash pages for Community Fundraisers, this is defined in the Page Layout element. Within layout content the #{FORM} tag defines the dynamic content that you define on the contact fields, item fields, payment and custom fields. This allows you to custom HTML content per page, without having to duplicate and customize multiple Page Templates.
Note that if you omit the #{CONTENT} or #{FORM} tags in either of those, Donor Point will treat the Content data as a header and add the dynamically generated content below.
In the Donation Form for Community Fundraisers, the Donation Page Header content is added before the dynamic content.
Page Templates can also be applied to the Confirmation Pages for Landing Pages and Community Fundraisers, in which case the #{CONTENT} merge tag in the Page Template Content data will be replaced by the content defined in the Confirmation Page.
Summary:
For Landing Pages and Community Fundraiser splash pages:
<head>
Page Template HTML Header data
</head>
<body>
Page Template Content before the #{CONTENT} tag
Optional Landing Page Page Layout content, before its #{FORM} tag
Defined Donor Point form elements
Optional Landing Page Page Layout content, after its #{FORM} tag
Page Template Content after the #{CONTENT} tag
</body>
For Community Fundraiser donation forms:
<head>
Page Template HTML Header data
</head>
<body>
Page Template Content before the #{CONTENT} tag
Community Fundraiser Donation Page Layout content
Defined Donor Point form elements
Page Template Content after the #{CONTENT} tag
</body>
For Confirmation Pages:
<head>
Page Template HTML Header data
</head>
<body>
Page Template Content before the #{CONTENT} tags
Confirmation Page content
Page Template Content after the #{CONTENT} tag
</body>
Attached Files
You can link files in the DonorPoint content library to your page templtes. The “HTML <head> Files” and “HTML <body> Files” properties are lists of links to DonorPoint files, links to which are inserted before the end of the <head> and <body> tags respectively. See INSERTLINKHERE for more information on uploading and editing files in DonorPoint.