How to Create a "Send an Email" Button

If you want the users to be able to contact any department or person in your organization easily, this article is for you.

As soon as the customer clicks on the button, an email app will open which will have the contact of the addressee automatically filled in. Just like in this animation:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint web part
  • Step 2: Insert a Button Design Element
  • Step 3: Modify Button Settings
  • Step 4: Apply changes and Save

Prerequisites

• You have the latest ShortPoint SPFx version installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.

Interactive Tutorial

Follow the steps in this interactive tutorial to learn how to add a “Send an email” button on your SharePoint page.

The link details you need to add should follow this format:

    mailto: companyemail@domain.com 

    where you can replace the email address with your company or department email address.

Step-by-step Tutorial

Here are the steps on how to create a “Send an email” button:

Step 1: Edit the ShortPoint web part

• Click the Edit button on the SharePoint page.

• Select the ShortPoint web part where you want to add the button.
• Press the pencil icon to enter ShortPoint edit mode.

Step 2: Insert a Button Design Element

• Go to the space where you want to insert your “Send an email” button.
• Click Add Design Element.

• Choose Button from the Design Element options.

This will insert a generic Button Design Element and open its settings window.

Step 3: Modify Button Settings

• In the Content tab, edit the Title of the button. In our example, we have named the button “Send an email”.
• Go to the Link field and add the HTML mailto link with the following format:

mailto: companyemail@domain.com 

 where you can replace the email address with your company or department email address.

•  (Optional) Modify the design of the button in the Design tab.

Step 4: Apply changes and Save

• Once complete, hit the green checkmark button to finalize your edits.
• You can hit Preview to view your button on the page.
• Remember to hit Save to implement all your changes.

Now you have a button that, when clicked, will automatically open a new email message with the correct email address already added.

Related articles:

• Introduction to ShortPoint Button Design Element
• How to Customize the Button Design Element in Live Mode
• How to Make a Transparent Button (Animated on Mouse Hover)
• How to Make Links or Buttons Open Content in Dialog/Lightbox