How to Add Custom Fields into a Contact Form in Magento 2

Mar 26, 2019460
How to Add Custom Fields into a Contact Form in Magento 2

A contact form is a must-have for an online shop of any scale. It not only facilitates the communication between customer and business, but also allows a merchant to receive more information about a potential client on the initial stage of their interaction.

Magento ecommerce platform empowers a store admin with a great deal of flexibility in respect of contact form configuration. Yet adding a custom field to a contact form will require developer expertise.

This article is a step-by-step instruction of how to add custom fields into a contact form in Magento 2.

Table of contents:

Add subject selection and company name field
Add fields to the template
Add fields for letter subject
Create a new letter template
Apply template to the contact form

Step 1: Add subject selection and company name field

The first step is to add into a default contact form letter subject selection and a field for the company name. Create a structure in your theme that is identical to the standard one:

add custom fields into a contact form in Magento 2

Step 2: Add fields for letter subject

Step 3: Add fields for company name

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Vlad

Step 4: Create a new letter template

add custom fields into a contact form in Magento 2

How to add custom fields into a contact form in Magento 2

Step 5: Apply the template to the contact form

Apply the template to the contact form

After all our configurations, the data from your new custom fields will be sent to your email.

magento contact form

Wrapping it up

Following this easy step-by-step guide, you will successfully add a custom field into your contact form and add a great deal of personalization to your webstore in general. If you have any question or comments, you are welcome to leave them down below.


Partner With Us Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote. Talk to Vlad

2 Comments

  1. Thank you for sharing this tutorial.

    As editing a core file is not the right approach, so it’s better to override the core files.

    So, it would be better if you can also show the basic step of overriding theme i,e theme declaration, and registration before editing the form.phtml file.

  2. Hi, Syed! Thanks for your comment!
    Yes, I agree with you, overriding a theme is a basic step in this case, which I obviously completed. However, since there already have been articles on our blog dedicated to this aspect, I felt it was unnecessary to mention it in the article.

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *