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.

Step 1: Create the form UI component.

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

/*global define*/ 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 Mageplaza/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

declare new form

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).

                  Mageplaza_HelloWorld/js/view/newsletter true     Mageplaza_HelloWorld/js/view/custom-checkout-form checkoutProvider  Mageplaza_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, Mageplaza and Magento community are willing to help.

Result

Image Description

With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.