{"id":22229,"date":"2025-09-20T17:00:00","date_gmt":"2025-09-20T11:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=22229"},"modified":"2025-11-06T10:49:37","modified_gmt":"2025-11-06T05:19:37","slug":"how-to-create-a-custom-form-in-hyva","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-create-a-custom-form-in-hyva\/","title":{"rendered":"How to Create a Custom Form in Hyv\u00e4: A Step-by-Step Guide"},"content":{"rendered":"\n

While using the Hyv\u00e4 theme in Magento 2, you may have already encountered the need to create a custom form.<\/p>\n\n\n\n

Magento by default does not provide any form builders such as contact forms, request-a-quote forms, feedback forms, or similar functionality.<\/p>\n\n\n\n

After all, Magento with Hyv\u00e4 is not a CMS- it\u2019s primarily a frontend theme designed for performance and flexibility.<\/p>\n\n\n\n

Below is a step-by-step guide to building a custom form in the Hyv\u00e4 theme.<\/p>\n\n\n\n

Steps to Create a Custom Form in Hyv\u00e4<\/h2>\n\n\n\n

All the steps would remain the same as the Magento 2 module development excluding some of the steps. <\/p>\n\n\n\n

Let\u2019s check them all one by one.<\/p>\n\n\n\n

Step 1: Create a Directory <\/h3>\n\n\n\n

You will first need to create the directory with your preferred name under app\/code\/company Name\/module name.<\/p>\n\n\n\n

Let\u2019s say:<\/p>\n\n\n\n

app\/code\/Meetanshi\/Hyva-form<\/p>\n\n\n\n

Step 2: Create a Module.xml File<\/h3>\n\n\n\n

Create a module.xml <\/strong>file in the app\/code\/Meetanshi\/Hyva-form\/etc<\/strong> folder with the below code:<\/p>\n\n\n\n

<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n\n<module name=\"Meetanshi_HyvaForm\" setup_version=\"1.0.0\"> <\/module>\n\n<\/config><\/pre>\n\n\n\n
The below code registers Meetanshi_HyvaForm so Magento recognizes it as a valid module and loads its features.<\/p>\n\n\n\n
Step 3: Create a Registration.php File<\/h3>\n\n\n\n
Create a registration.php<\/strong> file in the app\/code\/Meetanshi\/Hyva-form <\/strong>folder to register the module. Implement the below code:<\/p>\n\n\n\n
<?php\n\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n\n\u00a0\u00a0\u00a0\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n\n\u00a0\u00a0\u00a0'Meetanshi_HyvaForm',\n\n\u00a0\u00a0\u00a0__DIR__\n\n);<\/pre>\n\n\n\n
This code is responsible for registering the new module ‘Meetanshi_HyvaForm’ with Magento’s system when the application loads.<\/p>\n\n\n\n
Step 4: Add a Routes.xml File <\/h3>\n\n\n\n
Define the router with routes.xml<\/strong> file in the app\/code\/Meetanshi\/Hyva-form\/etc\/frontend <\/strong>folder with the below code:<\/p>\n\n\n\n
<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App\/etc\/routes.xsd\">\n\n<router id=\"standard\">\n\n<route id=\"meetanshi_hyvaform\" frontName=\"hyvaform\">\n\n<module name=\"Meetanshi_HyvaForm\"\/>\n\n<\/route>\n\n<\/router>\n\n<\/config><\/pre>\n\n\n\n
This defines a custom frontend route for the module Meetanshi_HyvaForm, setting how URLs are mapped to your module\u2019s controllers and actions.<\/p>\n\n\n\n
Step 5: Add an Index.php File <\/h3>\n\n\n\n
Create the Index.php<\/strong> file in the app\/code\/Meetanshi\/Hyva-form\/Controller\/Index <\/strong>folder with the below code:<\/p>\n\n\n\n
<?php\n\nnamespace Meetanshi\\HyvaForm\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Context;\n\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Index extends \\Magento\\Framework\\App\\Action\\Action\n\n{\n\n\u00a0\u00a0\u00a0\/** @var\u00a0 \\Magento\\Framework\\View\\Result\\Page *\/\n\n\u00a0\u00a0\u00a0protected $resultPageFactory;\n\n\u00a0\u00a0\u00a0\/**\n\n\u00a0\u00a0\u00a0\u00a0* @param Context $context\n\n\u00a0\u00a0\u00a0\u00a0* @param PageFactory $resultPageFactory\n\n\u00a0\u00a0\u00a0\u00a0*\/\n\n\u00a0\u00a0\u00a0public function __construct(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Magento\\Framework\\App\\Action\\Context $context,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Magento\\Framework\\View\\Result\\PageFactory $resultPageFactory\n\n\u00a0\u00a0\u00a0) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->resultPageFactory = $resultPageFactory;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::__construct($context);\n\n\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\/**\n\n\u00a0\u00a0\u00a0\u00a0* Hyva Form\n\n\u00a0\u00a0\u00a0\u00a0*\n\n\u00a0\u00a0\u00a0\u00a0* @return \\Magento\\Framework\\View\\Result\\PageFactory\n\n\u00a0\u00a0\u00a0\u00a0*\/\n\n\u00a0\u00a0\u00a0public function execute()\n\n\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$resultPage = $this->resultPageFactory->create();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$resultPage->getConfig()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->getTitle()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->prepend(__('Hyva Form'));\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $resultPage;\n\n\u00a0\u00a0\u00a0}\n\n}<\/pre>\n\n\n\n
Step 6: Add meetanshi_hyvaform_index_index.xml File<\/h3>\n\n\n\n
Create a meetanshi_hyvaform_index_index.xml<\/strong> file in the app\/code\/Meetanshi\/Hyva-form\/view\/frontend\/layout\/<\/strong> folder with the below code:<\/p>\n\n\n\n
<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"1column\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n\n<body>\n\n<update handle=\"hyva_form_validation\"\/>\n\n<referenceContainer name=\"content\">\n\n<block class=\"Magento\\Framework\\View\\Element\\Template\" name=\"meetanshi_hyvaform\" template=\"Meetanshi_HyvaForm::hyva\/hyva_custom_form.phtml\"\/>\n\n<\/referenceContainer>\n\n<\/body>\n\n<\/page><\/pre>\n\n\n\n
Step 7: Add helloworld.phtml File <\/h3>\n\n\n\n
Create a helloworld.phtml<\/strong> file in the app\/code\/Meetanshi\/Hyva-form\/view\/frontend\/templates\/hyva<\/strong> folder<\/p>\n\n\n\n
<?php\n\nuse Hyva\\Theme\\ViewModel\\ReCaptcha as HyvaRecaptcha;\n\n\/**\n\n\u00a0* @var \\Magento\\Framework\\View\\Element\\Template $block\n\n\u00a0* @var \\Magento\\Framework\\Escaper $escaper\n\n\u00a0*\/\n\n$recaptcha = $block->getData('recaptcha') ?? null;\n\n?>\n\n<form x-data=\"hyva.formValidation($el)\" @submit.prevent=\"onSubmit\">\n\n\u00a0\u00a0\u00a0\u00a0<?= $block->getBlockHtml('formkey') ?>\n\n\u00a0\u00a0\u00a0\u00a0<div class=\"field w-full required\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"label\" for=\"firstname\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span><?= $escaper->escapeHtml(__('First Name')) ?><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"control\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=\"firstname\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"firstname\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title=\"<?= $escaper->escapeHtmlAttr(__('First Name')) ?>\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"form-input\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data-validate='{\"required\": true}'\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<div class=\"field w-full required\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"label\" for=\"lastname\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span><?= $escaper->escapeHtml(__('Last Name')) ?><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"control\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=\"lastname\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"lastname\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title=\"<?= $escaper->escapeHtmlAttr(__('Last Name')) ?>\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"form-input\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data-validate='{\"required\": true}'\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<div class=\"field w-full required\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"label\" for=\"email\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span><?= $escaper->escapeHtml(__('Email Address')) ?><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"control\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=\"email\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"email\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title=\"<?= $escaper->escapeHtmlAttr(__('Email Address')) ?>\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"form-input\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data-validate='{\"required\": true,\"email\": true}'\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<div class=\"field w-full required\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"label\" for=\"message\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span><?= $escaper->escapeHtml(__('Message')) ?><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"control\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<textarea id=\"message\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"message\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title=\"<?= $escaper->escapeHtmlAttr(__('Message')) ?>\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"form-input\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data-validate='{\"required\": true}'\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0><\/textarea>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<?php if ($recaptcha instanceof HyvaRecaptcha): ?>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?= $recaptcha->render() ?>\n\n\u00a0\u00a0\u00a0\u00a0<?php endif; ?>\n\n\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn\">Submit<\/button>\n\n<\/form><\/pre>\n\n\n\n
The above code will generate one simple Hyva form with basic required field validation as shown. <\/p>\n\n\n
\n
\"Custom<\/figure>\n<\/div>\n\n\n
That\u2019s it.<\/p>\n\n\n\n
Go beyond the default Magento capabilities and tailor the frontend experience to your business needs by creating a custom form in the Hyv\u00e4 theme.<\/p>\n\n\n\n
Whether it\u2019s a adding JavaScript form validation<\/a>, contact form, request-a-quote form, or a feedback form, Hyv\u00e4 makes it flexible to implement lightweight, user-friendly, and performance-optimized forms.<\/p>\n\n\n\n
Custom forms give you full control to add fields, implement validations, and define data submission logic tailored to your business workflows.<\/p>\n\n\n\n
Need help building custom forms in Hyv\u00e4? Contact us<\/a> now. <\/p>\n","protected":false},"excerpt":{"rendered":"
While using the Hyv\u00e4 theme in Magento 2, you may have already encountered the need to create a custom form. Magento by default does not…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5869],"tags":[],"class_list":["post-22229","post","type-post","status-publish","format-standard","hentry","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=22229"}],"version-history":[{"count":8,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22229\/revisions"}],"predecessor-version":[{"id":24053,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22229\/revisions\/24053"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=22229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=22229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=22229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}