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>