Question 15388 in Laravel Question posted in
The official Laravel Documentation can be found here.

My email button does not work on Microsoft emails – Laravel

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

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search