How can I add a file attachment to the contact form?

Online Store and Theme Development
1

Hello Dev Community!

My client would like to have a pop-up contact form with a file attachment.
Is this possible to achieve without apps? I believe Shopify Forms app doesn’t accept custom CSS and my client is trying to achieve a very specific design.

I’ve done some research, and I’ve heard that currently it’s not possible to add an field to a contact us form. Is this accurate?

Thank you for any suggestions,
Marianna

2

Hey @Marianna_Shvartsapel :waving_hand: - right now the best way to approach this if you were looking at building a custom solution would be through our theme app extension framework: Theme app extension configuration

It does require some development knowledge to implement the app block functionality (including using App Proxies if you need to upload the files to an external hosting server), but you could build something close to what you’re describing there for sure, including the file upload functionality.

The easiest solution would be using an app like Contact Form Ultimate or Powerful Contact Form Builder.

Hope this helps a bit!

3

Hi @Alan_G ,

thank you so much for responding!
Just to confirm, the only way to achieve this functionality is either:

  • build a custom app
  • use an existing 3-rd party app
    Correct?

Wondering why you suggested these 2 specific apps… Contact Form Ultimate seems to have a pretty low rating… I’ll have to find out if they accept custom CSS / custom fonts …

Marianna

4

Hi @Marianna_Shvartsapel you can make a custom template for your custom form and by using javascript you can submit and store your form data to google sheet by using app script. you need a google app script code for sending the mail through google app script.

step 1: create a custom template for custom form.

step 2: create a google app script from your client email or yours own. in the app script write the fuction for sending email (you can also store the form details in google sheet, for files you can google and will find some solution) after code you need to deploy the code, they will give you a url(we send form data to this url using js fetch api).

step 3: write the js fetch code in the custom form page of the shopify to send the form data to app script.

flow details: when you submit the form, we get all data in a object using js and send the object to our google app script url. the google app script will send those data to email.

Note: email will send by google app script. you can google the app script code for sending email.

google app script code example: (write below code into the google app script)

function myFunction() {
var emailaddress = ‘bhupirawat57@gmail.com’;
var subject = ‘Testing mail’;
var htmlBody = ‘

Hello!

’ +
‘

Bhupender

’;

// Send the email with the HTML body
GmailApp.sendEmail(emailaddress, subject, ‘’, {
htmlBody: htmlBody
});
}

5

Hi Bhupender,

thanks for responding to my question!

I am a bit confused why you’re suggesting to use Google Sheets? Where would the attachments be uploaded? Can they be stored in Google Sheets? I’d imagine that Google Drive would make for a better file storage. Is that an option with the scenario you’re describing?

6

Hi i suggest google sheet bcoz it is free. Attachment will uploads to google drive and then image link can be store on the google sheet along with other form data as a row. Also you can directly send the file on the mail as a attachement. You will find the code on google or ask chatgpt. I hope you got my point. But you need to use client Gmail account for google drive or google sheet because if in future the drive space getting full so either client delete the old data or buy more storage.