Form too small on desktop

Also update it doesn’t even work it keeps saying test donation failed and then brings me to the very bottom of the page

Hello,

Glad you reached out. Happy to help!

I’ll go through both the form width and the donation issue below ??.

The form width issue stems from your theme. The main element containing the form is restricted to a maximum width of 750px, and the elements within that element are as well. The second container element (also from your form) has a width of 402px, which restricts the form to that width. I don’t know your theme, but I would check if there are settings to expand the containing elements.

When I initially tried to view your form it wouldn’t load – but it does now. That, and the issue you’re experiencing with the Test Donation not functioning as expected is most likely due to caching. I can see that the Litespeed Caching plugin is activated and compressing GiveWP scripts. Below are two different items I’d like you to look at: caching exclusions and excluding GiveWP scripts from JavaScript optimisation. The following is a bit long, but I’ll do my best to break it up a bit into Caching and JavaScript sections ??.

You can test first by temporarily disabling the Litespeed caching plugin and testing, or jump straight into the following information.

Caching:

The fix is a bit technical, so I’ll include as much detail as possible here, but you may need to reach out to your web developer or web support person to implement the recommendations I’ll be talking about below.

Your issue here is caused by some caching happening somewhere in the process. If you’re not familiar with caching, it’s a method of saving server resources by storing copies of a page or site, so that the next visitor’s visit doesn’t trigger a call to the server at all, they just get the copy that was saved. Basically instead of the site needing to recreate the page from scratch, it sends up a copy which allows it to load faster.

We put together this deep dive into what caching is and how it can cause problems: https://givewp.com/documentation/resources/caching/

Caching works really well for speeding up sites, but when a saved copy of the site has sensitive information in it (like donor info) it’s important that GiveWP not share that with the next visitor. If GiveWP is not convinced that the browser requesting the data is the correct one, it defaults to not showing the data.

Caching is handled differently on various sites and web hosts. This could mean a caching plugin, or caching could be in a security solution. Hosting providers also have settings for caching at the server level, and they can help make adjustments for you there. Most caching solutions have a setting or section for excluding specific URLs or parts of URLs (called “slugs”) from caching. At the very least, you should exclude the following slugs from caching:

/donations/
/donation-confirmation/
/donor-dashboard/
*any page with a donation form on it

Also, the following query strings (if your caching solution has a setting for them):
give-embed=donor-dashboard
giveDonationFormInIframe=1
give-route

Your host or the caching plugin/solution you are using can help with that. Some of them may require what’s called a “wildcard” like /donations/* to capture all subdirectories under the /donations/ folder.

Some folks prefer to customize the URLs to their site pages, so you may find that your URLs don’t have the slugs mentioned above, even though they contain the same content. In cases like those, we recommend whitelisting the page, not just the slug, that way the pages with those essential pieces of information are still excluded from caching. This is especially important for URLs of pages with donation forms on them.

One helpful tip: Check in with your hosting provider. Most hosts have caching at the server level, and they will be able to adjust this for you. You can also temporarily disable caching on the site to confirm that the uncached site isn’t showing the problem.

While fine-tuning cache falls outside the scope of the support we’re able to provide, your success with online donations is our number one priority, and we’re happy to provide any tips.

JavaScript optimisation exclusions:

The following scripts should be excluded from any JavaScript optimisations:

give.js
give-donation-summary.js

You may or may not have the following in your site:
give-ffm-frontend.js
give-tributes-common.min.js
give-fee-recovery-public.min.js
give-recurring.min.js

I know this was quite a bit of information to share. If you have any questions about this let me know, I’m happy to help. Have a good day!

• This reply was modified 10 months, 3 weeks ago by alexgivewp. Reason: added a screencast
• This reply was modified 10 months, 3 weeks ago by alexgivewp. Reason: removed screencast - no sound

Thank you I have done all the caching things you told me to do. However now I need to fix the size of the form. Im using the Astra theme

Hi! This will be an Astra setting you’ll have to change – GiveWP form widths are constrained by elements generated by Astra. Please try going to Astra >> Customize >> Page and try a wider Container Layout. I took a screencast of me looking for that: https://www.loom.com/share/e459ccbc8f2b41689b23ff55581b39b1?sid=ac287031-0f91-45fd-8767-f897be67a473

Have a good day!