cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
DHall-1
New Member

Format Power Automated Email to Look Like MS Form

My company has started using MS Forms and Power Automated to send email after a form is completed. The email is sending fine but it just plain text questions & answers.  Is it possible to format the Power Automate email to look just like the MS Form after it has been submitted staff? 

1 REPLY 1
CFernandes
Super User III
Super User III

@DHall-1 Yes indeed, you can Format Automated Email to Look Like MS-Forms, but you will need to create the Form layout in HTML.

 

You can find my blog here https://clavinfernandes.wordpress.com/2020/08/04/convert-microsoft-forms-responses-to-pdf-using-powe...  

 

Screenshot of Power Automate Solution with reference to your requirement below:

 

CFernandes_0-1597569110377.png

 

In the Compose action. I have created the HTML.

 

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
 
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
 
input[type=submit] {
  background-color: #65756C;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 20%;
}
 
input[type=submit]:hover {
  background-color: #65756c94;
}
 
.container {
  border-radius: 5px;
  background-color: #FFFFFF;
  padding: 20px;
  max-width:800px;
  margin-left:10%;
  margin-right:10%;
}
 
.header {
  padding: 60px;
  text-align: left;
  background: #65756C;
  color: white;
  font-size: 20px;
  max-width:800px;
  margin-left:10%;
  margin-right:10%;
}
 
.office-form-title{
  font-size:21px;
  color:#0000006b;
  max-width:800px;
  margin-left:5%;
}
 
.question1-title{
  font-size:17px;
  color:#333333d9;
  line-height:1.3;
  font-family:wf_segoe-ui_normal,"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;
}
 
.container-checkbox{
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 
}
 
/* Hide the browser's default checkbox */
.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
 
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
 
/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}
 
/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}
 
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
 
/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
  display: block;
}
 
/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
 
.checkbox-text{
  color:#333333d9;
  line-height:1.3;
  font-family:wf_segoe-ui_normal,'Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;
  font-size: 15px;
}
 
.sort-text {
  background-color: #f2f2f2; 
  color:#333333d9;
  line-height:3.6;
  font-family:wf_segoe-ui_normal,'Segoe UI','Segoe WP',Tahoma,Arial,sans-serif;
  font-size: 15px;
  width: 18%;
  padding-left: 2%; 
}
 
</style>
</head>
<body style="background-image: url(https://forms.office.com/Images/Theme/Intelligence/Getty/computer-table.jpg);">
 
<div class="main">
  <div class="header">
   <h1>BootCampDemo</h1>
  </div>
</div>
<div class="container">
    <div class="office-form-title"><span>BootCampDemo</span></div>
    <br/>
    <form action="/action_page.php" style="max-width:800px;margin-left:5%;margin-right:5%;">
      <label for="fname" class="question1-title">1. Please enter Feedback?</label>
      <br/><br/>
<p>@{outputs('Get_response_details')?['body/r18a8c334b4944471872676bcb537123c']}</p>
      <br/><br/>
      <br/><br/>
    </form>
</div>
</body>
</html>

 

 

In Email action, change the body to code view see screenshot below and pass the HTML.

 

CFernandes_1-1597569310425.png

 

 

Screenshot of the email:

 

CFernandes_0-1597569613680.png

 

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

 

 

 

 

 

Helpful resources

Announcements
MPA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

R2 (Green) 768 x 460px.png

Microsoft Dynamics 365 & Power Platform User Professionals

DynamicsCon is a FREE, 4 half-day virtual learning experience for 11,000+ Microsoft Business Application users and professionals.

Users online (1,161)