First off I’m pretty new with the Netlify platform but I am loving it!
I am working on a site for a friends business and I am trying to get a contact form working with the ability for the user to upload a resume. It’s being built using create react app. The site name is https://clever-babbage-036ee8.netlify.app.
I am able to receive everything from the form except the attachment that the user uploads. I followed the documentation on setting up a contact form for a stateless react app. Will the stateless react app instructions work with file upload or do I have to construct it as a stateful react form? Thanks in advance for the help!
In the index.html file I have set up a hidden static version of the form that looks like this.
<form action="/" name="contact" netlify netlify-honeypot="bot-field" hidden>
<select name="contactType" ></select>
<input type="file" name="resume" />
<input type="text" name="company" />
<input type="text" name="first" />
<input type="text" name="last" />
<input type="tel" name="phone" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>
In my Contact Component I have my form built with corresponding fields and have included the “hidden form-name” field in the the form. The entire form looks like the code below.
<form action="/" name="contact" method="POST">
<input type="hidden" name="form-name" value="contact" />
<div className="question">
<h3>I'm Looking For</h3>
<select name="contactType" onChange={handleChange}>
<option value="general">Answers to General Questions</option>
<option value="company">Talented Technology Professionals</option>
<option value="employee">
Opportunities With A Great Company
</option>
</select>
</div>
<div className="resume">
<input type="file" id="uglybutton" onChange={seeFile} name="resume" />
<label
htmlFor="uglybutton"
id="uploadText"
type="file"
name="resume"
>
{fileName}
</label>
</div>
{type}
<div className="fullname">
<input
type="text"
className="first"
placeholder="* First Name"
name="first"
/>
<input
type="text"
className="last"
placeholder="* Last Name"
name="last"
/>
</div>
<div className="info">
<input
type="tel"
className="phone"
placeholder="* Phone Number"
name="phone"
/>
<input
type="email"
className="email"
placeholder="* Email"
name="email"
/>
</div>
<div className="message">
<textarea
name="message"
rows="6"
placeholder="* I'd Like To Know More About..."
></textarea>
</div>
<div className="send">
<button>Submit</button>
</div>
</form>