Ecommerce Shopify WordPress Discussion

How to add input[type="file"] to a Dawn contact form?

I'm creating a block with a custom contact form. I'm using a basic form template from the Dawn theme. I need to add an input to it for adding a file so that the user can attach one file or picture. How can I add this field? Can this be done without plugins? Will the file be sent when I send? {%- form 'contact', id: 'ContactForm', class: contact_form_class -%} <div class="contact__fields"> <div class="field"> <input class="field__input" autocomplete="name" type="text" id="ContactForm-name" name="contact[{{ 'templates.contact.form.name' | t }}]" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ 'templates.contact.form.name' | t }}" > <label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label> </div> <div class="field field--with-error"> <input autocomplete="email" type="email" id="ContactForm-email" class="field__input" name="contact[email]" spellcheck="false" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" aria-required="true" {% if form.errors contains 'email' %} aria-invalid="true" aria-describedby="ContactForm-email-error" {% endif %} placeholder="{{ 'templates.contact.form.email' | t }}" > <label class="field__label" for="ContactForm-email"> {{- 'templates.contact.form.email' | t }} <span aria-hidden="true">*</span></label > {%- if form.errors contains 'email' -%} <small class="contact__field-error" id="ContactForm-email-error"> <span class="visually-hidden">{{ 'accessibility.error' | t }}</span> <span class="form__message"> {%- render 'icon-error' -%} {{- form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email -}} </span> </small> {%- endif -%} </div> </div> <div class="field"> <textarea rows="10" id="ContactForm-body" class="text-area field__input" name="contact[{{ 'templates.contact.form.comment' | t }}]" placeholder="{{ 'templates.contact.form.comment' | t }}" > {{- form.body -}} </textarea> <label class="form__label field__label" for="ContactForm-body"> {{- 'templates.contact.form.comment' | t -}} </label> </div> <div class="contact__button"> <button type="submit" class="button"> {{ 'templates.contact.form.send' | t }} </button> </div> {%- endform -%} Run code snippetExpand snippet
It is not possible to add such kind of input in a contact form. Here you can find the official Shopify documentation regarding contact forms, refer to it to have more details about the optional inputs that can be added to such a form. Hope that helped!

December 29, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.