Skip to content

Instantly share code, notes, and snippets.

@Igloczek
Last active January 5, 2021 10:57
Show Gist options
  • Save Igloczek/aca9614c6fb0f20dc1a0a4d66c6ffe55 to your computer and use it in GitHub Desktop.
Save Igloczek/aca9614c6fb0f20dc1a0a4d66c6ffe55 to your computer and use it in GitHub Desktop.
Example of use BEM methodology in Magento 2
<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>
<?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>
<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>
<?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