How to Display Donation Forms on Any Page

You can display your donation forms on any page, post, or section of your website using GiveWP blocks, shortcodes, or Elementor integration.

This flexibility allows you to include donation forms within campaign pages, homepages, or even blog posts while keeping the design consistent with the Faun WordPress Theme.

Locate the Form ID #

Every donation form in GiveWP has a unique ID that identifies it in shortcodes and blocks.

1. Go to GiveWP → Campaigns → [Select Campaign] → Forms.
2. Find the form you want to display.
3. You’ll see the form ID in the list view or in the browser’s URL (for example, post=123).
4. Copy this ID — you’ll need it to insert the form.

Example: If your form ID is 123, the shortcode will be [give_form id="123"].

Add the Form Using a Shortcode #

You can place donation forms anywhere on your site using a shortcode.

1. Edit the page or post where you want the form to appear.
2. Add a Shortcode block (in Gutenberg) or Shortcode widget (in Elementor).
3. Paste the shortcode: [give_form id="123"]
4. Update or publish the page to apply changes.

This shortcode loads the full donation form — including title, description, donation levels, and payment gateways — exactly as it appears in your campaign.

Tip: Use this method to embed forms in pages like “Donate Now,” “Support Us,” or “Special Projects.”

Use the GiveWP Form Block (Gutenberg) #

If you are using the WordPress Block Editor:

1. Edit your page or post with the Block Editor.
2. Click the + icon to add a new block.
3. Search for GiveWP Form.
4. Select your donation form from the dropdown list.
5. Preview your page to confirm the layout.

The GiveWP Form Block offers the same functionality as the shortcode but integrates visually with the Block Editor for a smoother editing experience.

Use the Elementor Integration (Faun) #

Faun includes built-in support for Elementor, allowing you to add donation forms visually without shortcodes.

1. Open your page in Elementor.
2. In the widget panel, search for GiveWP Campaign Forms.
3. Drag the widget into your layout.
4. Configure the General Options:
   • Count – Number of campaigns to display.
   • Order Type – Added Date, Title, or Random.
   • Include Posts – Enter specific form or campaign IDs.
   • Exclude Posts – Hide specific campaigns if needed.
5. Adjust Design Options to control layout, columns, and style.
6. Choose Button Type → Open Modal for a popup donation form or Link to Page to redirect to the full campaign page.
7. Click Update and preview your layout.

Elementor integration gives you complete visual control and allows donation forms to blend seamlessly with Faun’s homepage and landing page designs.

Display Multiple Donation Forms #

You can showcase more than one campaign form on the same page using the GiveWP Campaign Forms widget or the [give_form_grid] shortcode.

Example shortcode:

[give_form_grid show_title="true" columns="3" exclude="" include="123,124,125"]

Parameters:

• show_title – Show or hide campaign titles.
• columns – Number of columns to display.
• include – Specific form IDs to display.
• exclude – Form IDs to hide.

This is ideal for “Our Causes” or “Featured Campaigns” sections where you want to list multiple active donation forms.

Verify and Test #

After inserting your forms:

1. View the page on the front end.
2. Ensure the form displays correctly with Faun’s styling (colors, buttons, typography).
3. Perform a test donation in Test Mode to confirm the payment flow works properly.
4. Check that the progress bar and goal are updating accurately.

Best Practices #

• Keep only one full donation form per page for optimal performance.
• Use modal forms for quick donations and full pages for detailed campaigns.
• Always test new embeds after plugin updates or layout changes.
• Use Elementor’s grid layout to feature three or more campaigns without crowding the page.
• Link campaign sections with clear calls-to-action like “Donate Now” or “Support This Project.”