Sending an email via form in Elementor

How my website visitors can send an email to me via form in Elementor?

In Elementor you can define an action for a Form element that can send an email or redirect to the page after a user submitted the form.

Beware! Form element is a part of the Jupiter X Core elements. Jupiter X Core is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. 

In order to send an email via Form element:

1. In Elementor, drag and drop a Form widget into your layout so that a new panel will open on the left side of the Elementor with the element-specific settings.

2. Go to Content tab and in the Settings section add an Email action.

3. A new Email options panel will emerge at the bottom of the Settings section. So you can define the subject of the Email and other settings into it.

Here are the settings you need to configure in the Email section:

To – enter an email address to which the message should be delivered after the contact form submitted.
Email Subject – add a subject that will be shown in your mailbox.
From Email – enter an email address from which the message is sent.
From Name – add a name from whom the email is sent.
Reply-To – enter an email address to which you can send a reply when the message is received. By default, if this field is empty, the reply will be sent to a sender. You can change it and add other email addresses in Cc and Bcc fields. You can also set it as one of the Email fields inside the form so it sets dynamically as the user fills that field.

4. Update the page.

So by enabling the Email action, you will be notified after a user submitted the form in your website.

Note: You can integrate the MailChimp with Form element. To learn more about it, I suggest you to refer to this article. You can also add a redirect action to the form, so that a user will be redirected to the desired url after submitting the form. To learn more about it please refer to this article.

Use Gromwatik to automate sending highly personalized emails to your users based on their behavior (Free for up to 10,000 emails per month).

Changing the body content of the Email

There is a filter available to change the body of the email. By default, the email template is like showing the [field label]: [field data] per line. But using that filter, you can override the email template. In order to do that, you would need to add the following code into your child theme functions.php file:

add_filter( 'jupiterx_elements_form_email_body',function( $body , $settings , $records){

	$body = '';
	$email = '';
	$name = '';
	$message = '';
	foreach ( $settings['fields'] as $field ) {
		if (strtolower($field['label'])=== 'name') {$name = $records[ $field['_id'] ];}
		if (strtolower($field['label'])=== 'email') {$email = $records[ $field['_id'] ];}
		if (strtolower($field['label'])=== 'message') {$message = $records[ $field['_id'] ];}
	}	


	$body .= 'This is to inform you that ' . $name . ' has been contacted via email ' . $email . ' and the message is: <br> ' . $message ;

	return $body;
	
} , 10, 3 );

For any field you add to your form, you can get it’s value inside the foreach statement like this:

if (strtolower($field['label'])=== 'name') {$name = $records[ $field['_id'] ];}

And in the end, stick all of them in one variable and return that variable. You can add HTML tags inside the template.