SSJS: Dynamic Popup In Landing Page

I've been working on an interesting project that combines email validation, Data Extension insertion, and dynamic popups using SSJS in Salesforce Marketing Cloud. Here are the key points:

1️⃣ Email Validation with Regex in SSJS:

• We use a regular expression to validate email addresses server-side, ensuring only valid emails are processed.

2️⃣ Data Extension Insertion:

• After validation, we insert the records into a Data Extension seamlessly using SSJS, enabling effective data management.

3️⃣ Dynamic Popup Creation:

• Upon form submission, a dynamic popup is generated using SSJS to provide instant feedback to the user.

Check out the code snippet below to see how it's done!

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Form with Popup</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f4f4f4;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

        }

        .form-container {

            background-color: white;

            padding: 20px;

            border-radius: 8px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            width: 300px;

        }

        .form-container h2 {

            margin-top: 0;

        }

        .form-group {

            margin-bottom: 15px;

        }

        .form-group label {

            display: block;

            margin-bottom: 5px;

        }

        .form-group input {

            width: 100%;

            padding: 10px;

            border: 1px solid #ccc;

            border-radius: 4px;

        }

        .form-group input[type="submit"] {

            background-color: #28a745;

            color: white;

            border: none;

            cursor: pointer;

        }

        .form-group input[type="submit"]:hover {

            background-color: #218838;

        }

        .popup {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.5);

            justify-content: center;

            align-items: center;

        }

        .popup-content {

            background-color: white;

            padding: 20px;

            border-radius: 8px;

            text-align: center;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }

        .popup-content button {

            margin-top: 10px;

            padding: 10px 20px;

            background-color: #007bff;

            color: white;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }

        .popup-content button:hover {

            background-color: #0056b3;

        }

    </style>

    <script>

        function showPopup(message) {

            var popup = document.getElementById('popup');

            var popupContent = document.querySelector('#popup .popup-content p');

            popupContent.innerText = message;

            popup.style.display = 'flex';

        }

        function closePopup() {

            document.getElementById('popup').style.display = 'none';

        }

    </script>

</head>

<body>

    <div class="form-container">

        <h2>Submit Your Details</h2>

        <form id="myForm" action="%%=RequestParameter('PAGEURL')=%%" method="POST">

            <div class="form-group">

                <label for="name">Name:</label>

                <input type="text" id="name" name="name" required>

            </div>

            <div class="form-group">

                <label for="email">Email:</label>

                <input type="email" id="email" name="emailAddress" required>

            </div>

            <div class="form-group">

                <input type="submit" value="Submit">

            </div>

        </form>

    </div>

    <div id="popup" class="popup">

        <div class="popup-content">

            <p>Form submitted successfully!</p>

            <button onclick="closePopup()">Close</button>

        </div>

    </div>

    <script runat="server">

        Platform.Load("Core", "1");

        if (Request.Method == "POST") {

            var emailAddress = Request.GetFormField("emailAddress");

            var name = Request.GetFormField("name");

            // Email validation function

            function isValidEmail(email) {

                var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

                return emailRegex.test(email);

            }

            // Validate email address

            if (isValidEmail(emailAddress)) {

                try {

                    // Perform server-side processing, such as inserting the email address into a Data Extension

                    var de = DataExtension.Init("InserRecords");

                    var status = de.Rows.Add({ Name: name, EmailAddress: emailAddress });

                    if (status) {

                        Variable.SetValue("@popupMessage", "Email address submitted successfully.");

                    } else {

                        Variable.SetValue("@popupMessage", "Error submitting email address.");

                    }

                } catch (e) {

                    Variable.SetValue("@popupMessage", "Exception: " + e.message);

                }

            } else {

                Variable.SetValue("@popupMessage", "Invalid email address.");

            }

        }

    </script>

    <div style='display:none' id='popupmessage'>

      %%=v(@popupMessage)=%%

    </div>

    %%[IF NOT EMPTY(@popupMessage) THEN]%%

    <script>

        var getpopmessage = document.getElementById("popupmessage").innerText.trim();

        if (getpopmessage) {

            showPopup(getpopmessage);

        }

    </script>

    %%[ENDIF]%%

</body>

</html>