{"id":293746,"date":"2021-06-25T08:08:33","date_gmt":"2021-06-25T08:08:33","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=293746"},"modified":"2024-03-12T04:21:54","modified_gmt":"2024-03-12T04:21:54","slug":"magento-2-development-18-form-widget","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/","title":{"rendered":"Magento 2 Development 21: Form Widget"},"content":{"rendered":"\n<p>As promised in the last blog, here we will learn about how to add forms on the admin side with the form widget, which we will manage with Block class. This is a very popular technique and most of the time you will find forms are created with this technique. We can also use .phtml to create form by slight modification in this technique.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create the layout file<\/h3>\n\n\n\n<p>First of we will have to replace the ui component with a block. So let&#8217;s edit the layout file for that <em>view\/adminhtml\/layout\/blogmanager_manage_edit.xml<\/em><strong><em><strong>&nbsp;<\/strong><\/em><\/strong><\/p>\n\n\n\n<p>Updated code for <em>view\/adminhtml\/layout\/blogmanager_manage_edit.xml<\/em><strong><em><strong>&nbsp;<\/strong><\/em><\/strong> file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?xml version=&quot;1.0&quot;?&gt;\n&lt;page xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd&quot;&gt;\n    &lt;body&gt;\n        &lt;referenceContainer name=&quot;content&quot;&gt;\n            &lt;block class=&quot;Webkul\\BlogManager\\Block\\Adminhtml\\Blog\\Edit&quot; name=&quot;blog_edit&quot;\/&gt;\n        &lt;\/referenceContainer&gt;\n    &lt;\/body&gt;\n&lt;\/page&gt;<\/pre>\n\n\n\n<p>Here as you can see we have removed the uicomponent tag and added a block tag. So no code related to the ui component form will be executed now.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Edit Controller file to Edit the blog<\/h3>\n\n\n\n<p>Before creating the block class let&#8217;s modify the edit controller as well, <em>Controller\/Adminhtml\/Manage\/Edit.php<\/em><\/p>\n\n\n\n<p>Updated code for <em>Controller\/Adminhtml\/Manage\/Edit.php<\/em> file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\nnamespace Webkul\\BlogManager\\Controller\\Adminhtml\\Manage;\n\nuse Magento\\Backend\\App\\Action;\nuse Magento\\Framework\\Controller\\ResultFactory;\n\nclass Edit extends Action\n{\n    \/**\n     * @var \\Magento\\Framework\\Registry\n     *\/\n    protected $coreRegistry;\n\n    \/**\n     * @var \\Webkul\\BlogManager\\Model\\BlogFactory\n     *\/\n    protected $blogFactory;\n\n    \/**\n     * Dependency Initilization\n     *\n     * @param \\Magento\\Backend\\App\\Action\\Context $context\n     * @param \\Magento\\Framework\\Registry $coreRegistry\n     * @param \\Webkul\\BlogManager\\Model\\BlogFactory $blogFactory\n     *\/\n    public function __construct(\n        \\Magento\\Backend\\App\\Action\\Context $context,\n        \\Magento\\Framework\\Registry $coreRegistry,\n        \\Webkul\\BlogManager\\Model\\BlogFactory $blogFactory\n    ) {\n        parent::__construct($context);\n        $this-&gt;coreRegistry = $coreRegistry;\n        $this-&gt;blogFactory = $blogFactory;\n    }\n\n    \/**\n     * Provides content\n     *\n     * @return \\Magento\\Framework\\View\\Result\\Page\n     *\/\n    public function execute()\n    {\n        $blogId = $this-&gt;getRequest()-&gt;getParam(&#039;id&#039;);\n        $blogModel = $this-&gt;blogFactory-&gt;create()-&gt;load($blogId);\n        $this-&gt;coreRegistry-&gt;register(&#039;blog_data&#039;, $blogModel);\n\n        $resultPage = $this-&gt;resultFactory-&gt;create(ResultFactory::TYPE_PAGE);\n        $resultPage-&gt;getConfig()-&gt;getTitle()-&gt;prepend(__(&quot;Edit Blog&quot;));\n        return $resultPage;\n    }\n\n    \/**\n     * Check Autherization\n     *\n     * @return boolean\n     *\/\n    public function _isAllowed()\n    {\n        return $this-&gt;_authorization-&gt;isAllowed(&#039;Webkul_BlogManager::edit&#039;);\n    }\n}<\/pre>\n\n\n\n<p>The main change we did here is that we loaded the blog model based on the id that we get from the URL param. And we are storing the model with the help of the core registry. We will later retrieve the model when we need to fill in the form data.<\/p>\n\n\n\n<p><strong>What is a core registry?<\/strong><br>The core registry is used to store the global variables. You can store global variables via&nbsp;the register()&nbsp;method and fetch the value of variables via&nbsp;the registry()&nbsp;method. Magento registry stores data in memory that is specific to a particular request and for the duration of that request only.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Block file to Edit the blog<\/h3>\n\n\n\n<p>Now let&#8217;s create the block class, <em>Block\/Adminhtml\/Blog\/Edit.php<\/em><\/p>\n\n\n\n<p>Code for <em>Block\/Adminhtml\/Blog\/Edit.php<\/em> file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\nnamespace Webkul\\BlogManager\\Block\\Adminhtml\\Blog;\n\nclass Edit extends \\Magento\\Backend\\Block\\Widget\\Form\\Container\n{\n    \/**\n     * @var string\n     *\/\n    protected $_objectId;\n\n    \/**\n     * @var string\n     *\/\n    protected $_blockGroup;\n\n    \/**\n     * @var string\n     *\/\n    protected $_controller;\n\n    \/**\n     * @var Magento\\Backend\\Block\\Widget\\Button\\ButtonList\n     *\/\n    protected $buttonList;\n\n    \/**\n     * Dependency Initilization\n     *\n     * @return void\n     *\/\n    protected function _construct()\n    {\n        $this-&gt;_objectId = &#039;id&#039;;\n        $this-&gt;_blockGroup = &#039;Webkul_BlogManager&#039;;\n        $this-&gt;_controller = &#039;adminhtml_blog&#039;;\n        $this-&gt;buttonList-&gt;remove(&#039;delete&#039;);\n        parent::_construct();\n    }\n}<\/pre>\n\n\n\n<p>There are a few things to note in this code. First of all, we are using <strong>_construct()<\/strong> instead of <strong>__construct()<\/strong>, did you notice the difference? There is an underscore ( _ ) missing from the first one. We can think of _construct() as Magento&#8217;s constructor, which gets called inside the __construct(), which is PHP&#8217;s constructor or the actual constructor.<\/p>\n\n\n\n<p>We can not assign any string to <strong>$this-&gt;_blockGroup<\/strong> it must be the module name. And similarly, for <strong>$this-&gt;_controller<\/strong> we need to assign the current folder path relative to the Block folder, which is <em>Adminhtml\/Blog<\/em> , which gets converted to <em>adminhtml_blog<\/em>. If we do not follow these patterns then we will get exceptions.<\/p>\n\n\n\n<p>From this &#8220;constructor&#8221;, we can manage the buttons. That means we can add new buttons and update or delete default buttons which are save, delete, reset, and back.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Block file to create a Form<\/h3>\n\n\n\n<p>Now we need to create a folder parallel to this class with the same name as the class name i.e. <strong>Edit<\/strong>. And inside that we need to create a class named <strong>Form<\/strong>. So the file will be like <em>Block\/Adminhtml\/Blog\/Edit\/Form.php<\/em><\/p>\n\n\n\n<p>Code for <em>Block\/Adminhtml\/Blog\/Edit\/Form.php<\/em> file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\nnamespace Webkul\\BlogManager\\Block\\Adminhtml\\Blog\\Edit;\n\nclass Form extends \\Magento\\Backend\\Block\\Widget\\Form\\Generic\n{\n    \/**\n     * Prepare form data\n     *\n     * @return \\Magento\\Backend\\Block\\Widget\\Form\n     *\/\n    protected function _prepareForm()\n    {\n        $model = $this-&gt;_coreRegistry-&gt;registry(&#039;blog_data&#039;);\n\n        $form = $this-&gt;_formFactory-&gt;create(\n            &#091;&#039;data&#039; =&gt; &#091;\n                            &#039;id&#039; =&gt; &#039;edit_form&#039;,\n                            &#039;enctype&#039; =&gt; &#039;multipart\/form-data&#039;,\n                            &#039;action&#039; =&gt; $this-&gt;getData(&#039;action&#039;),\n                            &#039;method&#039; =&gt; &#039;post&#039;\n                        ]\n            ]\n        );\n\n        $form-&gt;setHtmlIdPrefix(&#039;blogmanager_&#039;);\n\n        $fieldset = $form-&gt;addFieldset(\n            &#039;base_fieldset&#039;,\n            &#091;&#039;legend&#039; =&gt; __(&#039;Blog Data&#039;), &#039;class&#039; =&gt; &#039;fieldset-wide&#039;]\n        );\n\n        $fieldset-&gt;addField(&#039;entity_id&#039;, &#039;hidden&#039;, &#091;&#039;name&#039; =&gt; &#039;entity_id&#039;]);\n\n        $fieldset-&gt;addField(\n            &#039;title&#039;,\n            &#039;text&#039;,\n            &#091;\n                &#039;name&#039; =&gt; &#039;title&#039;,\n                &#039;label&#039; =&gt; __(&#039;Title&#039;),\n                &#039;id&#039; =&gt; &#039;title&#039;,\n                &#039;title&#039; =&gt; __(&#039;Title&#039;),\n                &#039;class&#039; =&gt; &#039;required-entry&#039;,\n                &#039;required&#039; =&gt; true,\n            ]\n        );\n\n        $fieldset-&gt;addField(\n            &#039;content&#039;,\n            &#039;textarea&#039;,\n            &#091;\n                &#039;name&#039; =&gt; &#039;content&#039;,\n                &#039;label&#039; =&gt; __(&#039;Content&#039;),\n                &#039;id&#039; =&gt; &#039;content&#039;,\n                &#039;title&#039; =&gt; __(&#039;Content&#039;),\n                &#039;class&#039; =&gt; &#039;required-entry&#039;,\n                &#039;required&#039; =&gt; true,\n            ]\n        );\n\n        $fieldset-&gt;addField(\n            &#039;status&#039;,\n            &#039;select&#039;,\n            &#091;\n                &#039;name&#039; =&gt; &#039;status&#039;,\n                &#039;label&#039; =&gt; __(&#039;Status&#039;),\n                &#039;options&#039; =&gt; &#091;0=&gt;__(&#039;Disabled&#039;), 1=&gt;__(&#039;Enabled&#039;)],\n                &#039;id&#039; =&gt; &#039;status&#039;,\n                &#039;title&#039; =&gt; __(&#039;Status&#039;),\n                &#039;class&#039; =&gt; &#039;required-entry&#039;,\n                &#039;required&#039; =&gt; true,\n            ]\n        );\n        \n        $form-&gt;setValues($model-&gt;getData());\n        $form-&gt;setUseContainer(true);\n        $this-&gt;setForm($form);\n\n        return parent::_prepareForm();\n    }\n}<\/pre>\n\n\n\n<p>Here if you have any other class dependency then you can create the constructor based on the parent class&#8217;s constructor. <\/p>\n\n\n\n<p>We will create and prepare the form with the help of the <strong>_prepareForm<\/strong> method.<\/p>\n\n\n\n<p>Notice here we have used the core registry to retrieve the loaded model. We can also load the blog model with the factory class again but Magento generally uses this approach.<\/p>\n\n\n\n<p>Now, we have created the actual form itself with various form attributes with the help of <strong>$this-&gt;_formFactory-&gt;create()<\/strong>.<\/p>\n\n\n\n<p>We can add multiple fieldsets with <strong>$form-&gt;addFieldset()<\/strong>. And now in the fieldset, we can add different fields with the <strong>$fieldset-&gt;addField()<\/strong> method. <\/p>\n\n\n\n<p>In <strong>addField<\/strong>, we have passed three arguments. The first argument will be used for setting the field data, the second argument is to specify the type of the field and the third argument is an array which is used to manage the field&#8217;s attributes such as name, class, etc.<\/p>\n\n\n\n<p>To set the values in the fields based on the data we get in the model. We have written <strong>$form-&gt;setValues($model-&gt;getData());<\/strong>. After that we need to set the form as <strong>$this-&gt;setForm($form);<\/strong> so that it shows up.<\/p>\n\n\n\n<p>Now if we click on the edit button we will see the form as shown below,<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"499\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-1200x499.png\" alt=\"edit form\" class=\"wp-image-293822\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-1200x499.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-300x125.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-250x104.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-768x319.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-1536x638.png 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06.png 1819w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Controller to Save the form<\/h3>\n\n\n\n<p>Now that we have created the form. Let&#8217;s create the save controller as <em>Controller\/Adminhtml\/Manage\/Save.php<\/em><\/p>\n\n\n\n<p>Code for <em>Controller\/Adminhtml\/Manage\/Save.php<\/em> file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\nnamespace Webkul\\BlogManager\\Controller\\Adminhtml\\Manage;\n\nuse Magento\\Backend\\App\\Action;\nuse Magento\\Backend\\App\\Action\\Context;\n\nclass Save extends Action\n{\n    \/**\n     * @var \\Webkul\\BlogManager\\Model\\BlogFactory\n     *\/\n    protected $blogFactory;\n\n    \/**\n     * Dependency Initilization\n     *\n     * @param Context $context\n     * @param \\Webkul\\BlogManager\\Model\\BlogFactory $blogFactory\n     *\/\n    public function __construct(\n        Context $context,\n        \\Webkul\\BlogManager\\Model\\BlogFactory $blogFactory\n    ) {\n        $this-&gt;blogFactory = $blogFactory;\n        parent::__construct($context);\n    }\n\n    \/**\n     * Provides content\n     *\n     * @return Magento\\Framework\\Controller\\Result\\Redirect\n     *\/\n    public function execute()\n    {\n        $resultRedirect = $this-&gt;resultRedirectFactory-&gt;create();\n        $data = $this-&gt;getRequest()-&gt;getParams();\n        if (isset($data&#091;&#039;entity_id&#039;]) &amp;&amp; $data&#091;&#039;entity_id&#039;]) {\n            $model = $this-&gt;blogFactory-&gt;create()-&gt;load($data&#091;&#039;entity_id&#039;]);\n            $model-&gt;setTitle($data&#091;&#039;title&#039;])\n                -&gt;setContent($data&#091;&#039;content&#039;])\n                -&gt;setStatus($data&#091;&#039;status&#039;])\n                -&gt;save();\n            $this-&gt;messageManager-&gt;addSuccess(__(&#039;You have updated the blog successfully.&#039;));\n        }    \n        return $resultRedirect-&gt;setPath(&#039;*\/*\/&#039;);\n    }\n\n    \/**\n     * Check Autherization\n     *\n     * @return boolean\n     *\/\n    public function _isAllowed()\n    {\n        return $this-&gt;_authorization-&gt;isAllowed(&#039;Webkul_BlogManager::save&#039;);\n    }\n}<\/pre>\n\n\n\n<p>We have seen all of these codes already. So you should be familiar with them by now. If not then please revisit those blogs.<\/p>\n\n\n\n<p>Now when you edit and save the blog. You should see something like below,<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"800\" height=\"348\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/ezgif.com-gif-maker-4.gif\" alt=\"edit form\" class=\"wp-image-293827\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<p>Next Blog -&gt; <a href=\"https:\/\/webkul.com\/blog\/magento-2-development-19-multi-tab-form\/\">Magento 2 Development 22: Multi tab form<\/a><\/p>\n\n\n\n<p>Previous Blog -&gt;\u00a0<a href=\"https:\/\/webkul.com\/blog\/magento-development-17-uicomponent-form\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Development 20: uiComponent form<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As promised in the last blog, here we will learn about how to add forms on the admin side with the form widget, which we will manage with Block class. This is a very popular technique and most of the time you will find forms are created with this technique. We can also use .phtml <a href=\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":201,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[2056,2070],"class_list":["post-293746","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-magento","tag-magento2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Magento 2 Development 21: Form Widget - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 Development 21: Form Widget - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"As promised in the last blog, here we will learn about how to add forms on the admin side with the form widget, which we will manage with Block class. This is a very popular technique and most of the time you will find forms are created with this technique. We can also use .phtml [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-25T08:08:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-12T04:21:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-1200x499.png\" \/>\n<meta name=\"author\" content=\"Sanjay Chouhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sanjay Chouhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/\"},\"author\":{\"name\":\"Sanjay Chouhan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\"},\"headline\":\"Magento 2 Development 21: Form Widget\",\"datePublished\":\"2021-06-25T08:08:33+00:00\",\"dateModified\":\"2024-03-12T04:21:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/\"},\"wordCount\":824,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-1200x499.png\",\"keywords\":[\"magento\",\"Magento2\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/\",\"name\":\"Magento 2 Development 21: Form Widget - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-1200x499.png\",\"datePublished\":\"2021-06-25T08:08:33+00:00\",\"dateModified\":\"2024-03-12T04:21:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06.png\",\"width\":1819,\"height\":756},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento 2 Development 21: Form Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\",\"name\":\"Sanjay Chouhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sanjay Chouhan\"},\"sameAs\":[\"https:\/\/www.instagram.com\/sanjaychouhansc\/\",\"https:\/\/in.linkedin.com\/in\/scchouhansanjay\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Magento 2 Development 21: Form Widget - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/","og_locale":"en_US","og_type":"article","og_title":"Magento 2 Development 21: Form Widget - Webkul Blog","og_description":"As promised in the last blog, here we will learn about how to add forms on the admin side with the form widget, which we will manage with Block class. This is a very popular technique and most of the time you will find forms are created with this technique. We can also use .phtml [...]","og_url":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2021-06-25T08:08:33+00:00","article_modified_time":"2024-03-12T04:21:54+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-1200x499.png","type":"","width":"","height":""}],"author":"Sanjay Chouhan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sanjay Chouhan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/"},"author":{"name":"Sanjay Chouhan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462"},"headline":"Magento 2 Development 21: Form Widget","datePublished":"2021-06-25T08:08:33+00:00","dateModified":"2024-03-12T04:21:54+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/"},"wordCount":824,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-1200x499.png","keywords":["magento","Magento2"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/","url":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/","name":"Magento 2 Development 21: Form Widget - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06-1200x499.png","datePublished":"2021-06-25T08:08:33+00:00","dateModified":"2024-03-12T04:21:54+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/06\/2021-06-25_13-06.png","width":1819,"height":756},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento-2-development-18-form-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Magento 2 Development 21: Form Widget"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462","name":"Sanjay Chouhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sanjay Chouhan"},"sameAs":["https:\/\/www.instagram.com\/sanjaychouhansc\/","https:\/\/in.linkedin.com\/in\/scchouhansanjay"],"url":"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/293746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/201"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=293746"}],"version-history":[{"count":11,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/293746\/revisions"}],"predecessor-version":[{"id":393988,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/293746\/revisions\/393988"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=293746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=293746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=293746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}