All articles
Guides5 min read

Help Tempe customers attach useful photos to quote requests

Make quote-request uploads clearer: explain which photos help, show file limits early, handle failures, and keep attachments with the inquiry.

A customer writes a detailed quote request, chooses a photo, and presses send. The form rejects the file. It never explained what it accepts.

Tell people what to attach before they choose a file, then make the result clear.

For a Tempe repair, installation, or custom-service business, a useful photo can give your team context before the first conversation. The upload should help that conversation begin.

Ask for the photo your team actually needs

Start with the decision you want to make. Does the photo help identify a part, understand the space, or see the area that needs attention?

Write that purpose beside the field. “Add a photo” leaves the customer guessing. A more useful request might ask for an overall view and a close-up of the relevant detail.

For example, imagine a furniture repair shop reviewing an inquiry about a damaged chair. A full view and a close-up of the damage answer different questions. Asking for both has a reason; requiring ten unspecified pictures does not.

Keep the request proportionate. Make photos optional when your team can start without them. If you need an inspection before quoting, say so. Receiving a picture is not the same as approving a price.

Explain the service and quote process on the page around the form. Our service-page guide covers that context.

Put the file rules before the chooser

List the accepted formats, maximum size per file, and number of files allowed. Distinguish a per-file limit from a total upload limit if both apply.

W3C recommends explaining required and optional inputs, formats, and other instructions people need to complete a form. Read its form-instruction guidance.

Choose the rules with your developer using files your customers are likely to send. Test ordinary phone photos, including the formats your team commonly receives. Do not assume every image labeled a “photo” will work with your form.

The example below shows how one form could explain its limits. Its numbers are illustrative; use the limits your own system supports.

Give the file rules a visible home
Photos of the item (optional)

Show the whole item and a close-up of the area that needs attention.

Formats
JPG or PNG
Per file
Up to 5 MB
Quantity
Up to 3 photos

Example wording. Set the actual limits with your developer.

Keep the guidance visible near the field. Ask your developer to associate it with the upload control so assistive technology can identify the instructions too.

MDN explains that a file chooser's accepted-type setting guides selection; it does not validate the uploaded file. The receiving system still needs to check it. See MDN's file-input reference.

Show whether the file is selected or received

A filename appearing beside a button can mean only that the customer selected a file on their device. It does not prove that your business received it.

Make the stages understandable. Let people see what they selected, remove the wrong attachment, and recognize when a transfer is still running.

Selection is only the beginning
Selected
The customer chose a file. Show its name and a way to remove it.
Sending
The transfer is underway. Make waiting and any interruption clear.
Received
The system confirms receipt. Say whether the complete request arrived.

Some forms upload files before the final submission; others send everything together. Your developer should make the messages match the actual process.

The final confirmation should describe what was received. Avoid a generic success message if the text arrived but the photo failed. If your system accepts partial requests, tell the customer what is missing and how to supply it.

Keep the distinction clear for your team too: receipt of the request, review of the photos, and an approved quote are separate events.

Give a failed upload a useful next step

Arrange a test with your team using harmless sample files and contact details you control. Try an allowed image, a file over the limit, and an unsupported format.

Read each error as a customer. Does it identify the affected file and explain a correction? “Upload failed” is not enough to tell someone whether to choose a smaller photo or try again later.

W3C recommends clear feedback for errors and successful submissions, including guidance on correcting a problem. Ask your developer to check how those messages reach assistive technology as well. Read the notification guidance.

Keep the written request intact when an attachment needs replacing. If the customer must select a file again, say that plainly.

Test an interrupted transfer in a test environment. Check what the customer sees and whether retrying creates duplicate requests. Keep a working contact alternative close to the form.

Our keyboard form check can help you test reaching the chooser and correction controls without a mouse.

Keep the attachment with the inquiry

Open the test request from the place your team normally works. Can the assigned person find the photo, open it, and connect it to the right message?

Test with that person's normal account. Access that works for the site administrator may not work for the estimator receiving the request.

Brandon working at the Juncie studio with code and a website preview on separate screens
Brandon at the Juncie studio. Check the customer-facing form and the record your team receives. Photo from Juncie’s studio archive.

Ask your developer where files are stored, who can retrieve them, and what happens when they are no longer needed. Do not assume an obscure file link makes a customer upload private.

OWASP recommends several layers of protection, including allowed file types, file-size limits, access controls, and appropriate storage. It also warns that no single validation technique secures an upload service. Read OWASP's upload guidance.

Have the developer review the implementation against that guidance. The owner's job is to define what the business needs to collect and who needs access, rather than promise that a file extension alone makes an upload safe.

Once the complete inquiry arrives, our follow-up workflow guide covers assigning responsibility for the reply.

Finish one complete test from a phone

Start on your service page, write a request, select a representative photo, and send it through the agreed test route. Confirm both the customer message and the attachment your team receives.

Repeat after changes to the form, storage provider, or inquiry system. Record the page, device, file type and size, and where a failure occurred. That gives your developer something specific to fix.

A useful upload field has a clear purpose, visible limits, understandable feedback, and a file your team can actually use.

Need help improving a Tempe business website? Our website development service can help with the form and its connections. Tell Brandon what customers need to send.

A little more clarity

Common questions.

Ask a different question
Should photos be required on a quote form?
Only when your team needs them to handle the initial request. If a photo is helpful but not essential, make it optional and explain what it should show. Provide a clear contact route when someone cannot supply it.
What file-size limit should my website use?
Choose a limit with your developer based on the files you actually need and the upload, storage, and processing tools involved. Test representative phone photos. Publish the real limit next to the field rather than copying an arbitrary number.
Does seeing a filename mean the photo was sent?
No. A filename may only show that a file was selected on the device. The form should distinguish selection, transfer, and successful receipt. Your team should also confirm that the saved inquiry includes an attachment it can open.
JUNCIE STUDIOS

Your website could be
working harder for you.

Tell me what’s getting in the way. I’ll help you figure out the next step for your business.

Talk to me about your website
Brandon Mitchell
Brandon MitchellDesigner, developer & your point of contact.Based in Arizona. Built around your business.