Changing Layout of the Donation Form

Hi there,

That’s currently very difficult, or near impossible with Give. But the good news is that we’re already developing a new Forms API which will enable users to manipulate form fields in any manner they like. That will be released in Give version 2.1 which we will be releasing either late Spring or early Summer this year.

Thanks!

Hi,
The website isn’t for me but for a client and they strictly require this ??

Is it not possible to rearrange it via altering the plugin file in the child theme?

Isn’t the order just cosmetic, does changing order effect functionality?

1) Is it not possible to rearrange it via altering the plugin file in the child theme?
Technically yes. See our docs on that here:
https://givewp.com/documentation/developers/themeing-with-give/

2) Isn’t the order just cosmetic, does changing order effect functionality?
Not entirely. When you switch gateways, it swaps out the fields using AJAX based on what is necessary for that gateway. The markup has to be correct in order for that swapping to work effectively.

Before responding previously, I toyed with this old snippet again just to confirm. But here’s a reference of how we’ve experimented with this in the past:
https://github.com/WordImpress/Give-Snippet-Library/commit/e012687673eb1f1a89dae5c535b0b4ac5f215933

I spent about 30 minutes trying to get it to work close to the order you wanted. I think it’s possible but it’ll take some time for sure. Like I said, it’s very difficult, and it might have unforseen consequences — which is why we’re building the Forms API.

If you make progress on this, feel free to post your code and I can chime in further.

Thanks!

Hi,
I tried the code on GitHub, although it adds the new fields, it doesn’t remove the old ones. Any solutions for that?

I found the solution by changing the remove fieldset function to this:

/* Remove all Give Fieldsets */
function give_remove_fieldsets() {
	remove_action( 'give_donation_form_top', 'give_output_donation_amount_top' );
	remove_action( 'give_payment_mode_select', 'give_payment_mode_select' );
	remove_action( 'give_donation_form_after_user_info', 'give_user_info_fields' );
	remove_action( 'give_cc_form', 'give_get_cc_form' );
	remove_all_actions( 'give_donation_form_after_cc_form' );
}
add_action( 'init', 'give_remove_fieldsets' );

And I changed the add fieldset function too as the previous one had some bugs:

/* Add all Give Fieldsets */
function give_reorder_fieldsets() {
	add_action( 'give_checkout_form_top', 'give_user_info_fields' );
	add_action( 'give_checkout_form_top', 'give_output_donation_amount_top' );
	add_action( 'give_checkout_form_top', 'give_payment_mode_select' );
	add_action( 'give_donation_form_after_cc_form', 'give_checkout_submit' );
}
add_action( 'init', 'give_reorder_fieldsets' );

Now, it’s ordered properly:
1) Personal Info
2) Custom Donation Amount Input
3) Payment Details
4) Donate Now Button

Here is a screenshot of how it looks: https://imgur.com/a/sTBc3

Another question, would it be possible to add <legend> above the amount? Like personal details or select payment like title?

Thanks

• This reply was modified 6 years, 11 months ago by emreozpalamutcu.

I FIXED IT AND UPDATED THE CODE I POSTED ABOVE

• This reply was modified 6 years, 11 months ago by emreozpalamutcu.
• This reply was modified 6 years, 11 months ago by emreozpalamutcu.

That looks pretty great, well done! Have you tested it with multiple gateways? Has it proven reliable so far?

Hi,
Yeah it’s almost perfect ??
I made some more changes to the looks and submitted another question as I coudlnt add a title above donation amount input field .

And regards to your question I tested it with PayPal and offline donation and works fine. I’m not planning to use another gateway so I haven’t tested the others.

Thank you
Regards
Emre.