Donation Form Grid Widget

Give Donation Form is a third-party WordPress plugin used to create a form that collects donations for a charitable cause. The Xpro GiveWP Donation Form Grid Widget for Elementor displays all donation campaigns in a single layout, allowing the user to pick and examine any campaign by clicking on it.

The Donation Form Grid widget is an easy way to embed all the donation campaigns and allow easy access to the individual form. The free Elementor widget comes with all the necessary customization to design the widget display to match the website theme.

How To Install Xpro Donation Form Grid Widget for Elementor

Requirement

Download and activate the Give Donation Form plugin. You need to install and activate the Free version by Xpro Elementor Addons. If you already have the plugin installed, just make sure the Donation Form Grid Widget is ‘Enabled’, so you can find it in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab, find the Donation Form Grid widget, and finally, toggle the button ON to enable it.

How to Use Donation Form Grid for Elementor

Create a campaign in WordPress after installing and activating the GiveWP plugin. To discover how to create a donation campaign, go to the plugin Documentation page. The GiveWP plugin is fully compatible with Xpro Elementor and automatically fetches forms after you create them in WordPress. Just drag and drop the widget into the Elementor Page and perform customizations.

Step 1

Click on the Xpro Addons section available in the Elementor Editor.

Step 2

From the Xpro Addons section, simply drag’n’drop the Donation Form Grid widget on your desired page location.

Content Section

How to Add Form to The Donation Grid Widget

The source option allows you to add donation forms of your choice with the following three given options.

Forms: Display all the forms in the grid.
Categories: Choose Forms by categories.
Tags: Display forms by typing in tags.

Exclude any form by typing in their ID.

Enable or Disable What to Show and Not

The following options in the content tab allow you to showcase the features in the widget display.

Show Title: Enable the option to show the title of the campaigns in the grid.
Show Excerpt: Enable the option to show descriptions of campaigns in the grid. If you enable it to show the excerpt then you have the option to adjust its length.
Show Goals: Allow the option to display the goals of each campaign.
Show Bar: Enable the option to show the goal competition bar.
Show Image: Allow Donation Grid to show the feature Image of the form.
Donate Button: Allow the option to display a button so that the user is directed to that Donation form.

How to Manage the Order of Form in Donation Form Grid Widget

Adjust the order of the posts in the Donation Form Grid from the Order and Order by drop-down menu. The Order By menu gives 8 options like Date Created, Form Name, etc and the Order option set the display according to ascending and descending order.

Adjust how many columns are to be displayed on a Grid widget. You can set up to 4 columns in a single Elementor page. Set the display type to “Redirect to Page” or “Open Model Window”.

How To Style Donation Form Grid Widget for Elementor

Customize the appearance of the Elementor Donation Form Grid widget to make it display according to your requirement. Adjust the space between each donation post and give them a shadow from the shadow box. Adjust the shadow position with horizontal and vertical movement and adjust the display with blur and spread.

You may create a border around each box by selecting a border type between solid, double, dashed, dotted, and grove. Furthermore, you can customize the border width, radius, and color.

How to Style Image in Donation Form Grid Widget

Style the image in the widget by adjusting the height by dragging the height circle or typing in the size.

Apply a hover effect for opacity and CSS effects. When you increase opacity it will increase the clarity of the image. The CSS filters allow you to perform the following customization to the image for normal and hover effect

• Blur
• Brightness
• Contrast
• Saturation
• Hue

You may make a border around the image using the same technique that we did in the previous section.

How to Style Content in Donation Form Grid Widget

Add a background color for the content section and you may create a border by selecting a border type.

Customize the title and content by styling the typography, color, and margin.

How to Style Button in Elementor Donation Form Grid Widget

The button menu allows you to perform multiple customizations starting with typography which allows you to style text font, size, weight, spacing, etc. You can add different colors to the text and background for their normal and hover display. Furthermore, you can create a border around the button and manage its width, radius, and color.

How to Style Progress Bar in the Donation Form Grid

If you have allowed the widget to showcase the progress bar then you have the option to style it as well. Style the content in the bar section with a typography option and give it a suitable color. You can create a border around this section and give it a background color.

Style the bar that showcases the progress of the donation received. Adjust the height of the bar and add color for both donations collected as well as the background. You can also give a shadow to the bar and create a border around it.

Best Donation Form Grid for Elementor

This is all from the Xpro Elementor Donation Form Grid widget. Implement and style this widget to your website and make a positive impact by helping humanity. Additionally, check out our other amazing grid widgets like the Elementor Course Grid widget that showcases lectures in a beautiful display grid.

Xpro Addons provide a collection of stunning widgets, extensions, and theme templates for Elementor that allow users to create a professional website with no need for coding. View our full list of free Elementor widgets and download the best Elementor Addons now.