Email Newsletters Made Easy in SharePoint
Email newsletters are a great way to highlight important events in your organization and spread good news. Utilizing Infowise Ultimate Forms, this process becomes much easier. Rather than relying on additional software outside of SharePoint, you can set up your own system that is flexible and reusable. In this article we'll go through the process of creating your own solution from scratch. From the very beginning Email functionality and features have been right at the core of our product. It make sense that we should be able to use this to send out professional email newsletters.
Choose a Layout
First, you should select a layout that you want to use for your template. Generally this is set up in a table which you can think of as building blocks. All these blocks will stack together to form your newsletter. Below is the layout we created for our most recent webinar Fix Your SharePoint Notifications. Note that you can download this newsletter template from our solution catalog or build your own custom template using the steps provided below.
What Goes in the Newsletter?
A successful newsletter will be sent on a regular schedule. You will need to prepare new information including articles and images each time you send a newsletter. In the above example, it is required that there are 3 articles for each newsletter. How much content will you include in newsletters? Make sure you know this anwer before selecting a layout. This is a commitment that you have to stick with over time. Your organization may only be able to feature one article per newsletter. Make an informed decision before deciding on the layout.
Search for Email Newsletter Templates
It is easy to search the internet for examples of email newsletter templates. Don't worry about the setup just yet. Focus on what looks nice and fits the branding of your organization. Remember that the same layout will be used for every newsletter. Only the article content, links and images will change. The overall structure will remain the same. Generally, the simpler the structure, the easier it will be for you to get everything set up. At this stage your are focused on looking for something that is both attractive and relatively easy to reproduce.
Create a SharePoint List and Form to Collect the Content
Your SharePoint form will collect all the required information to output the newsletter. Here is the form gathering all the required content for the example newsletter:
There are some special considerations on the fields and content that you should follow:
- Images should be hosted on a public web server. This ensures that all images are immediately visible for all users when they receive the email whether or not they are logged in to M365. Work with the person(s) who manage your public web site to get the images loaded.
- Create a standard header image and footer image which will be used like the top and bottom pieces of bread in a sandwich. These images will always be used in every newsletter to create a standard look for all newsletters. Here are those images from our example:
Header image:
Footer image:
Note that the image fields should be created as hyperlink fields in SharePoint using the image option.
You should also create fields to hold the images that will be used in the newsletter which will be changed each time.
The other fields are pretty straight forward. Here is a full list of fields from the example newsletter:
Newsletter Header Image (Hyperlink Field)
Newsletter Footer Image (Hyperlink Field)
Newsletter Date (Date Field)
Story 1 / 2 / 3 Title (Text Field)
Story 1 / 2 / 3 Image (Hyperlink Field)
Story 1 / 2 /3 Text (Multiline Plain Text Field)
Story 1 / 2 / 3 Link (Text Field)
Note that the email content template itself will handle all the text styling such as font size and font colors.
Setting Up the Email Content Layout
The last part is trickiest, but a little bit of AI help comes in handy. In Ultimate forms, when specifying email content, you have the option to switch to code view. This is required in order to load in an HTML Table which is required to get the expected result. The coding required is a bit of a hassle if you do it yourself, but AI is extremely good with helping you. Just prompt for what you need and it should be able to incrementally move you toward your final layout.
Acess the code view option as shown:
Unless you are highly proficient with HTML, this is quite difficult, but AI can easily create your table and make adjustments to the code for you. Just about any AI tool should be able prompts to build an HTML table for an email newsletter. Provide an image showing the layout you are trying to produce and ask for a corresponding HTML table for an email newsletter. No need to code this from scratch!
Here is the layout for the example newsletter provided above. You do not need to write this code yourself - use AI! Note that the field references are in square brackets like this: [Newsletter Header Image]
<table cellpadding="0" cellspacing="0" border="0" style="border:2px solid #333; border-collapse:collapse; border-spacing:0; width:1000px; table-layout:fixed; margin:0; padding:0;">
<!-- HEADER -->
<tr><td colspan="2" style="width:1000px; padding:0; margin:0; line-height:0; font-size:0;"> [Newsletter Header Image] </td></tr>
<!-- STORY 1 IMAGE -->
<tr> <td colspan="2" style="width:1000px; padding:0; margin:0; line-height:0; font-size:0;"> [Story 1 Image] </td> </tr>
<!-- STORY 1 TITLE -->
<tr> <td colspan="2" style="width:1000px; font-size:24px; text-align:center; color:#000; padding:0; margin:0;"> [Story 1 Title] </td> </tr>
<!-- STORY 1 TEXT -->
<tr> <td colspan="2" style="width:1000px; font-size:18px; text-align:left; color:#333; padding:0; margin:0;"> [Story 1 Text] </td> </tr>
<!-- STORY 1 BUTTON -->
<tr> <td colspan="2" style="width:1000px; padding:15px 30px 25px 30px; text-align:left;"> <a href="[Story 1 Link]" style="display:inline-block; background-color:#087565; color:#ffffff; font-family:Arial,sans-serif; font-size:18px; font-weight:bold; text-decoration:none; padding:12px 24px; border-radius:5px;"> Learn more → </a> </td> </tr>
<!-- STORIES 2 AND 3 -->
<tr>
<!-- STORY 2 -->
<td width="500" valign="top" style="width:500px; vertical-align:top; padding:0; margin:0;"> <table cellpadding="0" cellspacing="0" border="0" style="width:500px; border-collapse:collapse; border-spacing:0; margin:0; padding:0;"> <tr> <td style="width:500px; padding:0; margin:0; line-height:0; font-size:0;"> [Story 2 Image] </td> </tr> <tr> <td style="width:500px; font-size:24px; text-align:center; color:#000; padding:0; margin:0;"> [Story 2 Title] </td> </tr> <tr> <td style="width:500px; font-size:18px; text-align:left; color:#333; padding:0 20px; margin:0;"> [Story 2 Text] </td> </tr> <tr> <td style="width:500px; padding:15px 20px 25px 20px; text-align:left;"> <a href="[Story 2 Link]" style="display:inline-block; background-color:#087565; color:#ffffff; font-family:Arial,sans-serif; font-size:18px; font-weight:bold; text-decoration:none; padding:12px 24px; border-radius:5px;"> Learn more → </a> </td> </tr> </table> </td>
<!-- STORY 3 -->
<td width="500" valign="top" style="width:500px; vertical-align:top; padding:0; margin:0;"> <table cellpadding="0" cellspacing="0" border="0" style="width:500px; border-collapse:collapse; border-spacing:0; margin:0; padding:0;"> <tr> <td style="width:500px; padding:0; margin:0; line-height:0; font-size:0;"> [Story 3 Image] </td> </tr> <tr> <td style="width:500px; font-size:24px; text-align:center; color:#000; padding:0; margin:0;"> [Story 3 Title] </td> </tr> <tr> <td style="width:500px; font-size:18px; text-align:left; color:#333; padding:0 20px; margin:0;"> [Story 3 Text] </td> </tr> <tr> <td style="width:500px; padding:15px 20px 25px 20px; text-align:left;"> <a href="[Story 3 Link]" style="display:inline-block; background-color:#087565; color:#ffffff; font-family:Arial,sans-serif; font-size:18px; font-weight:bold; text-decoration:none; padding:12px 24px; border-radius:5px;"> Learn more → </a> </td> </tr> </table> </td>
</tr>
<!-- FOOTER --> <tr> <td colspan="2" style="width:1000px; padding:0; margin:0; line-height:0; font-size:0;"> [Newsletter Footer Image] </td> </tr> </table>
Next Steps
Once your email newsletter template is in place, the rest becomes easy. You should create an M365 group to be used as your email distribution group so that you can set your email trigger system to send to everyone. Be sure that your email is being sent from a no reply type email user account. Be sure to do testing on your newsletters before you send an email blast to your whole organization! Send the newsletter to yourself repeatedly until everything is perfect.
Wrapping Up
Creating professional email newsletters in SharePoint doesn't have to require a separate newsletter platform or a complicated development project. With Ultimate Forms, you can use a simple SharePoint list to collect your content, a reusable HTML template to control the design, and built-in email functionality to distribute the finished newsletter. The initial setup takes a little planning, particularly when choosing your layout and building the HTML template, but once that work is complete, each new newsletter is simply a matter of adding new articles, images and links. Better yet, with AI available to help create and fine-tune the HTML, you don't need to be an HTML expert to build a polished newsletter that can be reused again and again.
Add your comment
