Contribution Forms Gone Wild! Micah Lee Web Developer Electronic - - PowerPoint PPT Presentation

contribution forms gone wild
SMART_READER_LITE
LIVE PREVIEW

Contribution Forms Gone Wild! Micah Lee Web Developer Electronic - - PowerPoint PPT Presentation

Contribution Forms Gone Wild! Micah Lee Web Developer Electronic Frontier Foundation micah@eff.org @micahflee Custom Templates Everything in CiviCRM is rendered with a Smarty template Set custom templates path in:


slide-1
SLIDE 1

Contribution Forms Gone Wild!

Micah Lee Web Developer Electronic Frontier Foundation micah@eff.org @micahflee

slide-2
SLIDE 2

Custom Templates

  • Everything in CiviCRM is rendered with a

Smarty template

  • Set custom templates path in:

civicrm/admin/setting/path?reset=1

  • You can find all the built-in templates in:

sites/all/modules/civicrm/templates/CRM

  • You can see what template file you need by

viewing the source and search for “tpl”

slide-3
SLIDE 3

Custom Templates Set the Path

slide-4
SLIDE 4

Custom Templates Figure Out What Files to Edit

slide-5
SLIDE 5

Custom Templates Figure Out What Files to Edit

slide-6
SLIDE 6

Custom Templates Create the Right Files

You can override template files:

templates/CRM/Contribute/Form/Contribution/Thanks.tpl

You can also have a different template for each contribution page based on ID:

templates/CRM/Contribute/Form/Contribution/41/Main.tpl

slide-7
SLIDE 7

Custom Templates Edit Your Template

slide-8
SLIDE 8

Custom Templates Edit Your Template

slide-9
SLIDE 9

Custom Templates Make It Look Awesome

slide-10
SLIDE 10

URL Aliases

Why have URLs that look like this: https://example.com/civicrm/contribute/transact ?reset=1&id=41 When they can look like this? https://example.com/donate URL aliases (path module) work great with CiviCRM.

slide-11
SLIDE 11

URL Aliases

slide-12
SLIDE 12

Hooks

hook_civicrm_buildForm( $formName, &$form ) hook_civicrm_validate( $formName, &$fields, &$files, &$form ) hook_civicrm_postProcess( $formName, &$form )

slide-13
SLIDE 13

civicrm_noconfirm

https://github.com/emotive/CiviCRM-No-Confirmation

slide-14
SLIDE 14

Javascript and CSS

Here's how you add Javascript and CSS to specific pages.

slide-15
SLIDE 15

Javascript and CSS

slide-16
SLIDE 16

“Why I'm Contributing” Tweet

slide-17
SLIDE 17

“Why I'm Contributing” Tweet

slide-18
SLIDE 18
slide-19
SLIDE 19

“Why I'm Contributing” Tweet

You can assign your own Smarty tokens: $form->assign('twitter_link', $html);

slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22

Same Donate Page, Different Stuff

  • We have separate donate and join pages
  • We have separate credit card and PayPal

pages

  • If we want the Contribution Source to be

different for a specific set of donate pages, we need to duplicate 4 pages

  • We need a different Contribution Source (and
  • ther data) for each action alert thank you

page

slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

First, Make a New Content Type

slide-26
SLIDE 26

Make Your Nodes

slide-27
SLIDE 27

How does this magic work?

Contribution page URLs look like this: civicrm/contribute/transact? reset=1&id=$CONTRIBUTION_PAGE_ID We add some fields: civicrm/contribute/transact? reset=1&id=$CONTRIBUTION_PAGE_ID&nid=$NODE_ID &secret=$SHARED_SECRET And we use URL aliases to hide the secret: thanks/paypal-censorship

slide-28
SLIDE 28

How does this magic work?

slide-29
SLIDE 29

How does this magic work?

slide-30
SLIDE 30

How does this magic work?

slide-31
SLIDE 31

Same Donate Page, Different Stuff

Steps to make a new custom contribution page:

  • Create new custom_contribution_page

drupal node with custom fields in it

  • Build URL (e.g. civicrm/contribute/transact?

reset=1&id=XX&nid=XX&secret=SecretValue Here

  • Make a URL alias for it

To do: Implement a Drupal hook to automatically make the URL alias, so people besides me can make these

slide-32
SLIDE 32

Thanks!

Micah Lee Web Developer Electronic Frontier Foundation micah@eff.org @micahflee Slides available at: https://www.eff.org/document/contribution-pages-gone-wild