How to Add a Donation Form to Elementor

Choose the right way to embed the form

Some donation tools provide an Elementor widget. Others provide a WordPress shortcode, a small piece of text in square brackets that WordPress turns into a form. If your tool supplies a shortcode, drag Elementor’s Shortcode widget onto the page, paste the shortcode exactly as provided and update the page.

Do not paste a shortcode into a Heading or Text Editor widget unless you have confirmed that the widget processes shortcodes in your setup. The dedicated Shortcode widget is clearer for future editors and reduces the chance that the code is displayed as plain text to visitors.

Build the page around one decision

Place a short campaign explanation above the form: what the gift supports, who benefits and why it matters now. Keep the form visible without forcing a visitor to scroll through a long image gallery or several unrelated sections. A simple two-column desktop layout can work, but check that it becomes a single, readable column on a phone.

Use the same visual language as the rest of the site without disguising the form. Buttons, field labels and the payment-provider step must remain obvious. Avoid animation that moves the form while someone is trying to complete it.

Check responsive settings and spacing

Elementor lets you set separate desktop, tablet and mobile spacing. Review all three. Wide padding can make a form feel cramped on a phone, while negative margins may hide a payment button or confirmation message. Do not set a fixed height on the section that holds the form, because validation messages or translated labels can need more room.

Use Elementor’s responsive preview as an initial check, then test on a real phone. Browser preview cannot fully reproduce keyboard behavior, payment redirects or a slow mobile connection.

Test before the page is shared

1. Open the public page while logged out, so you see what a donor sees.
2. Confirm that the form is visible and no shortcode text appears.
3. Test every amount choice, custom amount and required field.
4. Run a sandbox payment, then verify the receipt and donation record.
5. Check the page after clearing any Elementor, WordPress or server cache.

If an edit is not visible, first clear the cache and regenerate Elementor’s files through its maintenance tools. Do not edit a working payment form only to solve a layout cache issue. The donation form testing guide provides a wider pre-launch checklist.