I created a form and have the ability to upload pictures. In the beginning I’d have a link to cloudflare storage to view the images, but now I don’t. I see that my account has used a portion of the allowance, so where are the files actually? How can I view them? Further, how can I fix the form?
1 Like
Here’s the form:
<form id="cs-form-host" name="Workshop Proposal Form" method="post" data-netlify="true" data-netlify-honeypot="bot-field" enctype="multipart/form-data">
<!-- Honeypot field for spam protection -->
<p class="visually-hidden">
<label>
Don't fill this out if you're human: <input name="bot-field" />
</label>
</p>
<!-- Instructor Information Section -->
<fieldset class="cs-fieldset">
<legend class="cs-legend">Instructor Information</legend>
<label class="cs-label" for="full-name">
<span class="cs-label-text">
Full Legal Name
<span class="cs-required" aria-label="required">*</span>
</span>
<input class="cs-input" required type="text" id="full-name" name="full-name" placeholder="e.g., Jane Smith" autocomplete="name" aria-required="true">
</label>
<label class="cs-label" for="business-name">
<span class="cs-label-text">
Business Name / Artist Name
<span class="cs-optional" aria-label="optional">(optional)</span>
</span>
<input class="cs-input" type="text" id="business-name" name="business-name" placeholder="e.g., Jane's Art Studio" autocomplete="organization">
<span class="cs-help-text">How you would like your name listed for marketing and promotional purposes.</span>
</label>
<label class="cs-label cs-email" for="email">
<span class="cs-label-text">
Email Address
<span class="cs-required" aria-label="required">*</span>
</span>
<input class="cs-input" required type="email" id="email" name="email" placeholder="e.g., artist@example.com" autocomplete="email" aria-required="true">
</label>
<label class="cs-label" for="website">
<span class="cs-label-text">
Website
<span class="cs-optional" aria-label="optional">(optional)</span>
</span>
<input class="cs-input" type="url" id="website" name="website" placeholder="e.g., https://yourwebsite.com" autocomplete="url">
</label>
<label class="cs-label" for="instagram">
<span class="cs-label-text">
Instagram Handle
<span class="cs-optional" aria-label="optional">(optional)</span>
</span>
<input class="cs-input" type="text" id="instagram" name="instagram" placeholder="e.g., @yourusername">
</label>
<label class="cs-label cs-phone" for="phone">
<span class="cs-label-text">
Phone Number
<span class="cs-required" aria-label="required">*</span>
</span>
<input class="cs-input" required type="tel" id="phone" name="phone" placeholder="e.g., (610) 555-1234" autocomplete="tel" aria-required="true">
</label>
<label class="cs-label" for="location">
<span class="cs-label-text">
City & State
<span class="cs-required" aria-label="required">*</span>
</span>
<input class="cs-input" required type="text" id="location" name="location" placeholder="City, State" aria-required="true">
</label>
<label class="cs-label" for="artist-bio">
<span class="cs-label-text">
Artist Bio
<span class="cs-required" aria-label="required">*</span>
</span>
<textarea class="cs-input cs-textarea" required name="artist-bio" id="artist-bio" placeholder="Tell us about yourself, your artistic background, and what inspires your work..." rows="5" aria-required="true"></textarea>
<span class="cs-help-text">Share your story and what makes your artistic practice unique.</span>
</label>
</fieldset>
<!-- Marketing Materials Section -->
<fieldset class="cs-fieldset">
<legend class="cs-legend">Marketing Materials</legend>
<div class="cs-file-upload-wrapper">
<label class="cs-label" for="photos">
<span class="cs-label-text">
Upload Photos
<span class="cs-optional" aria-label="optional">(optional)</span>
</span>
<span class="cs-help-text">Please provide 2-3 photos to help us promote your workshop. Ensure files are identified with your name or business name. You may upload up to 12 photos (Max 10 MB total for all files, image formats supported).</span>
<ul class="cs-photo-suggestions">
<li>A headshot (professional quality not required)</li>
<li>Photos of you teaching or working</li>
<li>A clear photo of the finished product participants will create</li>
</ul>
<p class="cs-help-text"><em>If you do not have photos ready now, you may skip this section and submit them later.</em></p>
<input class="cs-input cs-file-input" type="file" id="photos" name="photos" accept="image/*" multiple aria-describedby="photo-requirements">
<span id="photo-requirements" class="sr-only">Maximum 12 files, 10MB total, image formats only</span>
<div id="file-list" class="cs-file-list" style="display: none;"></div>
</label>
</div>
</fieldset>
<!-- Workshop Proposal Section -->
<fieldset class="cs-fieldset">
<legend class="cs-legend">Workshop Proposal</legend>
<label class="cs-label" for="workshop-title">
<span class="cs-label-text">
Workshop Title
<span class="cs-required" aria-label="required">*</span>
</span>
<input class="cs-input" required type="text" id="workshop-title" name="workshop-title" placeholder="e.g., Introduction to Watercolor Landscapes" aria-required="true">
</label>
<label class="cs-label" for="workshop-description">
<span class="cs-label-text">
Workshop Description
<span class="cs-required" aria-label="required">*</span>
</span>
<textarea class="cs-input cs-textarea" required name="workshop-description" id="workshop-description" placeholder="Describe what participants will learn and create in your workshop..." rows="6" aria-required="true"></textarea>
</label>
<label class="cs-label cs-half-width" for="max-class-size">
<span class="cs-label-text">
Maximum Class Size
<span class="cs-required" aria-label="required">*</span>
</span>
<input class="cs-input" required type="number" id="max-class-size" name="max-class-size" placeholder="e.g., 12" min="1" aria-required="true">
<span class="cs-help-text">Our studio comfortably seats 12 people. What is your ideal maximum?</span>
</label>
<label class="cs-label cs-half-width" for="min-enrollment">
<span class="cs-label-text">
Minimum Enrollment Needed
<span class="cs-required" aria-label="required">*</span>
</span>
<input class="cs-input" required type="number" id="min-enrollment" name="min-enrollment" placeholder="e.g., 4" min="1" aria-required="true">
<span class="cs-help-text">The minimum number of registrations required for you to run the workshop.</span>
</label>
<label class="cs-label" for="availability">
<span class="cs-label-text">
Availability
<span class="cs-required" aria-label="required">*</span>
</span>
<textarea class="cs-input cs-textarea" required name="availability" id="availability" placeholder="e.g., Weekday evenings, Saturday mornings..." rows="3" aria-required="true"></textarea>
<span class="cs-help-text">What day of the week and time of day would you like to teach?</span>
</label>
<label class="cs-label" for="experience-level">
<span class="cs-label-text">
Experience Level
<span class="cs-required" aria-label="required">*</span>
</span>
<select class="cs-input" required id="experience-level" name="experience-level" aria-required="true">
<option value="" disabled selected>Select experience level</option>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
<option value="all-levels">All Levels</option>
</select>
<span class="cs-help-text">What would you like the experience level of your students to be?</span>
</label>
<label class="cs-label" for="age">
<span class="cs-label-text">
Age Range
<span class="cs-required" aria-label="required">*</span>
</span>
<select class="cs-input" required id="age" name="age" aria-required="true">
<option value="" disabled selected>Select age range</option>
<option value="adults-18+">Adults (18+)</option>
<option value="teens-13-17">Teens (13-17)</option>
<option value="children-6-12">Children (6-12)</option>
<option value="all-ages">All Ages</option>
<option value="families">Families</option>
</select>
<span class="cs-help-text">Please indicate the age range of your students.</span>
</label>
<label class="cs-label" for="price-per-person">
<span class="cs-label-text">
Proposed Price Per Person
<span class="cs-required" aria-label="required">*</span>
</span>
<input class="cs-input" required type="number" id="price-per-person" name="price-per-person" placeholder="e.g., 65" min="0" step="5" aria-required="true">
<span class="cs-help-text">Artists receive 50% of total ticket sales.</span>
</label>
<label class="cs-label" for="setup-requests">
<span class="cs-label-text">
Set-up Requests
<span class="cs-optional" aria-label="optional">(optional)</span>
</span>
<textarea class="cs-input cs-textarea" name="setup-requests" id="setup-requests" placeholder="e.g., access to an electrical outlet, proximity to a sink, specific table arrangements..." rows="4"></textarea>
</label>
<label class="cs-label" for="additional-info">
<span class="cs-label-text">
Additional Information
<span class="cs-optional" aria-label="optional">(optional)</span>
</span>
<textarea class="cs-input cs-textarea" name="additional-info" id="additional-info" placeholder="Share anything else we need to know or any questions you have for us..." rows="4"></textarea>
</label>
<fieldset class="cs-radio-group">
<legend class="cs-radio-legend">
Materials Checklist
<span class="cs-required" aria-label="required">*</span>
</legend>
<p class="cs-help-text cs-radio-description">Please specify whether the materials will be provided by Lightspire or by you. This fee may be added to the class tuition total or paid directly to the instructor by students (via Venmo, cash, or check).</p>
<label class="cs-radio-label">
<input type="radio" required name="materials-provider" id="materials-instructor" value="instructor-provides" class="cs-radio-input" aria-required="true">
<span class="cs-radio-text">
<strong>You provide materials:</strong> You bring all necessary supplies for the participants. You retain ownership of all unused supplies.
</span>
</label>
<label class="cs-radio-label">
<input type="radio" required name="materials-provider" id="materials-studio" value="studio-provides" class="cs-radio-input" aria-required="true">
<span class="cs-radio-text">
<strong>The studio provides materials:</strong> Please provide a list of all required items at least 21 days before the workshop. Upon completion of the workshop, any unused supplies will be kept by the studio.
</span>
</label>
</fieldset>
</fieldset>
<!-- Terms & Conditions -->
<div class="cs-terms-wrapper">
<label class="cs-checkbox-label">
<input type="checkbox" required name="agree-terms" id="agree-terms" class="cs-checkbox" aria-required="true">
<span class="cs-checkbox-text">
I agree to the terms and conditions below
<span class="cs-required" aria-label="required">*</span>
</span>
</label>
<div class="cs-terms-box" role="region" aria-label="Terms and Conditions">
<h3 class="cs-terms-title">Terms & Conditions</h3>
<p class="cs-terms-text">Your submission indicates agreement to the following terms:</p>
<ul class="cs-terms-list">
<li>Your name, email address, phone number, city/state and photo upload will be recorded upon form submission.</li>
<li>By submitting this form, you agree to the 50/50 ticket sales split compensation structure.</li>
<li>Lightspire Art Studios reserves the right to select and schedule workshops that align with our studio's mission and community interests.</li>
</ul>
</div>
</div>
<button class="cs-button-solid cs-submit" type="submit">Submit Proposal</button>
</form>
Hi, @jzenko. Were the links to Cloudfront not Cloudflare? I ask because Netlify doesn’t use Cloudflare (but we have/do use Cloudfront).
Also, the HTML form itself is a less than ideal troubleshooting method. To really troubleshoot, I need access to the live form on the site so I can test submitting the form.
I’m sending this to the helpdesk so we can troubleshoot in more detail there. If you see an email arrive for the new support ticket, would you be willing to please reply to it to add a link to the live form on the site when it arrives? If so, that will skip us a step ahead in the troubleshooting workflow. (To be clear, please add the link in the support ticket email reply - not here. Unless you want to debug this in public then replying here is fine too.)
Hey @luke 
,
Thanks for reaching out!
We’ve gone ahead and created a support ticket for you, so our team can follow up with you directly via email from the help desk. Our Support crew will be in touch with you by email soon.
Great news: these days anyone can reach out to Netlify Support. First, you can try getting an answer using Ask Netlify, our helpful AI search tool. If your question isn’t answered there, you can submit a ticket using the support form, and we’ll take it from there.
We’re keeping the community around for swapping ideas, sharing tips and tricks, and talking shop with other folks building on the platform — but for support issues, tickets are the way to go.
Thanks for being here, and keep an eye out for that email from us!
Hey @jzenko ,
Similar to above, your issue has also been escalated.