Format Power Automated Email to Look Like MS Form

DHall-1 · ‎08-15-2020

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?

CFernandes · ‎08-16-2020

@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:

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.

Screenshot of the email:

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!