Last active
January 5, 2021 10:57
-
-
Save Igloczek/aca9614c6fb0f20dc1a0a4d66c6ffe55 to your computer and use it in GitHub Desktop.
Example of use BEM methodology in Magento 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form class="form"> | |
<h2 class="form__header"></h2> | |
<p class="form__description"></p> | |
<div class="form__field field"> | |
<label class="field__label"></label> | |
<input class="field__input"> | |
</div> | |
<div class="form__field field"> | |
<label class="field__label"></label> | |
<input class="field__input"> | |
</div> | |
<div class="form__field field"> | |
<label class="field__label"></label> | |
<input class="field__input"> | |
</div> | |
<div class="form__field field"> | |
<label class="field__label"></label> | |
<textarea class="field__input field__input--textarea"></textarea> | |
</div> | |
<div class="form__actions actions-toolbar"> | |
<div class="actions-toolbar__primary"> | |
<input class="form__hidden"> | |
<button class="actions-toolbar__button button"></button> | |
</div> | |
</div> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php // https://github.com/magento/magento2/blob/develop/app/code/Magento/Contact/view/frontend/templates/form.phtml ?> | |
<?php | |
$_helper = $this->helper('Magento\Contact\Helper\Data'); | |
?> | |
<form class="form" | |
id="contact-form" | |
action="<?= $block->escapeUrl($block->getFormAction()); ?>" | |
method="post" | |
data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>" | |
data-mage-init='{ "validation":{} }' | |
> | |
<h2 class="form__header"> | |
<?= $block->escapeHtml(__('Write Us')) ?> | |
</h2> | |
<p class="form__description"> | |
<?= $block->escapeHtml(__('Jot us a note and we’ll get back to you as quickly as possible.')) ?> | |
</p> | |
<div class="form__field field"> | |
<label class="field__label" for="name"> | |
<?= $block->escapeHtml(__('Name')) ?> | |
</label> | |
<input class="field__input" | |
name="name" | |
id="name" | |
title="<?= $block->escapeHtmlAttr(__('Name')) ?>" | |
value="<?= $block->escapeHtmlAttr($_helper->getPostValue('name') ?: $_helper->getUserName()) ?>" | |
type="text" | |
data-validate="{ required:true }" | |
> | |
</div> | |
<div class="form__field field"> | |
<label class="field__label" for="email"> | |
<?= $block->escapeHtml(__('Email')) ?> | |
</label> | |
<input class="field__input" | |
id="email" | |
type="email" | |
name="email" | |
title="<?= $block->escapeHtmlAttr(__('Email')) ?>" | |
value="<?= $block->escapeHtmlAttr($_helper->getPostValue('email') ?: $_helper->getUserEmail()) ?>" | |
data-validate="{ required:true, 'validate-email':true }" | |
> | |
</div> | |
<div class="form__field field"> | |
<label class="field__label" for="telephone"> | |
<?= $block->escapeHtml(__('Phone Number')) ?> | |
</label> | |
<input class="field__input" | |
name="telephone" | |
id="telephone" | |
title="<?= $block->escapeHtmlAttr(__('Phone Number')) ?>" | |
value="<?= $block->escapeHtmlAttr($_helper->getPostValue('telephone')) ?>" | |
type="text" | |
> | |
</div> | |
<div class="form__field field"> | |
<label class="field__label" for="comment"> | |
<?= $block->escapeHtml(__('What’s on your mind?')) ?> | |
</label> | |
<textarea class="field__input field__input--textarea" | |
id="comment" | |
name="comment" | |
title="<?= $block->escapeHtmlAttr(__('What’s on your mind?')) ?>" | |
cols="5" | |
rows="3" | |
data-validate="{ required:true }" | |
><?= $block->escapeHtml($_helper->getPostValue('comment')) ?></textarea> | |
</div> | |
<?= $block->getChildHtml('form.additional.info'); ?> | |
<div class="form__actions actions-toolbar"> | |
<div class="actions-toolbar__primary"> | |
<input class="form__hidden" | |
type="hidden" | |
name="hideit" | |
value="" | |
> | |
<button class="actions-toolbar__button button" | |
title="<?= $block->escapeHtmlAttr(__('Submit')) ?>" | |
type="submit" | |
> | |
<?= $block->escapeHtml(__('Submit')) ?> | |
</button> | |
</div> | |
</div> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form class="form contact"> | |
<fieldset class="fieldset"> | |
<legend class="legend"> | |
<span></span> | |
</legend> | |
<br /> | |
<div class="field note no-label"></div> | |
<div class="field name required"> | |
<label class="label"> | |
<span></span> | |
</label> | |
<div class="control"> | |
<input class="input-text"/> | |
</div> | |
</div> | |
<div class="field email required"> | |
<label class="label"> | |
<span></span> | |
</label> | |
<div class="control"> | |
<input class="input-text"/> | |
</div> | |
</div> | |
<div class="field telephone"> | |
<label class="label"> | |
<span></span> | |
</label> | |
<div class="control"> | |
<input class="input-text" /> | |
</div> | |
</div> | |
<div class="field comment required"> | |
<label class="label" for="comment"> | |
<span></span> | |
</label> | |
<div class="control"> | |
<textarea class="input-text"></textarea> | |
</div> | |
</div> | |
</fieldset> | |
<div class="actions-toolbar"> | |
<div class="primary"> | |
<input /> | |
<button class="action submit primary"> | |
<span></span> | |
</button> | |
</div> | |
</div> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php // https://github.com/magento/magento2/blob/develop/app/code/Magento/Contact/view/frontend/templates/form.phtml ?> | |
<form class="form contact" | |
action="<?php echo $block->escapeUrl($block->getFormAction()); ?>" | |
id="contact-form" | |
method="post" | |
data-hasrequired="<?php echo $block->escapeHtmlAttr(__('* Required Fields')) ?>" | |
data-mage-init='{"validation":{}}'> | |
<fieldset class="fieldset"> | |
<legend class="legend"><span><?php echo $block->escapeHtml(__('Write Us')) ?></span></legend><br /> | |
<div class="field note no-label"><?php echo $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><?php echo $block->escapeHtml(__('Name')) ?></span></label> | |
<div class="control"> | |
<input name="name" id="name" title="<?php echo $block->escapeHtmlAttr(__('Name')) ?>" value="<?php echo $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><?php echo $block->escapeHtml(__('Email')) ?></span></label> | |
<div class="control"> | |
<input name="email" id="email" title="<?php echo $block->escapeHtmlAttr(__('Email')) ?>" value="<?php echo $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><?php echo $block->escapeHtml(__('Phone Number')) ?></span></label> | |
<div class="control"> | |
<input name="telephone" id="telephone" title="<?php echo $block->escapeHtmlAttr(__('Phone Number')) ?>" value="<?php echo $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><?php echo $block->escapeHtml(__('What’s on your mind?')) ?></span></label> | |
<div class="control"> | |
<textarea name="comment" id="comment" title="<?php echo $block->escapeHtmlAttr(__('What’s on your mind?')) ?>" class="input-text" cols="5" rows="3" data-validate="{required:true}"><?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getPostValue('comment')) ?></textarea> | |
</div> | |
</div> | |
<?php echo $block->getChildHtml('form.additional.info'); ?> | |
</fieldset> | |
<div class="actions-toolbar"> | |
<div class="primary"> | |
<input type="hidden" name="hideit" id="hideit" value="" /> | |
<button type="submit" title="<?php echo $block->escapeHtmlAttr(__('Submit')) ?>" class="action submit primary"> | |
<span><?php echo $block->escapeHtml(__('Submit')) ?></span> | |
</button> | |
</div> | |
</div> | |
</form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment