Schritt-für-Schritt Anleitung: Wie man ein benutzerdefiniertes individuelles Formular in Magento erstellt

So erstellen Sie ein benutzerdefiniertes individuelles Formular in Magento, ganz einfach mit einer form.phtml Datei.

 

 

Schritt 1: Erstellen einer form.phtml Datei im "templates" Ordner.

 

 

1. Legen Sie ein Herstellerverzeichnis im Frontend Verzeichnis an. Sie navigieren dazu in den Ordner "app", dann zum Ordner "design" und letztendlich können Sie hier das Herstellerverzeichnis anlegen, so sieht der Pfadweg aus app/design/frontend/Herstellerverzeichnis

 

2. Ins Herstellerverzeichnis kommt das Childtheme, darin legen Sie einen Unterordner namens Magento_Contact an.

 

3. Im Magento_Contact legen Sie ein "templates" - Ordner an.

 

4. Im Templates Ordner soll sich dann die form.phtml Datei befinden.

 

5. Der ultimative Pfadweg sieht wie folgt aus:

    

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

 

 

Schritt 2: Inhalt der "form.phtml" - Datei im "templates" - Ordner.

 

 

<?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(__('Nachricht an Uns')) ?></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(__('Telefonnummer')) ?></span></label>
<div class="control">
<input name="telephone" id="telephone" title="<?= $block->escapeHtmlAttr(__('Telefonnummer')) ?>" 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(__('Ihre Nachricht an uns')) ?></span></label>
<div class="control">
<textarea name="comment" id="comment" title="<?= $block->escapeHtmlAttr(__('Ihre Nachricht an uns')) ?>" 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>

<div class="field email required Datenschutz">
<div class="control">
<input name="Datenschutz" id="Datenschutz2" title="Datenschutz" value="1" class="input-text" type="checkbox" data-validate="{required:true}"/>
<span><a href='/datenschutz' target='_blank'>Datenschutzerklärung</a> gelesen</span>
</div>
</div>

<div class="actions-toolbar">
<div class="primary">
<input type="hidden" name="hideit" id="hideit" value="" />
<button type="submit" title="<?= $block->escapeHtmlAttr(__('SENDEN')) ?>" class="action submit primary">
<span><?= $block->escapeHtml(__('SENDEN')) ?></span>
</button>
</div>
</div>
</form>

 

 

Schritt 3: Das Code - Snippet zum Abrufen der "form.phtml" - Datei können Sie auf jeder beliebigen Seite einfügen, auf dem Sie das Kontaktformular haben möchten.

 

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

 

Bitte beachten Sie, dass dies eine grundlegende Anleitung ist, um ein benutzerdefiniertes individualisiertes Formular in Magento zu erstellen. Sie können die Formularverarbeitung, Validierung und andere Funktionen entsprechend Ihren Anforderungen weiterentwickeln.

 

Hinweis: Führen Sie diese Schritte unbedingt in einer Testumgebung durch, bevor Sie Änderungen an Ihrer Live-Website vornehmen, um mögliche Probleme zu vermeiden.

 

Wir helfen Ihnen bei der Einrichtung und Konfiguration des Formulars, beheben technische Probleme und bieten Beratung als Ihre Magento Agentur in München. Unser Ziel ist es, Ihnen eine maßgeschneiderte Lösung anzubieten, die Ihren individuellen Anforderungen entspricht. Zögern Sie nicht, uns zu kontaktieren, wir freuen uns darauf, Ihnen bei Ihrem Magento-Projekt weiterzuhelfen und es erfolgreich voranzubringen.