Step-by-step guide: How to create a custom form in Magento

Here is how you can create a custom, individually tailored form in Magento, easily using a form.phtml file.

 

 

Step 1: Create a form.phtml file in the "templates" folder.

 

 

1. Create a vendor directory in the frontend directory. To do this, navigate to the "app" folder, then to the "design" folder, where you can create the vendor directory. The path is as follows: app/design/frontend/VendorDirectory

 

2. Place the child theme inside the vendor directory, and create a subfolder named Magento_Contact.

 

3. Inside Magento_Contact, create a "templates" folder.

 

4. The form.phtml file should then be located inside the Templates folder.

 

5. The complete path is as follows:

    

   app/design/frontend/VendorDirectory/Childtheme/Magento_Contact/templates/form.phtml

 

 

Step 2: Content of the "form.phtml" file in the "templates" folder.

 

 

<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var \Magento\Contact\Block\ContactForm $block */
?>
<form class="form contact"
action="<?= $block->escapeUrl($block->getFormAction()) ?>"
id="contact-form"
method="post"
data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
<legend class="legend"><span><?= $block->escapeHtml(__('Message to Us')) ?></span></legend><br />
<div class="field note no-label"><?= $block->escapeHtml(__('Jot us a note and we’ll get back to you as quickly as possible.')) ?></div>
<div class="field name required">
<label class="label" for="name"><span><?= $block->escapeHtml(__('Name')) ?></span></label>
<div class="control">
<input name="name" id="name" title="<?= $block->escapeHtmlAttr(__('Name')) ?>" value="<?= $block->escapeHtmlAttr($this->helper('Magento\Contact\Helper\Data')->getPostValue('name') ?: $this->helper('Magento\Contact\Helper\Data')->getUserName()) ?>" class="input-text" type="text" data-validate="{required:true}"/>
</div>
</div>
<div class="field email required">
<label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
<div class="control">
<input name="email" id="email" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" value="<?= $block->escapeHtmlAttr($this->helper('Magento\Contact\Helper\Data')->getPostValue('email') ?: $this->helper('Magento\Contact\Helper\Data')->getUserEmail()) ?>" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
</div>
</div>
<div class="field telephone">
<label class="label" for="telephone"><span><?= $block->escapeHtml(__('Phone Number')) ?></span></label>
<div class="control">
<input name="telephone" id="telephone" title="<?= $block->escapeHtmlAttr(__('Phone Number')) ?>" value="<?= $block->escapeHtmlAttr($this->helper('Magento\Contact\Helper\Data')->getPostValue('telephone')) ?>" class="input-text" type="text" />
</div>
</div>
<div class="field comment required">
<label class="label" for="comment"><span><?= $block->escapeHtml(__('Your Message to Us')) ?></span></label>
<div class="control">
<textarea name="comment" id="comment" title="<?= $block->escapeHtmlAttr(__('Your Message to Us')) ?>" class="input-text" cols="5" rows="3" data-validate="{required:true}"><?= $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getPostValue('comment')) ?></textarea>
</div>
</div>
<?= $block->getChildHtml('form.additional.info') ?>
</fieldset>




Privacy Policy read







escapeHtml(**('SEND')) ?>



 

 

 

Step 3: You can insert the code snippet for loading the "form.phtml" file on any page where you want the contact form to appear.

 

{{block class="Magento\Contact\Block\ContactForm"
name="contactForm" template="Magento_Contact::form.phtml"}}

 

Please note that this is a basic guide for creating a customized form in Magento. You can further extend the form processing, validation, and other functionality according to your requirements.

 

Note: Be sure to perform these steps in a test environment before making changes to your live website to avoid potential problems.

 

We can help you set up and configure the form, resolve technical issues, and provide consulting as your Magento agency in Munich. Our goal is to provide you with a customized solution tailored to your individual requirements. Do not hesitate to contact us. We look forward to helping you with your Magento project and moving it forward successfully.