{"id":25234,"date":"2024-08-24T08:19:54","date_gmt":"2024-08-24T08:19:54","guid":{"rendered":"https:\/\/ecommerce.folio3.com\/blog\/?p=25234"},"modified":"2024-08-24T08:19:54","modified_gmt":"2024-08-24T08:19:54","slug":"how-to-create-custom-form-in-magento-2","status":"publish","type":"post","link":"https:\/\/ecommerce.folio3.com\/blog\/how-to-create-custom-form-in-magento-2\/","title":{"rendered":"How To Create Custom Form In Magento 2 – Step By Step Guide"},"content":{"rendered":"

Introduction<\/b><\/h2>\n

Creating custom forms in Magento 2 is a powerful way to gather user input and manage data effectively within your online store. Whether you need a contact form, a survey, or a specialized data entry form, understanding the process of building custom forms can significantly enhance your store’s functionality. In this How To Create Custom Form In Magento 2 – Step By Step Guide, we will walk you through the entire process, from setting up the necessary modules to handling form submissions and managing the stored data.<\/p>\n

Magento 2’s modular architecture makes it relatively straightforward to create custom forms that integrate seamlessly with your existing setup. By following this comprehensive guide, you’ll not only learn the technical steps involved but also gain insights into best practices that will ensure your custom forms are secure, user-friendly, and optimized for performance.<\/span><\/p>\n

Custom forms can play a crucial role in enhancing user experience and driving engagement on your website. Whether you’re a developer looking to expand your Magento 2 skills or a store owner seeking to implement custom functionality, this guide is tailored to help you achieve your goals. Let\u2019s dive into the details of creating a custom form in Magento 2.<\/span><\/p>\n

Read Also:<\/strong> Creating an Online Store from Scratch with Magento<\/a><\/p>\n

Step 1: Create the Module Structure<\/b><\/h3>\n

First, let’s create the basic directory structure for our module:<\/span><\/p>\n

app\/code\/Folio3\/CustomForm<\/b><\/pre>\n
Inside the <\/span>CustomForm<\/b> directory, create the following folders<\/span><\/p>\n
    \n
  • etc<\/span><\/li>\n
  • view\/frontend\/layout<\/span><\/li>\n
  • Block<\/span><\/li>\n
  • view\/frontend\/templates<\/span><\/li>\n
  • Controller<\/span><\/li>\n<\/ul>\n
    Step 2: Declare the Module<\/b><\/h3>\n
    To declare the module, we need to create a <\/span>module.xml<\/span> file under <\/span>etc\/<\/span>:<\/span><\/p>\n
    Xml<\/span><\/p>\n
    <?xml version=\"1.0\"?><\/span>\r\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\"><\/span>\r\n \u00a0\u00a0\u00a0<module name=\"Folio3_CustomForm\" setup_version=\"1.0.0\"\/><\/span>\r\n<\/config><\/span><\/pre>\n
    Next, register the module in <\/span>registration.php<\/span>:<\/span><\/p>\n
    <?php<\/span>\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(<\/span>\r\n \u00a0\u00a0\u00a0\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,<\/span>\r\n \u00a0\u00a0\u00a0'Folio3_CustomForm',<\/span>\r\n \u00a0\u00a0\u00a0__DIR__<\/span>\r\n);<\/span><\/pre>\n
    Step 3: Create the Form Layout<\/b><\/h3>\n
    Now, we’ll define the layout XML to load our custom form. Create a new file <\/span>customform_index_index.xml<\/span> under <\/span>view\/frontend\/layout\/<\/span>:<\/span><\/p>\n
    <page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\"> <body> <referenceContainer name=\"content\"> <block class=\"Folio3\\CustomForm\\Block\\Form\" name=\"folio3.customform.form\" template=\"form.phtml\"\/> <\/referenceContainer> <\/body> <\/page><\/span><\/pre>\n
    Step 4: Create the Form Block<\/b><\/h3>\n
    In the <\/span>Block\/<\/span> directory, create a file <\/span>Form.php<\/span>:<\/span><\/p>\n
    <?php<\/span>\r\nnamespace Folio3\\CustomForm\\Block;<\/span>\r\n\r\nuse Magento\\Framework\\View\\Element\\Template;<\/span>\r\n\r\nclass Form extends Template<\/span>\r\n\r\n{<\/span>\r\n \u00a0\u00a0\u00a0public function getFormAction()<\/span>\r\n \u00a0\u00a0\u00a0{<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $this->getUrl('customform\/index\/post');<\/span>\r\n \u00a0\u00a0\u00a0}<\/span>\r\n}<\/span><\/pre>\n
    Step 5: Create the Form Template<\/b><\/h3>\n
    Now, create the form template <\/span>form.phtml<\/span> in <\/span>view\/frontend\/templates\/<\/span>:<\/span><\/p>\n
    <form action=\"<?= $block->getFormAction(); ?>\" method=\"post\"><\/span>\r\n \u00a0\u00a0\u00a0<div><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"name\">Name<\/label><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" name=\"name\" id=\"name\" required><\/span>\r\n \u00a0\u00a0\u00a0<\/div><\/span>\r\n \u00a0\u00a0\u00a0<div><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"email\">Email<\/label><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" name=\"email\" id=\"email\" required><\/span>\r\n \u00a0\u00a0\u00a0<\/div><\/span>\r\n \u00a0\u00a0\u00a0<div><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\">Submit<\/button><\/span>\r\n \u00a0\u00a0\u00a0<\/div><\/span>\r\n<\/form>\r\n<\/span><\/pre>\n
    Step 6: Handle Form Submission<\/b><\/h3>\n
    Create a controller to handle form submission in <\/span>Controller\/Index\/Post.php<\/span>:<\/span><\/p>\n
    <?php<\/span>\r\nnamespace Folio3\\CustomForm\\Controller\\Index;<\/span>\r\n\r\nuse Magento\\Framework\\App\\Action\\Action;<\/span>\r\n\r\nuse Magento\\Framework\\App\\Action\\Context;<\/span>\r\n\r\nuse Magento\\Framework\\Controller\\ResultFactory;<\/span>\r\n\r\nclass Post extends Action<\/span>\r\n{<\/span>\r\n \u00a0\u00a0\u00a0protected $resultFactory;<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0public function __construct(<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Context $context,<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ResultFactory $resultFactory<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0) {<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->resultFactory = $resultFactory;<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::__construct($context);<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0public function execute()<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0{<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$post = $this->getRequest()->getPostValue();<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!$post) {<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $this->_redirect('*\/*\/');<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$resultRedirect->setUrl($this->_redirect->getRefererUrl());<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Handle your form data here<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->messageManager->addSuccessMessage('Form submitted successfully.');<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $resultRedirect;<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n}<\/span><\/pre>\n
    Step 7: Add Routes<\/b><\/h3>\n
    Define the route for your form submission in <\/span>etc\/frontend\/routes.xml<\/span>:<\/span><\/p>\n
     <\/p>\n
    <config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App\/etc\/routes.xsd\"><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<router id=\"standard\"><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<route id=\"customform\" frontName=\"customform\"><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<module name=\"Folio3_CustomForm\" \/><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/route><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<\/router><\/span>\r\n\r\n<\/config><\/span><\/pre>\n
     <\/p>\n
    Step 8: Test Your Custom Form<\/b><\/h3>\n
    Finally, flush the cache and test your custom form by navigating to the following URL:<\/span><\/p>\n
    yourstore.com\/customform\/index\/index<\/span><\/pre>\n
    Conclusion<\/b><\/h2>\n
    You should see your custom form displayed on this page, and upon submission, it will handle the data as configured. Depending on your needs, you can extend the functionality to either send an email notification to the admin user or save the form data directly into the database.<\/span><\/p>\n
    For example, if you want to notify the admin when a user submits the form, you can configure Magento 2 to trigger an email with all the form details. This is particularly useful for contact forms or any submission where immediate action is required.<\/span><\/p>\n
    Alternatively, if you prefer to store the data for later processing, you can save the records in the database using Magento 2\u2019s model and resource model system. This approach is ideal for collecting survey responses, user feedback, or any information that you might want to analyze or export at a later time. The flexibility of Magento 2 allows you to choose the method that best suits your business requirements.<\/span><\/p>\n
    By integrating these functionalities, your custom form becomes a powerful tool for gathering and managing user input effectively, enhancing the overall capability of your Magento 2 store.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
    Introduction Creating custom forms in Magento 2 is a powerful way to gather user input and manage data effectively within your online store. Whether you need a contact form, a survey, or a specialized data entry form, understanding the process of building custom forms can significantly enhance your store’s functionality. In this How To Create<\/p>\n","protected":false},"author":57,"featured_media":25235,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[37],"class_list":{"0":"post-25234","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-uncategorized","8":"tag-magento"},"acf":[],"featured_image_data":{"src":"https:\/\/ecommerce.folio3.com\/blog\/wp-content\/uploads\/2024\/08\/Blue-White-Modern-Marketing-Strategy-Blog-Banner-12.jpg","alt":"magento","caption":""},"_links":{"self":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts\/25234"}],"collection":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/comments?post=25234"}],"version-history":[{"count":0,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts\/25234\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/media\/25235"}],"wp:attachment":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/media?parent=25234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/categories?post=25234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/tags?post=25234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}