My email button does not work on Microsoft emails

Question

I have a change email feature in my website, but the problem is it seems to be blocked by Microsoft Outlook (CSP, also I get this post link https://csp.microsoft.com/report/OutlookWeb-Mail-PROD) and the button does not respond to being clicked. It works on the other email clients, so I know the routes are good to my knowledge and it gives a message after being clicked like are you sure you want to open this external page? What should I do to fix it?

This is my email template for changing an email address where the error occurs on Microsoft Outlook

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Global styles */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.4;
            color: #333333;
            background-color: #f2f2f2;
        }

        /* Container */
        .container {
            margin: 0 auto;
            padding: 20px;
            max-width: 600px;
            background-color: #ffffff;
            border: 1px solid #dddddd;
        }

        /* Heading */
        h1 {
            margin-top: 0;
            font-size: 24px;
            text-align: center;
        }

        /* Paragraph */
        p {
            margin-bottom: 20px;
        }

        /* Form */
        form {
            display: block;
            margin-top: 20px;
        }

        /* Form field */
        .form-group {
            margin-bottom: 20px;
        }

        /* Label */
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        /* Submit button */
        .subButton {
            
            display: block;
            margin-top: 20px;
            padding: 10px;
            border: none;
            border-radius: 3px;
            background-color: #007bff;
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
        }

        .align-center {
            text-align: center
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>{{__('messages.emrl')}}</h1>
        <h3>{{__('messages.emyr')}}</h3>
        <form action="{{ route(app()->getLocale() == 'en' ? 'en.emailchangenew' : 'fr.emailchangenew', $token) }}" method="GET">
            <div class="align-center">
            <button class="subButton" type="submit">{{__('messages.emver')}}</button>
            </div>
        </form>
    </div>
</body>
</html>

See also [Adding HTML forms to email](https://stackoverflow.com/questions/10316715/html-form-in-email) — miken32, Apr 04 '23 at 02:00
I solved the issue by converting the
tags to tags and it works like a charm now. — Bqdor, Apr 04 '23 at 21:23

Eugene Astafiev · Answer 1 · 2023-03-26T09:22:44.113

-1

Outlook blocks any scripts in the message body for security reasons (including HTML forms). As a possible workaround you may consider using hyperlinks instead. See HTML <a> Tag. for more information.

edited Mar 26 '23 at 09:22

answered Mar 25 '23 at 18:02

Eugene Astafiev

47,483
3
24
45

score -1 · Answer 2 · answered Mar 25 '23 at 22:13

-1

No email client, including Outlook will run scripts or process HTML forms.

answered Mar 25 '23 at 22:13

Dmitry Streblechenko

62,942
4
53
78

My email button does not work on Microsoft emails

2 Answers2