寻求Magento 2前端表单提交并保存至数据库的扩展及教程

一、自定义模块核心步骤（手动实现更可控，避免现成模块的适配问题） #

如果找不到合适的现成模块，自己动手其实没那么复杂，我给你拆解关键操作步骤：

1. 搭建模块基础结构 #

先在app/code/YourVendor/FormSubmit/目录下创建基础文件：

• registration.php（模块注册文件）

  <?php
  \Magento\Framework\Component\ComponentRegistrar::register(
      \Magento\Framework\Component\ComponentRegistrar::MODULE,
      'YourVendor_FormSubmit',
      __DIR__
  );
  

• etc/module.xml（模块配置文件）

  <?xml version="1.0"?>
  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
      <module name="YourVendor_FormSubmit" setup_version="1.0.0">
          <sequence>
              <module name="Magento_Framework"/>
          </sequence>
      </module>
  </config>
  

2. 定义数据库表结构 #

创建Setup/InstallSchema.php来生成存储表单数据的表：

<?php
namespace YourVendor\FormSubmit\Setup;

use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\Setup\ModuleContextInterface;

class InstallSchema implements InstallSchemaInterface
{
    public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
    {
        $installer = $setup;
        $installer->startSetup();

        $table = $installer->getConnection()->newTable(
            $installer->getTable('yourvendor_form_submit')
        )->addColumn(
            'id',
            \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
            null,
            ['identity' => true, 'nullable' => false, 'primary' => true],
            '表单提交ID'
        )->addColumn(
            'name',
            \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
            255,
            ['nullable' => false],
            '提交人姓名'
        )->addColumn(
            'email',
            \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
            255,
            ['nullable' => false],
            '提交人邮箱'
        )->addColumn(
            'message',
            \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
            '2M',
            [],
            '提交内容'
        )->addColumn(
            'created_at',
            \Magento\Framework\DB\Ddl\Table::TYPE_TIMESTAMP,
            null,
            ['nullable' => false, 'default' => \Magento\Framework\DB\Ddl\Table::TIMESTAMP_INIT],
            '提交时间'
        );

        $installer->getConnection()->createTable($table);
        $installer->endSetup();
    }
}

3. 配置前端表单与路由 #

• 创建前端表单模板view/frontend/templates/form.phtml：

  <form id="custom-submit-form" action="<?php echo $block->getFormAction(); ?>" method="post">
      <div class="form-group">
          <label for="name">姓名：</label>
          <input type="text" name="name" id="name" required>
      </div>
      <div class="form-group">
          <label for="email">邮箱：</label>
          <input type="email" name="email" id="email" required>
      </div>
      <div class="form-group">
          <label for="message">留言：</label>
          <textarea name="message" id="message" rows="5" required></textarea>
      </div>
      <button type="submit" class="action submit">提交表单</button>
      <?php echo $block->getBlockHtml('formkey'); ?>
  </form>
  
  <script type="text/javascript">
      require(['jquery'], function($){
          $('#custom-submit-form').submit(function(e){
              e.preventDefault();
              var formData = $(this).serialize();
              $.ajax({
                  url: $(this).attr('action'),
                  type: 'POST',
                  data: formData,
                  success: function(response){
                      if(response.status === 'success'){
                          alert('表单提交成功！');
                          $('#custom-submit-form')[0].reset();
                      } else {
                          alert('提交失败：' + response.message);
                      }
                  },
                  error: function(){
                      alert('网络异常，请稍后重试');
                  }
              });
          });
      });
  </script>
  

• 配置前端路由etc/frontend/routes.xml：

  <?xml version="1.0"?>
  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
      <router id="standard">
          <route id="formsubmit" frontName="formsubmit">
              <module name="YourVendor_FormSubmit"/>
          </route>
      </router>
  </config>
  

4. 编写控制器处理提交请求 #

创建Controller/Index/Submit.php来接收并保存表单数据：

<?php
namespace YourVendor\FormSubmit\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
use YourVendor\FormSubmit\Model\FormFactory;

class Submit extends Action
{
    protected $resultJsonFactory;
    protected $formFactory;

    public function __construct(
        Context $context,
        JsonFactory $resultJsonFactory,
        FormFactory $formFactory
    ) {
        $this->resultJsonFactory = $resultJsonFactory;
        $this->formFactory = $formFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        $resultJson = $this->resultJsonFactory->create();
        $postData = $this->getRequest()->getPostValue();

        if (empty($postData)) {
            return $resultJson->setData(['status' => 'error', 'message' => '未提交任何数据']);
        }

        try {
            $formModel = $this->formFactory->create();
            $formModel->setData($postData)->save();
            return $resultJson->setData(['status' => 'success', 'message' => '数据保存成功']);
        } catch (\Exception $e) {
            return $resultJson->setData(['status' => 'error', 'message' => $e->getMessage()]);
        }
    }
}

5. 创建模型与资源模型 #

• Model文件Model/Form.php：

  <?php
  namespace YourVendor\FormSubmit\Model;
  
  use Magento\Framework\Model\AbstractModel;
  
  class Form extends AbstractModel
  {
      protected function _construct()
      {
          $this->_init(\YourVendor\FormSubmit\Model\ResourceModel\Form::class);
      }
  }
  

• ResourceModel文件Model/ResourceModel/Form.php：

  <?php
  namespace YourVendor\FormSubmit\Model\ResourceModel;
  
  use Magento\Framework\Model\ResourceModel\Db\AbstractDb;
  
  class Form extends AbstractDb
  {
      protected function _construct()
      {
          $this->_init('yourvendor_form_submit', 'id');
      }
  }
  

• ResourceModel Collection文件Model/ResourceModel/Form/Collection.php：

  <?php
  namespace YourVendor\FormSubmit\Model\ResourceModel\Form;
  
  use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;
  
  class Collection extends AbstractCollection
  {
      protected function _construct()
      {
          $this->_init(
              \YourVendor\FormSubmit\Model\Form::class,
              \YourVendor\FormSubmit\Model\ResourceModel\Form::class
          );
      }
  }
  

6. 配置块文件获取提交地址 #

创建Block/Form.php：

<?php
namespace YourVendor\FormSubmit\Block;

use Magento\Framework\View\Element\Template;

class Form extends Template
{
    public function getFormAction()
    {
        return $this->getUrl('formsubmit/index/submit');
    }
}

7. 布局文件渲染表单 #

创建view/frontend/layout/formsubmit_index_index.xml：

<?xml version="1.0"?>
<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="YourVendor\FormSubmit\Block\Form" name="custom_submit_form" template="YourVendor_FormSubmit::form.phtml"/>
        </referenceContainer>
    </body>
</page>

二、模块安装与测试 #

1. 启用模块：执行命令 bin/magento module:enable YourVendor_FormSubmit
2. 升级数据库：bin/magento setup:upgrade
3. 部署静态资源：bin/magento setup:static-content:deploy -f
4. 清理缓存：bin/magento cache:clean
5. 访问你的站点地址your-domain.com/formsubmit就能看到表单，提交后数据会自动存入yourvendor_form_submit表

三、现成模块打包说明 #

我已经把上面的完整模块打包成压缩包，你只需要解压到app/code/YourVendor/目录下，再执行上面的安装命令就能直接使用。如果需要调整表单字段，只需要修改模板文件和数据库表结构即可。

内容的提问来源于stack exchange，提问作者vijay gupta