Title: Forminator create chart
Last modified: September 19, 2022

---

# Forminator create chart

 *  Resolved [topdev1](https://wordpress.org/support/users/topdev1/)
 * (@topdev1)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/forminator-create-chart/)
 * Hi! I would like to use value from Input field from the form to build an instant
   chart with js (once user entered the value). How to do it?
    I’ve seen that it
   is possible to operate with values from fields [https://wordpress.org/support/topic/if-else-statement-number-range/](https://wordpress.org/support/topic/if-else-statement-number-range/).
   However, I cannot make it work. I’ve put “forminator-field-text-1” name in Styling
   of my input field. Then put the code in “Custom HTML” block of my website together
   with form. But nothing happens. Please help, many thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Kris – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport13/)
 * (@wpmudevsupport13)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/forminator-create-chart/#post-16024850)
 * Hi [@topdev1](https://wordpress.org/support/users/topdev1/)
 * I hope you are doing good today.
 * Are you sure you use the correct field ID?
 * 1. Please share a full code you use now
    2. Export your form, upload it to google
   drive or dropbox and share a link in your next reply so we could take a closer
   look.
 * Kind Regards,
    Kris
 *  Thread Starter [topdev1](https://wordpress.org/support/users/topdev1/)
 * (@topdev1)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/forminator-create-chart/#post-16025905)
 * Hi [@wpmudevsupport13](https://wordpress.org/support/users/wpmudevsupport13/),
   thanks for the fast reply!
    Here are my files. [https://drive.google.com/drive/folders/1JwaoA4ot00eXdTpYreiLREvIq2_DfeRx?usp=sharing](https://drive.google.com/drive/folders/1JwaoA4ot00eXdTpYreiLREvIq2_DfeRx?usp=sharing)
   My goal eventually is to use input value from the field and create chart by plugging
   the value for example in Google Charts (i.e. here [https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_pie_chart](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_pie_chart))
   Many thanks for your help!
 *  Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/forminator-create-chart/#post-16031512)
 * Hi [@topdev1](https://wordpress.org/support/users/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
 *  Thread Starter [topdev1](https://wordpress.org/support/users/topdev1/)
 * (@topdev1)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/forminator-create-chart/#post-16044454)
 * [@wpmudev-support8](https://wordpress.org/support/users/wpmudev-support8/), perfect,
   exactly what I need! Thank you very much!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Forminator create chart’ is closed to new replies.

 * ![](https://ps.w.org/forminator/assets/icon-256x256.gif?rev=3443182)
 * [Forminator Forms – Contact Form, Payment Form & Custom Form Builder](https://wordpress.org/plugins/forminator/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/forminator/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/forminator/)
 * [Active Topics](https://wordpress.org/support/plugin/forminator/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/forminator/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/forminator/reviews/)

 * 4 replies
 * 3 participants
 * Last reply from: [topdev1](https://wordpress.org/support/users/topdev1/)
 * Last activity: [3 years, 8 months ago](https://wordpress.org/support/topic/forminator-create-chart/#post-16044454)
 * Status: resolved