What is actually the issue?
If you are like me, an avid elementor user, who prefers elementor over every other page builder out there and prefers to use as less external plugins as possible, you must have been frustrated when you found out that, we cant really get the file upload field to work properly as we wish it would.
The issue is that the uploaded files get stored into our server and takes up a huge chunk of our site storage and thus overtime may end up affecting the performance of our site, another thing that becomes irritating while we open our form submission mails is that we are not really getting those files as attachments into our mailbox, instead we get a link to the actual files, that are uploaded in our server. In some way this can be a potential security issue too, that is hackers can upload malicious files into our server through these upload fields.
Ok, the solution .
As previously stated, Elementor Forms are storing the uploaded files into your Media Library, and you will only see a plain link to the uploaded file on the Submissions page. The sad news is that we cant really adjust it without a little bit of coding knowledge, but that’s not an issue, we’ve taken care of that issue.
First we have to install a plugin called Code Snippets, of course you can completely skip this part if you have a child theme installed on your site and you’re comfortable enough in editing the functions.php of your site, but since much of us are not familiar with php codes, editing a core file can anytime turn into a nightmare. So my advice would be to just install the code snippets plugin and paste these codes as individual snippets and that way if anything goes wrong you can just remove that snippet or uninstall the plugin or in worse case, that your WP dashboard is completely inaccessible, you can just delete the plugin folder through file manager from your cPanel and get it over with.
FInally, the custom code for sending email attachments for elementor form
So as we discussed earlier, install and activate code snippets plugin and create a new snippet and then give it a name and paste this code at that snippet field. Hit save & activate.
/**
* 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();
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 and Voilà its done
Conclusion
We demonstrated how to easily customise Elementor forms and extend the file uploads functionality. After you apply the code, you will begin receiving uploaded files via email instead of visiting the submissions page and manually downloading them.
Do try this trick and don’t give up if you come across something. You can always ask for help here.