If you are using Elementor Forms, you might stumble upon the issue with the form upload fields. The Elementor will upload the files in your WordPress media library and just save them as links in your submissions. This guide will show you how to send form attachments as real E-mail attachments.
How to send attachments with Elementor Forms
As we already mentioned, Elementor Forms are strong the uploaded files into your Media Library and inside the Submissions page, you will only see a plain link to the uploaded file.
So, for some users adding files in this way seems to be quite fine. However, some of the users want to email the attached files along with the confirmation email.
To be able to do so, we are gonna need to make small customization related to the form upload field and its behavior.
There are a couple of ways to add the code that will extend the Elementor forms:
- The first one is by adding the custom code inside the functions.php file of your theme.
- The second way it to wrap this code inside a custom plugin
- There is also way to insert the PHP code using some code insertion plugin
Basically, the code will work in the same way no matter which way of adding you choose. But, the option of adding the code via a custom plugin is the best in terms of making sure that the code will stay there. If you input the code inside the functions.php file, you should consider using the child theme as in this way, the code will not get overwritten after the theme updates.
So, let’s head onto the code and stuff.
Elementor Custom code for sending email attachments
In our example, we will use a child theme and insert the following code inside the functions.php file located in our child theme.
I would advise you to paste this code at the end of your functions.php file:
/**
* Class Elementor_Form_Email_Attachments
*
* Send Elementor Form upload field as attachments to email
*/
class Elementor_Form_Email_Attachments {
public $attachments_array = [];
public function __construct() {
add_action( 'elementor_pro/forms/process', [ $this, 'init_form_email_attachments' ], 11, 2 );
}
/**
* @param \ElementorPro\Modules\Forms\Classes\Form_Record $record
* @param \ElementorPro\Modules\Forms\Classes\Ajax_Handler $ajax_handler
*/
public function init_form_email_attachments( $record, $ajax_handler ) {
// check if we have attachments
$files = $record->get( 'files' );
if ( empty( $files ) ) {
return;
}
// Store attachment in local var
foreach ( $files as $id => $files_array ) {
$this->attachments_array[] = $files_array['path'][0];
}
// if local var has attachments setup filter hook
if ( 0 < count( $this->attachments_array ) ) {
add_filter( 'wp_mail', [ $this, 'wp_mail' ] );
add_action( 'elementor_pro/forms/new_record', [ $this, 'remove_wp_mail_filter' ], 5 );
}
}
public function remove_wp_mail_filter() {
$this->attachments_array = [];
remove_filter( 'wp_mail', [ $this, 'wp_mail' ] );
}
public function wp_mail( $args ) {
$args['attachments'] = $this->attachments_array;
return $args;
}
}
new Elementor_Form_Email_Attachments();
Now, save changes and test the form. Your Elementor form will send email attachments along with the email notification. The file link will be stored on the Submissions report page as a reference.
Removing the attachments for Media Library
If you need to remove the attachments for your websites Media Library and just send them as regular email attachments, you might consider adding this code instead:
/**
* Class Elementor_Form_Email_Attachments
*
* Send Elementor Form upload field as attachments to email
*/
class Elementor_Form_Email_Attachments {
// Set to true if you want the files to be removed from
// the server after they are sent by email
const DELETE_ATTACHMENT_FROM_SERVER = false;
public $attachments_array = [];
public function __construct() {
add_action( 'elementor_pro/forms/process', [ $this, 'init_form_email_attachments' ], 11, 2 );
}
/**
* @param \ElementorPro\Modules\Forms\Classes\Form_Record $record
* @param \ElementorPro\Modules\Forms\Classes\Ajax_Handler $ajax_handler
*/
public function init_form_email_attachments( $record, $ajax_handler ) {
// check if we have attachments
$files = $record->get( 'files' );
if ( empty( $files ) ) {
return;
}
// Store attachment in local var
foreach ( $files as $id => $files_array ) {
$this->attachments_array[] = $files_array['path'][0];
}
// if local var has attachments setup filter hook
if ( 0 < count( $this->attachments_array ) ) {
add_filter( 'wp_mail', [ $this, 'wp_mail' ] );
add_action( 'elementor_pro/forms/new_record', [ $this, 'remove_wp_mail_filter' ], 5 );
}
}
public function remove_wp_mail_filter() {
if ( self::DELETE_ATTACHMENT_FROM_SERVER ) {
foreach ( $this->attachments_array as $uploaded_file ) {
unlink( $uploaded_file );
}
}
$this->attachments_array = [];
remove_filter( 'wp_mail', [ $this, 'wp_mail' ] );
}
public function wp_mail( $args ) {
$args['attachments'] = $this->attachments_array;
return $args;
}
}
new Elementor_Form_Email_Attachments();
Now, pay attention to this line of code:
const DELETE_ATTACHMENT_FROM_SERVER = false;
If you want to remove the attachments from the servers after the form has been sent, just set this value to true and save changes.
Conclusion
We illustrated the easy way of customizing the Elementor forms and extending the file uploads functionality. After applying the code you will start receiving the uploaded files by email, instead of checking the submissions page and downloading them manually.
If you stumble upon something, don’t give up. You can always ask for help in the comments section below.
How do I get this to work for multiple files? Only 1 file will send as an attachment.
It should work for all attachments, please do share more feedback so that we could help up.
As Luke said, this php function only displays 1 attachment in email.
update “foreach loop” as follows to attach multiple files:
foreach ( $files as $id => $files_array ){
$len = 20;
for($i = 0; $i attachments_array[] = $files_array[‘path’][$i];
}
Thanks. where should I add it, if I want to send multiple files please?
Could you please post the correct syntax? It says: syntax error, unexpected attachments_array’ (T_STRING)
Thank you
any updates?
Wrong syntax @Ali
// Store attachment in local var
foreach ( $files as $id => $files_array ){
/* New Fix For multiple files */
$len = 20;
for($i = 0; $i attachments_array[] = $files_array[‘path’][$i];
}
best of luck guys, fully works ๐
This returns an error
for($i = 0; $i attachments_array[] = $files_array[โpathโ][$I];
But the explanation was not clear
syntax error, unexpected ‘attachments_array’ (T_STRING), expecting ‘;’
So… what to do?
Sorry, typos…
It should be :
$len = 20;
for($i = 0; $i attachments_array[] = $files_array[‘path’][$i];
}
Instead of :
$len = 20;
for($i = 0; $i attachments_array[] = $files_array[โpathโ][$i];
Hello guys,
I’ve tried this solution but it still not working and there is an error message. Wp goes to debug mode.
Hi Sam,
Appreciate the comment, can you please paste the error message or screenshot of the error message. Thanks.
The code is giving error https://prnt.sc/o-S5lNmeXFKU
Could you please help
https://prnt.sc/gkgA3DVQE6xT
Thanks
Error in the code please help
https://prnt.sc/IfM9RwHwAIhQ
Loving this solution! Like others have mentioned, I can see that the code only removes the 1st attachment. I’m not great with code, could anyone please add the code for multiple attachments here in the comments, so that I can just copy the whole things and paste into my functions please? Would be massively appreciated. Thanks! ๐
Do it like this for multiple files:
—–
class Elementor_Form_Email_Attachments {
public $attachments_array = [];
public function __construct() {
add_action( ‘elementor_pro/forms/process’, [ $this, ‘init_form_email_attachments’ ], 11, 2 );
}
public function init_form_email_attachments( $record, $ajax_handler ) {
$files = $record->get( ‘files’ );
if ( empty( $files ) ) {
return;
}
foreach ( $files as $id => $files_array ) {
$len = 20;
for($i = 0; $i attachments_array[] = $files_array[‘path’][$i];
}
}
if ( 0 attachments_array ) ) {
add_filter( ‘wp_mail’, [ $this, ‘wp_mail’ ] );
add_action( ‘elementor_pro/forms/new_record’, [ $this, ‘remove_wp_mail_filter’ ], 5 );
}
}
public function remove_wp_mail_filter() {
$this->attachments_array = [];
remove_filter( ‘wp_mail’, [ $this, ‘wp_mail’ ] );
}
public function wp_mail( $args ) {
$args[‘attachments’] = $this->attachments_array;
return $args;
}
}
new Elementor_Form_Email_Attachments();
The code is giving error https://prnt.sc/o-S5lNmeXFKU
Could you please help
https://prnt.sc/gkgA3DVQE6xT
Thanks
How to include a file as attachment already in the server?
For example an agreement form where the user inputs his details, and uploads file requirements; so that, it needs to attach both the uploaded file and the agreement file already in the server.
Use this code to add a file attachment already in the server.
$this->attachments_array[] = $filename_with_path;
Add it before
// if local var has attachments setup filter hook
For those who did not get the multiple file attachments to work, use the original code and make the necessary corrections as below:
// Store attachment in local var
foreach ( $files as $id => $files_array ) {
foreach ( $files_array[‘path’] as $paths ) {
$this->attachments_array[] = $paths;
}
}
i get the urls in the mail but i also want the files as an attachment?
Is there a working fix for multiple files yet?
None of the code above seems to do the trick??
I’m trying to use the second original code to delete attachments from the server, but only the first attachment is attaching and deleting. None of the multiple attachment solutions work – they’re not even attaching or deleting the first uploaded file?
What am I doing wrong?
Hello, thank you very much for the contribution, I successfully implemented it on my site. But in my case I have a small problem, the attached files are also attached in Email2, I send it to the user as confirmation. There is a possibility to prevent them from being attached to the confirmation email. Thank you very much for the help
Hello Marielisa
Did you get it to work with multiple files?
If you did, would you mind sharing how you did it? ๐
Is it possible for the email received from an Elementor form to keep the original name of the attached file, like in ContactForms7?
That’s actually something I wanna know too.
The $files array only provides a url and a path. No name. It seems as if Elementor saves the files only with the temporary file name.
This is perfect, thank you so much!
Hi guys, maybe it’s too late, but this is the real solution:
// Store attachment in local var
foreach ( $files as $id => $files_array ){
$len = count( $files_array[‘path’] );
for($i = 0; $i attachments_array[] = $files_array[‘path’][$i];
}
}
Instead of this one which has syntax errors:
// Store attachment in local var
foreach ( $files as $id => $files_array ){
$len = 20;
for($i = 0; $i attachments_array[] = $files_array[โpathโ][$i];
}
oooops, now I see the problem. I wrote the function right but it looks wrong on this wall! It is cut!!
Could you write the right code please!
There is something wrong with the code, could you post it somewhere else because it seems like this site is deleting some portion of the code when you post it here. Maybe pastebin or something?