Magento 2.3.3 - Add file upload field to Contact Page

Question

what is the best way to add a File Upload field in the Contact Page? I want to give users option to upload a file. I try this module but is not work on my 2.3.3 Magento version.

Thank you

Answer 1

I tried to easy way Please check follow setps

First open form.phtml file located in your theme

/magento_root/app/design/frontend/VENDER_NAME/YOUR_THEME/Magento_Contact/templates/form.phtml, then add subject field to this contact form:

<div class="field subject required">
<p id="file_error" class="message-error error message" style="display:none;">
    File is too large
</p>
    <label class="label" for="subject"><span><?php /* @escapeNotVerified */ echo __('Attachment') ?></span></label>
    <div class="control">
        <input name="subject" id="file-btn" accept=".pdf, .png, .jpg, .gif, .docx, .jpeg/*" name="document" type="file" value="" data-validate="{required:true}"/>
    </div>
</div>

Add the above field in the form.

As far as Magento is concerned, it doesn't care what fields we add to this form. It is written in such a way that it accepts all of the field posted for processing and send that out to the transactional e-mail form that you create. Now, go to MARKETING > Communication > Email Templates in the Magento Admin section. Click "Add New Template" and from the "Template" dropdown box select "Contact Form" then "Load Template". Under template content you will see:

{{trans "Name: %name" name=$data.name}}
{{trans "Email: %email" email=$data.email}}
{{trans "Phone Number: %telephone" telephone=$data.telephone}}
{{trans "Comment: %comment" comment=$data.comment}}

Add your new field for Attachment and this code :-

{{template config_path="design/email/header_template"}}

<table class="message-details">
    <tr>
        <td><strong>{{trans "Name"}}</strong></td>
        <td>{{var data.name}}</td>
    </tr>
    <tr>
        <td><strong>{{trans "Email"}}</strong></td>
        <td>{{var data.email}}</td>
    </tr>
    <tr>
        <td><strong>{{trans "Phone"}}</strong></td>
        <td>{{var data.telephone}}</td>
    </tr>
<tr>
           <td><strong>{{trans "Subject"}}</strong></td>
        <td>{{var data.subject}}</td>
    </tr>
</table>
<p><strong>{{trans "Message"}}</strong></p>
<p>{{var data.comment}}</p>

{{template config_path="design/email/footer_template"}}

And save template. Now we need to tell Magento to use this new template for the Contact form. Go to STORES > Settings > Configuration > General > Contacts and select "Contacts". Under "Email Options", select your new template under the "Email Options" > "Email Template" dropdown box. Click on Save Button.

And last check you contact page.

Hope help you

Thanks.