Elementor Forms – How to Send Form uploads as E-mail attachment

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.

submissions file link
The submission report contains the link to uploaded files

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.

Share this post if you like it.
Default image
Davor Veselinović
I'm Davor, founder of Worda Themes. Working as a Full Stack Developer with more than a decade of experience with WordPress. I build themes and plugins and enjoy writing useful blog posts and share my ideas with others.

Leave a Reply