Title: Graphical Interface
Last modified: December 30, 2022

---

# Graphical Interface

 *  Resolved [hheyhey568](https://wordpress.org/support/users/hheyhey568/)
 * (@hheyhey568)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/graphical-interface-2/)
 * Hello CFF Team,
 * Is there a way to add graphical interface to the form. For example , I want to
   draw a line and then assign a input fields and calculated fields to it.
 * regards,

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

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/graphical-interface-2/#post-16329487)
 * Hello [@hheyhey568](https://wordpress.org/support/users/hheyhey568/)
 * I’m sorry, but I don’t understand your question.
 * Best regards.
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/graphical-interface-2/#post-16331518)
 * Hello [@hheyhey568](https://wordpress.org/support/users/hheyhey568/)
 * Could you please give me additional details?
 * Best regards.
 *  Thread Starter [hheyhey568](https://wordpress.org/support/users/hheyhey568/)
 * (@hheyhey568)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/graphical-interface-2/#post-16348850)
 * Hello CFF Team,
 * Sorry for delay in reply. I have shared the picture at the following location.
 * I want that when I click rectangle box then it opens Calculated field form which
   has input and results.
 * When I click the blue arrow , it opens different calculated field form.
 * Please check if this can be done in CFF or not.
 * [https://www.processfunda.com/wp-content/uploads/2023/01/Screenshot-2023-01-06-235901.jpg](https://www.processfunda.com/wp-content/uploads/2023/01/Screenshot-2023-01-06-235901.jpg)
 * regards
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/graphical-interface-2/#post-16348884)
 * Hello [@hheyhey568](https://wordpress.org/support/users/hheyhey568/)
 * The plugin includes two operations IGNOREFIELD and ACTIVATEFIELD to disable or
   enable fields.
 * For example, you can insert a DIV field (I’ll assume it is the fieldname1) and
   enter the class name `ignorefield` through its “Add CSS Layout Keywords” attribute.
   And then, insert the entry and calculated fields inside the DIV one.
 * Now, you can insert an “HTML Content” field (outside the DIV field) with the 
   img tag as its content:
 *     ```wp-block-code
       <img src="https://www.processfunda.com/wp-content/uploads/2023/01/Screenshot-2023-01-06-235901.jpg" style="cursor:pointer" onclick="ACTIVATEFIELD('fieldname1');">
       ```
   
 * As you can see the image tag includes the onclick event to activate the DIV field.
 * If you want to disable the DIV field by coding, then you should call the IGNOREFIELD
   operation ( `IGNOREFIELD('fieldname1');` )
 * Best regards.
 *  Thread Starter [hheyhey568](https://wordpress.org/support/users/hheyhey568/)
 * (@hheyhey568)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/graphical-interface-2/#post-16349654)
 * Thank a lot. We are almost there.
 * Lets say in above image which I had shared, there are 4 components. One tank (
   red color) and 3 Nos of arrow of blue , purple and green color. Is there any 
   way by which I can click all of these 4 components from the same one image? By
   doing so , I want to perform 4 Nos of different calculation for the user as per
   what user has clicked but image will be only one.
 * Appreciate your reply , thanks
 * regards,
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [3 years, 5 months ago](https://wordpress.org/support/topic/graphical-interface-2/#post-16350007)
 * Hello [@hheyhey568](https://wordpress.org/support/users/hheyhey568/)
 * Your question is not about our plugin. It is a basic HTML concept called Image
   Maps. Please, learn more about image maps by visiting the following link:
 * [https://www.w3schools.com/htmL/html_images_imagemap.asp](https://www.w3schools.com/htmL/html_images_imagemap.asp)
 * If you need a custom coding service to implement your project, you can contact
   us through the plugin website: [Custom Coding Service](https://cff.dwbooster.com/customization)
 * Best regards.
    -  This reply was modified 3 years, 5 months ago by [codepeople](https://wordpress.org/support/users/codepeople/).

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

The topic ‘Graphical Interface’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [3 years, 5 months ago](https://wordpress.org/support/topic/graphical-interface-2/#post-16350007)
 * Status: resolved