Hi @topdev1
I suppose by “Custom HTML” block you mean block editor/Gutenberg block, right?
I would suggest a bit different solution.
Let’s stick to your form (the one that you shared):
– add it to the page using a standard form shortcode or “Form” block (without any additional code
– then add your JS code as MU plugin or via some separate “Custom JS” type of plugin.
The code to use could also be way simpler. Here’s example that simply takes the value form the first text field and shows “alert box” in browser (but that part – the “alert” line can be replaced with any other JS/jQuery code that you need):
jQuery(document).ready(function($) {
$('.forminator-field-text-1 input').change(function() {
var my_val = $(this).val();
alert( my_val );
});
});
Now, if you add it via some “Custom JS” plugin, you just need to use above code.
If you add it as MU plugin, then it would go like this:
– create an empty file with a .php extenions (e.g. forminator-custom-js-code.php)
– copy and paste following version of the code into that file
<?php
add_action( 'wp_footer', 'my_form_custom_js', 99);
function my_form_custom_js() {
?>
<script>
jQuery(document).ready(function($) {
$('.forminator-field-text-1 input').change(function() {
var my_val = $(this).val();
alert( my_val );
});
});
</script>
<?php
};
– save the file and upload it (using FTP, cPanel File Manager or similar way) to the “/wp-content/mu-plugins” folder of your site’s WordPress install.
If done correctly and you are using the very same form (the custom CSS selector that you added is important) it would work out of the box.
This is just an example and integrating it with any charts or other scripts would require more custom development which is beyond the scope of this support. But the basic foundation can be the same as in this line you
var my_val = $(this).val();
you get the value of your form field right in the ma_val variable so you can re-use it later in your code the way you want/need (I’m just triggering alert as an example).
Kind regards,
Adam
