cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
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
Resident Rockstar
Resident Rockstar

@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
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

Users online (12,127)