Injecting CSS or JS code into the iframes

[fidoboy]

In previous versions (< 3.0) I was able to inject my custom code (JS and CSS) using this:

https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/style-givewp-iframes.php

or this:

https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/enqueue-style-for-givewp-iframes.php

But it seems that it's not working now. There is any alternative to those snippets? Thanks in advance.

[JoshuaHungDinh]

Hey @fidoboy, with 3.0 you can add custom CSS to your form right in the Visual Form Builder. While in Design Mode you can view changes in real time and have access to a "Custom Styles" setting.

[jonwaldstein]

@fidoboy to inject javascript (and css) programitically into a (v3) form created with the visual form builder you can use the givewp_donation_form_enqueue_scripts action and the native WordPress wp_enqueue functions, example:

add_action('givewp_donation_form_enqueue_scripts', function() {
  wp_enqueue_script();
  wp_enqueue_style();
});

[fidoboy]

@fidoboy to inject javascript (and css) programitically into a (v3) form created with the visual form builder you can use the givewp_donation_form_enqueue_scripts action and the native WordPress wp_enqueue functions, example:

add_action('givewp_donation_form_enqueue_scripts', function() {
  wp_enqueue_script();
  wp_enqueue_style();
});

Thanks a lot. I'll try and report back if it works.

[fidoboy]

@fidoboy to inject javascript (and css) programitically into a (v3) form created with the visual form builder you can use the givewp_donation_form_enqueue_scripts action and the native WordPress wp_enqueue functions, example:

add_action('givewp_donation_form_enqueue_scripts', function() {
  wp_enqueue_script();
  wp_enqueue_style();
});

It doesn't seems to work. I'm doing this into functions.php

add_action('givewp_donation_form_enqueue_scripts', function() { wp_add_inline_script( 'give_custom', 'console.log( "TESTING FUNCTION" ); ' ); });

I've looked at console and there is nothing. Also into the page source code. It doesn't work at all. I'm using an iFrame to display the form

[jonwaldstein]

@fidoboy In order to use wp_add_inline_script - you would need to hook into an already registered script. I would not recommend hooking into an existing givewp script at this time, however you could register your own script using wp_enqueue_script() and then use wp_add_inline_script using the registered script name.

Example:

add_action("givewp_donation_form_enqueue_scripts", function(){
    wp_enqueue_script('fidoboy-givewp-custom-script', plugin_dir_url(__FILE__) . 'custom.js', [], '', true);
    wp_add_inline_script('fidoboy-givewp-custom-script', 'console.log("Hello World")');
});

[fidoboy]

@fidoboy In order to use wp_add_inline_script - you would need to hook into an already registered script. I would not recommend hooking into an existing givewp script at this time, however you could register your own script using wp_enqueue_script() and then use wp_add_inline_script using the registered script name.

Example:

add_action("givewp_donation_form_enqueue_scripts", function(){
    wp_enqueue_script('fidoboy-givewp-custom-script', plugin_dir_url(__FILE__) . 'custom.js', [], '', true);
    wp_add_inline_script('fidoboy-givewp-custom-script', 'console.log("Hello World")');
});

But I don't need to load a JS file, just do inline code. What's the problem with "give_custom"? Is it already registered by the plugin? I choosed a random one name

[jonwaldstein]

@fidoboy

From the WordPress docs about wp_add_inline_script

Code will only be added if the script is already in the queue.

The only way to add inline would be to use an already registered script (name). This is why I suggested enqueue'ing your own script first. Out of curiosity, what you trying to accomplish with inline js?

[fidoboy]

@fidoboy

From the WordPress docs about wp_add_inline_script

Code will only be added if the script is already in the queue.

The only way to add inline would be to use an already registered script (name). This is why I suggested enqueue'ing your own script first. Out of curiosity, what you trying to accomplish with inline js?

I've a small code which sends a message to parent and then page is automatically scrolled up when user push on the CONTINUE button. It was working with no problem in previous versions, using a already registered handler from GiveWP. But now it doesn't work.

What it's a nonsense is to enqueue a empty script just to add a small piece of JS code. So there must be a better solution.

[jonwaldstein]

@fidoboy got it thanks, also is this for an existing (v2) form or one that uses the visual donation form builder (v3)? I think we were under the impression it was for the latter which would not apply to the older style of forms (GiveWP v2).

What it's a nonsense is to enqueue a empty script just to add a small piece of JS code. So there must be a better solution.

This is honestly not something we anticipated folks would be doing - but if it is, we are open to creating a solution.

[fidoboy]

This is honestly not something we anticipated folks would be doing - but if it is, we are open to creating a solution.

Well, there is a very annoying behaviour when using mobile devices then you can press the CONTINUE button because if the next step is smaller than current, screen is left empty so you need to suppose that the content is slided up. I created a small javascript to solve the issue, so when the user clic on the button the page is automagically scrolled to the form top position.

[fidoboy]

@fidoboy got it thanks, also is this for an existing (v2) form or one that uses the visual donation form builder (v3)? I think we were under the impression it was for the latter which would not apply to the older style of forms (GiveWP v2).

What it's a nonsense is to enqueue a empty script just to add a small piece of JS code. So there must be a better solution.

This is honestly not something we anticipated folks would be doing - but if it is, we are open to creating a solution.

My code was working fine until v3. And now I'm trying to make it work again. All I need is to inject a small piece of javascript into the iframed page to get it working. But it seems that the WordPress guys make the things a bit complicated. Can understand why you need to enqueue a JS file just to put a small snippet

[jonwaldstein]

@fidoboy does this form in question use the "Visual Form Builder" or is it using the pre-3.0 form settings?

[fidoboy]

Now it's using the new visual form build

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 14 additional days. Note, if this Issue is reporting a bug, please reach out to our support at https://givewp.com/support. If this is a feature request, please see our feedback board at feedback.givewp.com — that’s the best place to make feature requests, unless you’re providing a PR.

[github-actions[bot]]

This issue was closed because it has been stalled for an additional 14 days with no activity.