{"id":174572,"date":"2018-10-30T13:00:02","date_gmt":"2018-10-30T13:00:02","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=174572"},"modified":"2018-10-30T03:46:34","modified_gmt":"2018-10-30T03:46:34","slug":"how-to-build-custom-forminator-add-ons-using-the-developer-api","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-build-custom-forminator-add-ons-using-the-developer-api\/","title":{"rendered":"How To Build Custom Forminator Add-ons Using The Developer API"},"content":{"rendered":"<p>Forminator is an undercover superhero. On the surface, <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-form-plugin-forminator\/\" target=\"_blank\">Forminator<\/a> appears to be an unassuming form plugin, but if you take the time to look through the <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/forminator-api-docs\/\" target=\"_blank\">Forminator API<\/a>, you&#8217;ll see that beneath those hipster glasses and vest, there is a beast waiting to be unleashed.<\/p>\n<p>Unlike other form plugins, Forminator&#8217;s API is not blocked off by a pricey paywall, but available to everyone. This opens up endless possibilities for customization and opportunities to create unique applications and extensions using Forminator.<\/p>\n<p>Better still, with Forminator as the foundation, you as a third party developer, can create custom business solutions for your clients that you can then sell on the open market for additional revenue streams. There is a lot of value waiting to be unlocked within the Forminator API.<\/p>\n<p>In this post, I&#8217;m going to show you how to utilize the API to build a simple dashboard plugin in WordPress; however, what we&#8217;re building is not focus of this tutorial. My goal is to use the building of this simple plugin as a way to teach you how to approach this on your own. I hope you&#8217;ll walk away with some ideas once you see what is available to you.<\/p>\n<h3>Teach a Man to Use an API and He&#8217;ll Create Extensions for a Lifetime<\/h3>\n<p>The Forminator API\u00a0supports CRUD (create, read, update, delete) operations on forms, polls, quizzes and their respective entries.<\/p>\n<p>Here&#8217;s some of the methods available:<\/p>\n<ul>\n<li>get_forms()<\/li>\n<li>delete_form()<\/li>\n<li>add_form()<\/li>\n<li>update_poll()<\/li>\n<li>delete_quizzes()<\/li>\n<li>get_form_fields_by_type()<\/li>\n<li>update_form_setting()<\/li>\n<li>move_form_field()<\/li>\n<li>add_form_entry()<\/li>\n<li>update_poll_entry()<\/li>\n<\/ul>\n<p>This is not an exhaustive list. The <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/forminator-api-docs\/\" target=\"_blank\">API documentation<\/a> outlines all the available methods that you can use to build your own plugins.<\/p>\n<p>For the purpose of this tutorial, we&#8217;re going to be building a custom widget for the WordPress dashboard that will show the most recent entries using the Forminator API. We&#8217;re going to be retrieving entries to display them in a widget, but you could also display them on a page or in a post with some modifications.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/10\/Webp.net-resizeimage-1.png\" alt=\"Screenshot of Forminator Dashboard Widget\" width=\"600\" height=\"461\" \/><figcaption class=\"wp-caption-text\">Here&#8217;s what we&#8217;re going to be building<\/figcaption><\/figure>\n<\/div>\n<p>We&#8217;re going to start by <a href=\"https:\/\/codex.wordpress.org\/Writing_a_Plugin#Creating_a_Plugin\" target=\"_blank\">creating a plugin in WordPress<\/a>. Since this is a Forminator Add-On, we only want the plugin to run if Forminator is active, so we&#8217;re going to use the &#8216;forminator_loaded&#8217; action and only set up our plugin if that action is called. This is important to include in your custom add-ons as well, but of course, you&#8217;ll name the function something appropriate for your unique situation.<\/p>\n<div class=\"gist\" data-gist=\"198c716050a6280d6430be6b3ece7299\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-01.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/198c716050a6280d6430be6b3ece7299.js?file=wpmu-dev-forminator-submissions-dashboard-widget-01.php\">Loading gist 198c716050a6280d6430be6b3ece7299<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<h3>Setting Up the Dashboard Widget<\/h3>\n<p>Now we can move on to creating the dashboard widget, but you can choose your own adventure here. Depending on what kind of plugin you\u2019re creating, you might not need to create a dashboard widget. You\u2019ll create something else instead.<\/p>\n<p>For this tutorial, we\u2019re going to use wp_dashboard_setup to add the widget to the WordPress dashboard page. We\u2019ll load our widget after the wp_dashboard_setup hook is called.<\/p>\n<p>In the add_forminator_dash_widget function below, we\u2019ll instantiate the Forminator_Submissions_Dash_Widget class, which we&#8217;ll create next.<\/p>\n<div class=\"gist\" data-gist=\"45eb896b8e4a186c55133afbf382ade7\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-02.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/45eb896b8e4a186c55133afbf382ade7.js?file=wpmu-dev-forminator-submissions-dashboard-widget-02.php\">Loading gist 45eb896b8e4a186c55133afbf382ade7<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<h3>Creating the Dashboard Widget Class<\/h3>\n<p>The following is from the WordPress codex:<\/p>\n<blockquote><p>All the functions in your Plugin need to have unique names that are different from functions in the WordPress core, other Plugins, and themes. For that reason, it is a good idea to use a unique function name prefix on all of your Plugin&#8217;s functions. A far superior possibility is to define your Plugin functions inside a class (which also needs to have a unique name).<\/p><\/blockquote>\n<p>With that said, we&#8217;re going to take the far superior route and start by creating a unique plugin class called Forminator_Submissions_Dash_Widget. Within the class we&#8217;ll store the class instance, identify what form ID to retrieve submissions from and enter how many submissions we&#8217;d like to display.<\/p>\n<p>I&#8217;m closing this code block with a bracket so that you won&#8217;t break your site if you copy and paste this in. Keep in mind that the code blocks in the remainder of this tutorial belong inside the bracket. If you want to use this plugin on your site, I recommend getting <a href=\"https:\/\/github.com\/wpmudev\/forminator-dashboard-widget\/blob\/master\/class-forminator-submissions-dash-widget.php\" target=\"_blank\">the code in it&#8217;s entirety on GitHub<\/a>, instead of copying and pasting each bit.<\/p>\n<div class=\"gist\" data-gist=\"a54b13cbf5226693cfa7ccca35c3dde5\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-03.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/a54b13cbf5226693cfa7ccca35c3dde5.js?file=wpmu-dev-forminator-submissions-dashboard-widget-03.php\">Loading gist a54b13cbf5226693cfa7ccca35c3dde5<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>In order to instantiate the plugin class, you\u2019ll need to get the class instance.<\/p>\n<div class=\"gist\" data-gist=\"c2949910c488f4ec92ec0dea8a8ace4f\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-04.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/c2949910c488f4ec92ec0dea8a8ace4f.js?file=wpmu-dev-forminator-submissions-dashboard-widget-04.php\">Loading gist c2949910c488f4ec92ec0dea8a8ace4f<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>We will then declare our constructor method (it is empty as there&#8217;s no prerequisites needed) and register the dashboard widget.<\/p>\n<div class=\"gist\" data-gist=\"14f76287d3b6099388e96e24cdf5300b\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-05.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/14f76287d3b6099388e96e24cdf5300b.js?file=wpmu-dev-forminator-submissions-dashboard-widget-05.php\">Loading gist 14f76287d3b6099388e96e24cdf5300b<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>We don\u2019t want to show our widget to all our WordPress users, so we\u2019ll add user_allowed() to check if the user is allowed to view the widget.<\/p>\n<p>Then we\u2019re going to set option defaults as a fallback in case our widget isn\u2019t configured. We&#8217;ll be creating a configuration box in the next section.<\/p>\n<p>If the user is not allowed to view the widget, we\u2019ll display a message, otherwise we\u2019ll get the submissions.<\/p>\n<div class=\"gist\" data-gist=\"b131d80b101159425c8584f33a06086c\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-06.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/b131d80b101159425c8584f33a06086c.js?file=wpmu-dev-forminator-submissions-dashboard-widget-06.php\">Loading gist b131d80b101159425c8584f33a06086c<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<h3>Configuring the Widget<\/h3>\n<p>In order for the user to be able to configure the widget, we&#8217;re going to add a configuration box that looks like this.<br \/>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/10\/Webp.net-resizeimage.png\" alt=\"Screenshot of Forminator Dashboard Widget Options\" width=\"600\" height=\"227\" \/><figcaption class=\"wp-caption-text\">Here is where you specify what form and how many entries to view<\/figcaption><\/figure>\n<\/div>\n<p>To do that, you&#8217;ll add the configure() method along with update and get options to make it possible to configure the widget.<\/p>\n<p>Let&#8217;s start with the configure() method:<\/p>\n<div class=\"gist\" data-gist=\"8936d4022193bc5cd60527677ce32d5c\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-07.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/8936d4022193bc5cd60527677ce32d5c.js?file=wpmu-dev-forminator-submissions-dashboard-widget-07.php\">Loading gist 8936d4022193bc5cd60527677ce32d5c<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>For the update, we need to fetch all dashboard widget options from the database, and create an array that merges the old options with the new ones.<\/p>\n<div class=\"gist\" data-gist=\"f60c39e394b8a2fbfab6e3244bf67afb\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-08.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/f60c39e394b8a2fbfab6e3244bf67afb.js?file=wpmu-dev-forminator-submissions-dashboard-widget-08.php\">Loading gist f60c39e394b8a2fbfab6e3244bf67afb<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Next, we\u2019ll retrieve our widget options from the database.<\/p>\n<div class=\"gist\" data-gist=\"61eacef6588214d774fea7c07e153136\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-09.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/61eacef6588214d774fea7c07e153136.js?file=wpmu-dev-forminator-submissions-dashboard-widget-09.php\">Loading gist 61eacef6588214d774fea7c07e153136<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<h3>Forminator to the Rescue<\/h3>\n<p>And now the part you&#8217;ve all been waiting for, populating the dashboard widget using the Forminator API.<\/p>\n<p>To get the submissions, we&#8217;ll use Forminator_API::get_form() and Forminator_API::get_form_entries(). We&#8217;ll also check if we&#8217;ve set the form ID whose entries we want to display. If this is not set, we will prompt the user to properly configure the dashboard plugin.<\/p>\n<p>We will also confirm that the form loaded successfully and render the submissions table.<\/p>\n<p>All of this will go into the get_submissions() method, like this:<\/p>\n<div class=\"gist\" data-gist=\"88c96b2465b0c3e4987906f226b9a36d\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-10.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/88c96b2465b0c3e4987906f226b9a36d.js?file=wpmu-dev-forminator-submissions-dashboard-widget-10.php\">Loading gist 88c96b2465b0c3e4987906f226b9a36d<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Now that we have our form and submission data, we need to create our markup render method. For this, we&#8217;ll use render_form_submissions(). We&#8217;ll display the data in an HTML table and showed the number of entries we specified earlier.<\/p>\n<div class=\"gist\" data-gist=\"162ab7c2ac1a9c53ade98c6829c15209\" data-gist-file=\"wpmu-dev-forminator-submissions-dashboard-widget-11.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/162ab7c2ac1a9c53ade98c6829c15209.js?file=wpmu-dev-forminator-submissions-dashboard-widget-11.php\">Loading gist 162ab7c2ac1a9c53ade98c6829c15209<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Your new widget is now fully functional and will retrieve submissions data using the Forminator API!<\/p>\n<p>If you&#8217;re interested in further customizing your WordPress admin area, check out this guide on <a href=\"https:\/\/wpmudev.com\/blog\/the-ultimate-wordpress-backend-tutorial-a-guide-to-customization\/\" target=\"_blank\">customizing the WordPress back end<\/a> and this one on <a href=\"https:\/\/wpmudev.com\/blog\/build-a-marketing-dashboard-in-wordpress-with-ultimate-branding\/\" target=\"_blank\">creating a marketing dashboard in WordPress<\/a>.<\/p>\n<p>If you\u2019d like to use this widget on your site, you can get the all the code for the <a href=\"https:\/\/github.com\/wpmudev\/forminator-dashboard-widget\/blob\/master\/class-forminator-submissions-dash-widget.php\" target=\"_blank\">Forminator Dashboard Widget on GitHub<\/a>.<\/p>\n<h3>Hasta La Vista, Baby<\/h3>\n<p>The dashboard widget was created for as a simple demo for this tutorial. This is only the beginning of what Forminator is capable of. Dive in to the <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/forminator-api-docs\/\" target=\"_blank\">Forminator API<\/a> and see what you can come up with.<\/p>\n<p>You can <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-form-plugin-forminator\/\" target=\"_blank\">get Forminator completely free here<\/a>.<\/p>\n<p>Interested in learning more about development? Start with our guide on <a href=\"https:\/\/wpmudev.com\/blog\/how-to-write-and-activate-a-function-in-wordpress\/\" target=\"_blank\">how to write functions<\/a>.<\/p>\n<p>We can&#8217;t wait to see what cool things you build on the Forminator framework.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Forminator is an undercover superhero. On the surface, Forminator appears to be an unassuming form plugin, but if you take the time to look through the Forminator API, you&#8217;ll see that beneath those hipster glasses and vest, there is a beast waiting to be unleashed. Unlike other form plugins, Forminator&#8217;s API is not blocked off [&hellip;]<\/p>\n","protected":false},"author":699634,"featured_media":174672,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[557,11260],"tags":[174,10964,10299,93,10969,778],"tutorials_categories":[],"class_list":["post-174572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-wpmu-dev-products","tag-php","tag-admin-area","tag-api","tag-dashboard","tag-forminator-api","tag-functions"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/174572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/699634"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=174572"}],"version-history":[{"count":25,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/174572\/revisions"}],"predecessor-version":[{"id":209395,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/174572\/revisions\/209395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/174672"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=174572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=174572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=174572"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=174572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}