Contact form with reCaptcha and attachments

[acairns]

Hi,

I am using contact-form-recaptcha-v3.php but also need to send attachments on the form. contact-form-recaptcha-v3.php seems to include code (Step 3) related to sending the attachments, but the attachment doesn’t arrive. I’ve tried .docx, .pdf and .zip files.

So contact-us-advanced.php includes an attachment section, but doesn’t have recaptcha. And contact-form-recaptcha-v3.php has recaptcha, but adding an attachment field
<input class=”form-control d-block” type=”file” name=”attachment” id=”attachment”>
doesn’t seem to send the attachment. (The careers page on our site.)

Is there a way to do both?

Thank you,
Alison

---

[Support]

Hello, we don’t have that on Porto, but here’s an examples of contact form with attachment (input file):

HTML:

<form class="contact-form-recaptcha-v3" action="php/contact-form-recaptcha-v3.php" method="POST">
	<div class="contact-form-success alert alert-success d-none mt-4">
		<strong>Success!</strong> Your message has been sent to us.
	</div>

	<div class="contact-form-error alert alert-danger d-none mt-4">
		<strong>Error!</strong> There was an error sending your message.
		<span class="mail-error-message text-1 d-block"></span>
	</div>

	<div class="row">
		<div class="form-group col-lg-6">
			<label class="form-label mb-1 text-2">Full Name</label>
			<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control text-3 h-auto py-2" name="name" required>
		</div>
		<div class="form-group col-lg-6">
			<label class="form-label mb-1 text-2">Email Address</label>
			<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control text-3 h-auto py-2" name="email" required>
		</div>
	</div>
	<div class="row">
		<div class="form-group col">
			<label class="form-label mb-1 text-2">Subject</label>
			<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control text-3 h-auto py-2" name="subject" required>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-12">
			<label class="form-label mb-1 text-2">Attachment</label>
			<input class="form-control d-block" type="file" name="attachment" id="attachment">
		</div>
	</div>
	<div class="row">
		<div class="form-group col">
			<label class="form-label mb-1 text-2">Message</label>
			<textarea maxlength="5000" data-msg-required="Please enter your message." rows="5" class="form-control text-3 h-auto py-2" name="message" required></textarea>
		</div>
	</div>
	<div class="row">
		<div class="form-group col">
			<input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">
		</div>
	</div>
</form>

* Don’t forget to add the recpatcha Key in the Google Script tag at the end of the file.

** That’s from an older version, but should work with Porto 12+ too.

JS (js/views/view.contact.js): https://pastebin.com/raw/GZED4bsb – Note that I changed the Ajax Submit data details.

PHP (php/contact-form-recaptcha-v3.php): https://pastebin.com/raw/1j25U7PM (Enter line 27 and 56 details)

---

[acairns]

Works like a charm! Thank you for the quick resolution.

---

[Author]

Posts