How to add a new input form to checkout in Magento 2

This topic describes how to add a new input form to the Checkout page.
Magento provides the ability to add a custom form to any of the checkout steps: Shipping Information, Review and Payment Information, or custom.
In this article, we will demonstrate how to add the new form before the Shipping Address form.

Related posts

23 Steps to add a new input form to checkout page

You should know how to create a basic Magento 2 module. All of customized files will be inside this module.

Let’s begin.

Step 1: Create the form UI component.

First of all, create custom-checkout-form in Mavenbird/HelloWorld/view/frontend/web/js/view directory.

define([
    'Magento_Ui/js/form/form'
], function(Component) {
    'use strict';
    return Component.extend({
        initialize: function () {
            this._super();
            // component initialization logic
            return this;
        },

        /**
         * Form submit handler
         *
         * This method can have any name.
         */
        onSubmit: function() {
            // trigger form validation
            this.source.set('params.invalid', false);
            this.source.trigger('customCheckoutForm.data.validate');

            // verify that form data is valid
            if (!this.source.get('params.invalid')) {
                // data is retrieved from data provider by value of the customScope property
                var formData = this.source.get('customCheckoutForm');
                // do something with form data
                console.dir(formData);
            }
        }
    });
});

Step 2: Create template of the form

Add the knockout.js HTML template custom-checkout-form.html for the form component under the Mavenbird/HelloWorld/view/frontend/web/template directory.

Step 3: Register the form in the checkout page layout

We will add the new form before the shipping form.
Comparing to our last “Newsletter” component, this form is quite the similar

Except for the fact that the template and the whole form is in the xml itself (children node).
The reason we don’t write a normal html form is because of the way it (the form) declared. Normal html form cannot know how to communicate with the form component (the js file).

    
    
        
                
                    
                        
                            
                                
                                    
                                        
                                            
                                                
                                                    
                                                        
                                                            
                                                                
                                                                    
                                                                    
                                                                        Mavenbird_HelloWorld/js/view/newsletter
                                                                        
                                                                            true
                                                                        
                                                                    
                                                           
                                                                    
                                                                  
                                                                        Mavenbird_HelloWorld/js/view/custom-checkout-form
                                                                        checkoutProvider
                                                                        
                                                                       
                                                                            Mavenbird_HelloWorld/custom-checkout-form
                                                                        
                                                                    
                                                                        
                                                                            
                                                                               
                                                                                uiComponent
                                                                              
                                                                                custom-checkout-form-fields
                                                                                
                                                                                    
                                                                                        Magento_Ui/js/form/element/abstract
                                                                                        
                                                                                          
                                                                                            customCheckoutForm
                                                                                            ui/form/field
                                                                                            ui/form/element/input
                                                                                        
                                                                                        checkoutProvider
                                                                                        customCheckoutForm.text_field
                                                                                        Text Field
                                                                                        1
                                                                                        
                                                                                            true
                                                                                        
                                                                                    
                                                                                    
                                                                                        Magento_Ui/js/form/element/boolean
                                                                                        
                                                                                           
                                                                                            customCheckoutForm
                                                                                            ui/form/field
                                                                                            ui/form/element/checkbox
                                                                                        
                                                                                        checkoutProvider
                                                                                        customCheckoutForm.checkbox_field
                                                                                        Checkbox Field
                                                                                        3
                                                                                    
                                                                                    
                                                                                        Magento_Ui/js/form/element/select
                                                                                        
                                                                                           
                                                                                            customCheckoutForm
                                                                                            ui/form/field
                                                                                            ui/form/element/select
                                                                                        
                                                                                        
                                                                                            
                                                                                                Please select value
                                                                                                
                                                                                            
                                                                                            
                                                                                                Value 1
                                                                                                value_1
                                                                                            
                                                                                            
                                                                                                Value 2
                                                                                                value_2
                                                                                            
                                                                                        
                                                                                        
                                                                                        value_2
                                                                                        checkoutProvider
                                                                                        customCheckoutForm.select_field
                                                                                        Select Field
                                                                                        2
                                                                                    
                                                                                    
                                                                                        Magento_Ui/js/form/element/date
                                                                                        
                                                                                           
                                                                                            customCheckoutForm
                                                                                            ui/form/field
                                                                                            ui/form/element/date
                                                                                        
                                                                                        checkoutProvider
                                                                                        customCheckoutForm.date_field
                                                                                        Date Field
                                                                                        
                                                                                            true
                                                                                        
                                                                                    
                                                                                
                                                                            
                                                                        
                                                                    
                                                                
                                                            
                                                        
                                                    
                                                
                                            
                                        
                                    
                                
                            
                        
                    
                
        
    

Now time to flush cache and test your result. If you have any issue, feel free to leave a comment below, Mavenbird and Magento community are willing to help.