Adding a Popup Form to your Website

What is a Popup Form?

A Popup Form allows you to simply create a sleek and attention-grabbing call to action in multiple pages on your organization’s website.

You’ll be able to create a Donate Now button which follows users throughout your page all the while avoiding overcrowding and maintaining your charity’s content in place.

Popup Forms are currently only available on Multi Step Forms.


1. Creating a Popup Form

1. Log in to your CanadaHelps.org Charity Account

2. Navigate to Donation Forms

From an existing Multi Step Form

3. Select Edit

4. Under Form Types, select the drop-down menu and then Multi step

5. You can update the Popup Form button colour by clicking to expand the Brand Form tab

6. Click on Select Colour under the Buttons and Links heading

7. Select the colour of your choice or add a HEX colour code if you have one

8. Select Save

9. Once you are happy with your form, select Back to all forms

10. You will notice a Create Popup button with a yellow icon

11. Select the Create Popup button

12. Select Button Style

13. Select Save then select Copy to copy the HTML code generated


From a new Multi Step Form

3. Select Create new form

4. Enter the Form Name. This name is for internal use only and will not appear on your page.

5. Under Form Types, select the drop-down menu and then Multi step

6. Make any desired changes to the form by selecting each available section

7. You can update the Popup Form button colour by clicking to expand the Brand Form tab

This image has an empty alt attribute; its file name is CDF-BrandForm-1024x744.png

8. Click on Select Colour under the Buttons and Links heading

This image has an empty alt attribute; its file name is Select-colour-on-Brand-Form-1024x747.png

9. Select the colour of your choice or add a HEX colour code if you have one

This image has an empty alt attribute; its file name is Select-colour-1024x636.png

10. Select Save

11. Once you are happy with your form, select Back to all forms

12. You will notice a Create Popup button with a yellow icon

13. Select the Create Popup button

14. Select Button Style

15. Select Save then select Copy to copy the HTML code generated


2. Adding a Popup Form to your Website

WordPress

1. Select Edit in the page you wish to add the Popup Form

2. Add a Custom HTML Block

3. Paste (CTRL-V (on PC) or Command-V (on Mac)) the HTML code in the Block box

4. Select Preview and then click Update once you are happy with the Popup Form placement

5. Your Popup Form will be available on the selected page!


3. Modifying a Popup Form Button

To update the Popup Form button style on your website:

1. Log in to your CanadaHelps.org Charity Account

2. Navigate to Donation Forms

3. Select the Create Popup button

4. Update your Button Style preference

5. Select Save then select Copy to copy the HTML code generated

Note: Popup button HTML code must be updated on your website for the changes to appear.

6. Update the code on your website by following the steps on Section 2. Adding a Popup Form to your Website

Was this article helpful?