Email communication is an essential part of any online business, and it’s crucial to make it easy for your website visitors to reach you via email. One way to do this is by adding a mailto link on your website.
Did you know you can use a Mailto link in Elementor to enable your website visitors to send you emails using their favourite email client?
In this article, I will guide you step-by-step through the process of how to add email link in Elementor, so you can make it easier for your website visitors to get in touch with you via email.
I’ll show you 3 different ways to use Elementor Mailto Link to prompt your website visitors to open their preferred email client on their computer to send you an email, you can do this by adding a Mailto Elementor Link in a Text Widget, to an Icon Box or to a Header.
We are going to look at these in detail shortly.
Video: Add Elementor Mailto Link Tutorial
Tip: Brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Note that this (below) is what a typical Mailto HTML link looks like.
However, you’re going to see as we continue, that when you’re using mailto in Elementor you’re going to need to make some changes for it to work.
With your Elementor page opened up, let’s get started.
1. Adding Elementor Mailto Link in a Text Widget
In your Widgets area, drag a Text Editor widget to your section (00:51).
Select your text widget and in the Edit Text Editor area on the left, you can type in “Email: your email” for example Email: [email protected].
Highlight your email, then click on the insert link option/icon (01:18).
When you do this, the Elementor text editor widget automatically adds the mailto HTML tag to your email. However, the link is without the ‘href’ prefix (01:29). If you add the href prefix it will not work.
Just click apply (↩), then click the Update button at the bottom.
And with this, your website visitor can just click on the email link and they’ll be able to send you an email using their email client (01:40).
To Read: 3 Ways to Add a Click To Call in Elementor (No Other Plugin)
2. Adding Elementor Email Link to an Icon Box
Another way to prompt your website visitor to send you an email is by adding a mailto link in your icon box.
To use an icon box, go to your widgets area, search for the icon box widget, and drag it to your section. In the edit icon box area, you can add your icon from your icon library, then you can add your email under Title and Description, and on the Link option is where you add the mailto link (remember, add the link without the href prefix) (02:13).
Also Read: Make an Awesome Website Preloader in Elementor Pro v3.6
3. Adding Mailto Link to a Header
In case you want to add a mailto link to a header that wasn’t created with Elementor, for example, one that was made using the Astra theme like in this case:
Go to your WordPress dashboard > Appearance > Customize, click on the Header option, go to Above Header. Here, you have the option to add Text/HTML, that’s where you add your mailto link.
The difference here is; unlike when using Elementor, here you have to add the mailto link with the href prefix, otherwise, the link simply will not work.
So you have to open up the html tag, add your mailto link, then type in your link text, for example ‘send email’ in this case, then of course don’t forget to close off the tags (04:30)
That way when someone clicks on send email, they’re instantly taken to their favorite email client where they can send you their email.
To Read: 2 Amazing Ways To Install Cloudflare Free SSL in WordPress
Adding Mailto Link Elementor FAQ
What is a mailto link?
A “mailto” link is a type of HTML hyperlink that, when clicked, opens the user’s default email client (such as Outlook or Gmail) and creates a new email message addressed to a specific email address.
The syntax for a mailto link is:<a href="mailto:[email protected]">Click here to email me</a>
When a user clicks on this link, their email client will open with a new message addressed to “[email protected]“. The user can then compose their message and send it directly from their email client.
Why would I want to add a Mailto link to my website using Elementor?
Adding a Mailto link to your website makes it easy for visitors to contact you via email. It’s often used for contact forms or to provide a quick way for users to reach out to the website owner or support team.
Can I add a subject line to my Mailto link using Elementor?
Yes, you can include a subject line in your Mailto link by adding “?subject=your subject line” after the email address in the Link field.
What do I do if Elementor mailto link not working?
If you’re using Elementor to create a mailto link and it’s not working, there are a few things you can check:
1. Make sure you’ve entered the correct email address in the link URL. The email address should be preceded by “mailto:” followed by the email address. For example, mailto: [email protected].
2. Double-check the link URL to make sure there are no typos or extra spaces.
3. Sometimes, plugins can conflict with each other and cause issues. Try disabling other plugins one by one to see if the mailto link starts working.
4. Make sure your email client is set up correctly and is functioning properly. You can test this by manually composing an email to the email address in the mailto link.
5. If the mailto link still isn’t working, try opening the link in a different browser to see if it’s a browser-specific issue.
If none of these solutions works, you may want to reach out to Elementor support for further assistance.
Are there any limitations to using Mailto links with Elementor?
Mailto links rely on the user having an email client set up on their device. If the user doesn’t have an email client set up or has disabled the feature, the link may not work. Additionally, some email clients may have security features that prevent Mailto links from working properly.
To create a button with an email link in Elementor, you can follow these steps:
1. Open the Elementor editor and add a Button widget to your page.
2. In the Button settings, go to the Link section and choose “Email” as the link type.
3. Enter the email address you want the button to link to in the Email field.
4. Customize the button text, size, colour, and other settings as desired.
5. Preview and publish your page.
Once you’ve completed these steps, your button will link directly to the email address you specified, allowing visitors to your page to easily send an email without having to manually copy and paste the address.
In Closing
In conclusion, adding an Elementor Mailto link to your website is a simple yet effective way to allow users to send you an email using their email addresses. By following the steps outlined in this article, you can easily create a clickable email link with customized subject and body fields in just a few clicks. By providing a clear and easy way for users to contact you, you can improve user experience and foster stronger connections with your audience.
If you have any comments or questions, let me know below. And for more tips and tutorials, make sure you subscribe to my youtube channel and newsletter
