web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Automate / Format Power Automated...
Power Automate
Unanswered

Format Power Automated Email to Look Like MS Form

(0) ShareShare
ReportReport
Posted on by 18

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? 

Categories:
I have the same question (0)
  • CFernandes Profile Picture
    8,482 Most Valuable Professional on at

    @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-power-automate-2-0/  

     

    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!

     

     

     

     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Leaderboard > Power Automate

#1
David_MA Profile Picture

David_MA 251 Super User 2026 Season 1

#2
Haque Profile Picture

Haque 239

#3
Expiscornovus Profile Picture

Expiscornovus 220 Most Valuable Professional

Last 30 days Overall leaderboard