Magento 2.1 – How to Change Checkout Form Field Classes and Names

magento-2.1magento2

I am trying to figure out how to customize the checkout form by changing classes because I want to stylize it with bootstrap instead of the default Magento styles. I don't see them defined anywhere and with my reading and looking at the Magento developer documentation it looks like they are dynamically generated http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_field.html But in that documentation it doesn't look like there is any way of adding custom classes to the wrapper elements or anything.

This is the default output for the First Name:

<div class="field _required" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses" name="billingAddresscheckmo.firstname">

    <label class="label" data-bind="attr: { for: element.uid }" for="DPGHTAP">
        <!-- ko if: element.label -->
        <span data-bind="text: element.label">First Name</span>
        <!-- /ko -->
    </label>

    <div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
        <!-- ko ifnot: element.hasAddons() -->
            <!-- ko template: element.elementTmpl -->
<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }" name="firstname" placeholder="" aria-describedby="notice-DPGHTAP" id="DPGHTAP">
<!-- /ko -->
        <!-- /ko -->

        <!-- ko if: element.hasAddons() --><!-- /ko -->

        <!-- ko if: element.tooltip --><!-- /ko -->

        <!-- ko if: element.notice --><!-- /ko -->

        <!-- ko if: element.error() --><!-- /ko -->

        <!-- ko if: element.warn() --><!-- /ko -->
    </div>
</div>

I would prefer to have an output similar to this:

<div class="form-group field _required" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses" name="billingAddresscheckmo.firstname">

    <label class="label" data-bind="attr: { for: element.uid }" for="DPGHTAP">
        <!-- ko if: element.label -->
        <span data-bind="text: element.label">First Name</span>
        <!-- /ko -->
    </label>

    <div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
        <!-- ko ifnot: element.hasAddons() -->
            <!-- ko template: element.elementTmpl -->
<input class="form-control input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }" name="firstname" placeholder="" aria-describedby="notice-DPGHTAP" id="DPGHTAP">
<!-- /ko -->
        <!-- /ko -->

        <!-- ko if: element.hasAddons() --><!-- /ko -->

        <!-- ko if: element.tooltip --><!-- /ko -->

        <!-- ko if: element.notice --><!-- /ko -->

        <!-- ko if: element.error() --><!-- /ko -->

        <!-- ko if: element.warn() --><!-- /ko -->
    </div>
</div>

Notice how there is now a form-group and form-control class added.

How does one accomplish this if everything is dynamically generated?

Best Answer

For set class for each input field in shipping form,

By default Main div comes from the core file, vendor/magento/module-ui/view/frontend/web/templates/form/field.html

You have to override above core file into your theme, For add form-group class to the main div just override file at your theme location,

app/design/frontend/{Namespace}/{themename}/Magento_Ui/web/templates/form/field.html

changes:

<div class="form-group field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses">
</div>

All input field comes from the core file,

vendor/magento/module-ui/view/frontend/web/templates/form/element/input.html,

You have to override above core file into your theme, For add form-control class to input just override file at your theme location,

app/design/frontend/{Namespace}/{themename}/Magento_Ui/web/templates/form/element/input.html

Code for input.html is like below,

<input class="form-control input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }" />

Clear Browser cache and clear system cache.

Run php bin/magento setup:static-content:deploy command.

Related Topic