Adding a new input form to checkout in magento 2
<p>Want to add an input form to checkout page for updating the shipping price. So far, I have done the following modifications :</p>

<p>1) Created /view/frontend/web/js/custom-checkout-form.js file and added the following code:</p>

<pre><code>    define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';
        /**
        *
        * mystep - is the name of the component's .html template, 
        * your_module_dir - is the name of the your module directory.
        * 
        */
        return Component.extend({
            defaults: {
                template: 'your_module_dir/mystep'
            },

            //add here your logic to display step,
            isVisible: ko.observable(true),

            /**
            *
            * @returns {*}
            */
            initialize: function () {
                this._super();
                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'step_code',
                    //step alias
                    null,
                    //step title value
                    'Step Title',
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                    * sort order value
                    * 'sort order value' &lt; 10: step displays before shipping step;
                    * 10 &lt; 'sort order value' &lt; 20 : step displays between shipping and payment step
                    * 'sort order value' &gt; 20 : step displays after payment step
                    */
                    15
                );

                return this;
            },

            /**
            * The navigate() method is responsible for navigation between checkout step
            * during checkout. You can add custom logic, for example some conditions
            * for switching to your custom step 
            */
            navigate: function () {

            },

            /**
            * @returns void
            */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    }
);
</code></pre>

<p>2) Created the HTML template /view/frontend/web/template/custom-checkout-form.html </p>

<pre><code>&lt;div&gt;
    &lt;form id="custom-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}"&gt;
        &lt;fieldset class="fieldset"&gt;
            &lt;legend data-bind="i18n: 'Custom Checkout Form'"&gt;&lt;/legend&gt;
            &lt;!-- ko foreach: getRegion('custom-checkout-form-fields') --&gt;
            &lt;!-- ko template: getTemplate() --&gt;&lt;!-- /ko --&gt;
            &lt;!--/ko--&gt;
        &lt;/fieldset&gt;
        &lt;button type="reset"&gt;
            &lt;span data-bind="i18n: 'Reset'"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;button type="button" data-bind="click: onSubmit" class="action"&gt;
            &lt;span data-bind="i18n: 'Submit'"&gt;&lt;/span&gt;
        &lt;/button&gt;
    &lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p>3) Deleted all files in the pub/static/frontend and var/view_preprocessing directories. Reloaded the pages.</p>

<p>4) Created a checkout_index_index.xml layout update in the /view/frontend/layout/</p>

<pre><code>    &lt;?xml version="1.0"?&gt;
    &lt;page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"&gt;
        &lt;body&gt;
            &lt;referenceBlock name="checkout.root"&gt;
                &lt;arguments&gt;
                    &lt;argument name="jsLayout" xsi:type="array"&gt;
                        &lt;item name="components" xsi:type="array"&gt;
                            &lt;item name="checkout" xsi:type="array"&gt;
                                &lt;item name="children" xsi:type="array"&gt;
                                    &lt;item name="steps" xsi:type="array"&gt;
                                        &lt;item name="children" xsi:type="array"&gt;
                                            &lt;item name="shipping-step" xsi:type="array"&gt;
                                                &lt;item name="children" xsi:type="array"&gt;
                                                    &lt;item name="shippingAddress" xsi:type="array"&gt;
                                                        &lt;item name="children" xsi:type="array"&gt;
                                                            &lt;item name="before-form" xsi:type="array"&gt;
                                                                &lt;item name="children" xsi:type="array"&gt;
                                                                    &lt;!-- Your form declaration here --&gt; 
                                                                    &lt;item name="custom-checkout-form-container" xsi:type="array"&gt;
                                                                    &lt;item name="component" xsi:type="string"&gt;%your_module_dir%/js/view/custom-checkout-form&lt;/item&gt;
                                                                    &lt;item name="provider" xsi:type="string"&gt;checkoutProvider&lt;/item&gt;
                                                                    &lt;item name="config" xsi:type="array"&gt;
                                                                    &lt;item name="template" xsi:type="string"&gt;%your_module_dir%/custom-checkout-form&lt;/item&gt;
                                                                   &lt;/item&gt;
                                                                   &lt;item name="children" xsi:type="array"&gt;
                                                                   &lt;item name="custom-checkout-form-fieldset" xsi:type="array"&gt;
                                                                   &lt;!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) --&gt;
                                                                   &lt;item name="component" xsi:type="string"&gt;uiComponent&lt;/item&gt;
                                                                  &lt;!-- the following display area is used in template (see below) --&gt;
                                                                  &lt;item name="displayArea" xsi:type="string"&gt;custom-checkout-form-fields&lt;/item&gt;
                                                                  &lt;item name="children" xsi:type="array"&gt;
                                                                  &lt;item name="text_field" xsi:type="array"&gt;
                                                                  &lt;item name="component" xsi:type="string"&gt;Magento_Ui/js/form/element/abstract&lt;/item&gt;
                                                                  &lt;item name="config" xsi:type="array"&gt;
                                                                  &lt;!-- customScope is used to group elements within a single form (e.g. they can be validated separately) --&gt;
                                                                  &lt;item name="customScope" xsi:type="string"&gt;customCheckoutForm&lt;/item&gt;
                                                                  &lt;item name="template" xsi:type="string"&gt;ui/form/field&lt;/item&gt;
                                                                  &lt;item name="elementTmpl" xsi:type="string"&gt;ui/form/element/input&lt;/item&gt;
                                                                 &lt;/item&gt;
                                                                 &lt;item name="provider" xsi:type="string"&gt;checkoutProvider&lt;/item&gt;
                                                                 &lt;item name="dataScope" xsi:type="string"&gt;customCheckoutForm.text_field&lt;/item&gt;
                                                                 &lt;item name="label" xsi:type="string"&gt;Text Field&lt;/item&gt;
                                                                 &lt;item name="sortOrder" xsi:type="string"&gt;1&lt;/item&gt;
                                                                 &lt;item name="validation" xsi:type="array"&gt;
                                                                 &lt;item name="required-entry" xsi:type="string"&gt;true&lt;/item&gt;
                                                                 &lt;/item&gt;
                                                                 &lt;/item&gt;
                                                                 &lt;item name="checkbox_field" xsi:type="array"&gt;
                                                                 &lt;item name="component" xsi:type="string"&gt;Magento_Ui/js/form/element/boolean&lt;/item&gt;
                                                                &lt;item name="config" xsi:type="array"&gt;
                                                                 &lt;!--customScope is used to group elements within a single form (e.g. they can be validated separately)--&gt;
                                                                &lt;item name="customScope" xsi:type="string"&gt;customCheckoutForm&lt;/item&gt;
                                                                &lt;item name="template" xsi:type="string"&gt;ui/form/field&lt;/item&gt;
                                                                &lt;item name="elementTmpl" xsi:type="string"&gt;ui/form/element/checkbox&lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;item name="provider" xsi:type="string"&gt;checkoutProvider&lt;/item&gt;
                                                                &lt;item name="dataScope" xsi:type="string"&gt;customCheckoutForm.checkbox_field&lt;/item&gt;
                                                                &lt;item name="label" xsi:type="string"&gt;Checkbox Field&lt;/item&gt;
                                                                &lt;item name="sortOrder" xsi:type="string"&gt;3&lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;item name="select_field" xsi:type="array"&gt;
                                                                &lt;item name="component" xsi:type="string"&gt;Magento_Ui/js/form/element/select&lt;/item&gt;
                                                                &lt;item name="config" xsi:type="array"&gt;
                                                               &lt;!--customScope is used to group elements within a single form (e.g. they can be validated separately)--&gt;
                                                                &lt;item name="customScope" xsi:type="string"&gt;customCheckoutForm&lt;/item&gt;
                                                                &lt;item name="template" xsi:type="string"&gt;ui/form/field&lt;/item&gt;
                                                                &lt;item name="elementTmpl" xsi:type="string"&gt;ui/form/element/select&lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;item name="options" xsi:type="array"&gt;
                                                                &lt;item name="0" xsi:type="array"&gt;
                                                                &lt;item name="label" xsi:type="string"&gt;Please select value&lt;/item&gt;
                                                                &lt;item name="value" xsi:type="string"&gt;&lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;item name="1" xsi:type="array"&gt;
                                                                &lt;item name="label" xsi:type="string"&gt;Value 1&lt;/item&gt;
                                                                &lt;item name="value" xsi:type="string"&gt;value_1&lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;item name="2" xsi:type="array"&gt;
                                                                &lt;item name="label" xsi:type="string"&gt;Value 2&lt;/item&gt;
                                                                &lt;item name="value" xsi:type="string"&gt;value_2&lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;!-- value element allows to specify default value of the form field --&gt;
                                                                &lt;item name="value" xsi:type="string"&gt;value_2&lt;/item&gt;
                                                                &lt;item name="provider" xsi:type="string"&gt;checkoutProvider&lt;/item&gt;
                                                                &lt;item name="dataScope" xsi:type="string"&gt;customCheckoutForm.select_field&lt;/item&gt;
                                                                &lt;item name="label" xsi:type="string"&gt;Select Field&lt;/item&gt;
                                                                &lt;item name="sortOrder" xsi:type="string"&gt;2&lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;item name="date_field" xsi:type="array"&gt;
                                                                &lt;item name="component" xsi:type="string"&gt;Magento_Ui/js/form/element/date&lt;/item&gt;
                                                                &lt;item name="config" xsi:type="array"&gt;
                                                               &lt;!--customScope is used to group elements within a single form (e.g. they can be validated separately)--&gt;
                                                               &lt;item name="customScope" xsi:type="string"&gt;customCheckoutForm&lt;/item&gt;
                                                               &lt;item name="template" xsi:type="string"&gt;ui/form/field&lt;/item&gt;
                                                               &lt;item name="elementTmpl" xsi:type="string"&gt;ui/form/element/date&lt;/item&gt;
                                                               &lt;/item&gt;
                                                               &lt;item name="provider" xsi:type="string"&gt;checkoutProvider&lt;/item&gt;
                                                               &lt;item name="dataScope" xsi:type="string"&gt;customCheckoutForm.date_field&lt;/item&gt;
                                                               &lt;item name="label" xsi:type="string"&gt;Date Field&lt;/item&gt;
                                                               &lt;item name="validation" xsi:type="array"&gt;
                                                               &lt;item name="required-entry" xsi:type="string"&gt;true&lt;/item&gt;
                                                               &lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;/item&gt;
                                                                &lt;/item&gt;
                                                            &lt;/item&gt;
                                                        &lt;/item&gt;
                                                    &lt;/item&gt;
                                                &lt;/item&gt;
                                            &lt;/item&gt;
                                        &lt;/item&gt;
                                    &lt;/item&gt;
                                &lt;/item&gt;
                            &lt;/item&gt;
                        &lt;/item&gt;
                    &lt;/argument&gt;
                &lt;/arguments&gt;
            &lt;/referenceBlock&gt;
        &lt;/body&gt;
    &lt;/page&gt;
</code></pre>

<p>But it is not working for me. Referred the magento's doc <a href="http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html" rel="nofollow">http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html</a>. Correct me if I'm doing wrong in naming of the files or so.  I would really appreciate if someone could help!!!</p>