Adding Actions with New Givewp Form Builder

[jsdrew]

I would like to use add_action ('give_before_donation_levels'...) to add formatting to a GiveWP form. I have been able to do it in the past using a single step form created with the Legacy Form Creator. I have a multistep form at https://hopemissiondev.wpenginepowered.com/donate2/ and this add action seems to work on a multistep form created with the Legacy Form Creator. I created a multistep form with the New Form Builder at https://hopemissiondev.wpenginepowered.com/donate/ and the simple code I added using add action ('give_before_donation_levels does not show up. Does this add_action and other similar add_actions in the donation form display work with the new form builder? Or are there other add_actions available?I would like to use add_action ('give_before_donation_levels'...) to add formatting to a GiveWP form. I have been able to do it in the past using a single step form created with the Legacy Form Creator. I have a multistep form at https://hopemissiondev.wpenginepowered.com/donate2/ and this add action seems to work on a multistep form created with the Legacy Form Creator. I created a multistep form with the New Form Builder at https://hopemissiondev.wpenginepowered.com/donate/ and the simple code I added using add action ('give_before_donation_levels does not show up. Does this add_action and other similar add_actions in the donation form display work with the new form builder? Or are there other add_actions available?

Here is the full add_action script.
function test ($form_id = 0,$args = array()) {
$form = new Give_Donate_Form( $form_id );
$formid = strval($form->ID);
$title = $form->post_title;

    echo "<div class='sam'></div>";

}
add_action( 'give_before_donation_levels', 'test', 10, 2 );

I thought this was a support question, but they pointed me here.

[jonwaldstein]

Hey @jsdrew,

Thanks for reaching out!

You are correct in that not all the actions used to programmatically modify the donation form exist in (v3) forms using the form builder. The (legacy) forms are vastly different in how they are rendered and we simply could not support every action. The good news is there are ways to edit/modify the new donation form programmatically 💪 ! To help steer you in the right direction, could you explain in more detail what you are trying to accomplish?

Thanks! 😄

[jsdrew]

Hi Jon, Thanks for your response. Please see the donate form at https://ugm.ca/?form=easter&caid=701I90000009mRqIAI. We are trying to make something like that. The first step is to be able to work out things behind the scenes with a Givewp form. If you go to https://hopemission.com/donate and just click “Complete Donation Now”, you can see a popup I’ve built to ask about donating monthly and change the form fields. I used Addactions and Javascript. I have a beginning step at Donate | Hope Mission (hopemissiondev.wpenginepowered.com)<https://hopemissiondev.wpenginepowered.com/donate/>. * I would like to be able to change the amounts on the second section (Hearts of Hope Monthly Giving) based an the amount selected in the first section. Then I would like to change the monthly option on the form based on the answer to question on the Hearts of Hope Monthly giving section. * I would also like to be able to change the formatting on the sections as there are few formatting options on the new form builder and no way to add images. I am using a multistep legacy give form at Donate2 | Hope Mission (hopemissiondev.wpenginepowered.com)<https://hopemissiondev.wpenginepowered.com/donate2/>, and I see how I can create something similar to what I did at https://hopemission.com/donate, I was just hoping to be able to do this with the new form builder. Any direction you can steer me in would be helpful. Thanks, Sam Drew Trinity Web Hosting Hope Mission IT/Web Development ***@***.******@***.***> (780) 720 - 9424 From: Jon Waldstein ***@***.***> Sent: Monday, April 1, 2024 12:14 PM To: impress-org/givewp ***@***.***> Cc: Sam Drew ***@***.***>; Mention ***@***.***> Subject: Re: [impress-org/givewp] Adding Actions with New Givewp Form Builder (Discussion #7337) Hey @jsdrew<https://github.com/jsdrew>, Thanks for reaching out! You are correct in that not all the actions used to programmatically modify the donation form exist in (v3) forms using the form builder. The (legacy) forms are vastly different in how they are rendered and we simply could not support every action. The good news is there are ways to edit/modify the new donation form programmatically 💪 ! To help steer you in the right direction, could you explain in more detail what you are trying to accomplish? Thanks! 😄 — Reply to this email directly, view it on GitHub<#7337 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AQYTZWVT7CVL6KFM2WHGNL3Y3GPVDAVCNFSM6AAAAABFR6XIUWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSNZVGM3TM>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>

[jsdrew]

Hi, I hope I did not say anything in my last email to cut short our conversation. In any case, if my last email contained too much info, here it is simply. We want to be able to inject custom CSS and JS into Give Multistep forms. We are able to do that with the legacy forms using add_action commands like add_action give_before_donation_levels and add_action give_after_CC_fields. These add_action commands do not seem to work with forms built by the new form builder. Thank you, Sam Drew Trinity Web Hosting Hope Mission IT/Web Development ***@***.******@***.***> (780) 720 - 9424 From: Sam Drew Sent: Monday, April 1, 2024 12:30 PM To: impress-org/givewp ***@***.***>; impress-org/givewp ***@***.***> Cc: Mention ***@***.***> Subject: RE: [impress-org/givewp] Adding Actions with New Givewp Form Builder (Discussion #7337) Hi Jon, Thanks for your response. Please see the donate form at https://ugm.ca/?form=easter&caid=701I90000009mRqIAI. We are trying to make something like that. The first step is to be able to work out things behind the scenes with a Givewp form. If you go to https://hopemission.com/donate and just click “Complete Donation Now”, you can see a popup I’ve built to ask about donating monthly and change the form fields. I used Addactions and Javascript. I have a beginning step at Donate | Hope Mission (hopemissiondev.wpenginepowered.com)<https://hopemissiondev.wpenginepowered.com/donate/>. * I would like to be able to change the amounts on the second section (Hearts of Hope Monthly Giving) based an the amount selected in the first section. Then I would like to change the monthly option on the form based on the answer to question on the Hearts of Hope Monthly giving section. * I would also like to be able to change the formatting on the sections as there are few formatting options on the new form builder and no way to add images. I am using a multistep legacy give form at Donate2 | Hope Mission (hopemissiondev.wpenginepowered.com)<https://hopemissiondev.wpenginepowered.com/donate2/>, and I see how I can create something similar to what I did at https://hopemission.com/donate, I was just hoping to be able to do this with the new form builder. Any direction you can steer me in would be helpful. Thanks, Sam Drew Trinity Web Hosting Hope Mission IT/Web Development ***@***.******@***.***> (780) 720 - 9424 From: Jon Waldstein ***@***.******@***.***>> Sent: Monday, April 1, 2024 12:14 PM To: impress-org/givewp ***@***.******@***.***>> Cc: Sam Drew ***@***.******@***.***>>; Mention ***@***.******@***.***>> Subject: Re: [impress-org/givewp] Adding Actions with New Givewp Form Builder (Discussion #7337) Hey @jsdrew<https://github.com/jsdrew>, Thanks for reaching out! You are correct in that not all the actions used to programmatically modify the donation form exist in (v3) forms using the form builder. The (legacy) forms are vastly different in how they are rendered and we simply could not support every action. The good news is there are ways to edit/modify the new donation form programmatically 💪 ! To help steer you in the right direction, could you explain in more detail what you are trying to accomplish? Thanks! 😄 — Reply to this email directly, view it on GitHub<#7337 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AQYTZWVT7CVL6KFM2WHGNL3Y3GPVDAVCNFSM6AAAAABFR6XIUWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSNZVGM3TM>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>

[michaelzap]

What if I want to add a script to only the confirmation screen in a multi-step form, such as this one to track a successful donation using a Meta pixel?

<script> fbq('track', 'Purchase', { value: 1, currency: 'USD', }); </script>

[jonwaldstein]

You can try this hook:

add_action('givewp_donation_confirmation_receipt_showing', function () {
    //wp_enqueue_script();
});

[michaelzap]

That looks like just what I need! And if I don't want to enqueue a script but output the code directly? Can I use a function that would output the code (or anything else)?

What is the best way to find all of these action hooks so that I can try more on my own before bugging you here?

[jonwaldstein]

I'm not sure if outputting code directly will work but feel free to try. A good old github search for actions will be probably be your best bet in finding them 😄

[michaelzap]

This works to output code directly to the beginning of the form iframe:

<?php
/**
 * Add scripts to the top of form iframes
**/

function zZ_add_givewp_scripts() {
    $output = <<<'EOD'
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '123456789012345');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=123456789012345&ev=PageView&noscript=1"/>
</noscript>
EOD;

    return $output;
}

add_action('givewp_donation_form_enqueue_scripts', function(){
    echo zZ_add_givewp_scripts();
});
?>

Am I doing anything obviously stoopid there?

It seems a little bit brutish and I wonder if it might cause issues on the backend, but so far it seems to work.