I am trying to create a modal effect for my form that has a "Send" button. I want it so when the user presses the button, they will receive a pop-up effect saying that their message has been submitted. How can I do this with the usage of the form and input tags? Thanks. Down below is the code I am using.

```css
.container {
        height: auto;
        width: 40%;
        font-family: 'Hind';
        margin: 0 auto;
        margin-top: 40px;
        display: block;
        background: lightblue;
        padding: 20px;
        border-radius: 15px;
        position: absolute;
        left: 20px;
    }
    .container2 {
        height: auto;
        width: 40%;
        font-family: 'Hind';
        margin: 0 auto;
        margin-top: 40px;
        display: block;
        background: lightblue;
        padding: 20px;
        border-radius: 15px;
        position: absolute;
        right: 20px;
        bottom: -220px;
    }
    form {
        font-family: 'Hind';
        padding: 0;
        width: 90%;
        border-radius: 15px;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .feedback-input {
        color: #000;
        font-family: 'Hind';
        font-weight: 400;
        font-size: 18px;
        border-radius: 0;
        margin-right: 0;
        line-height: 22px;
        background-color: none;
        padding: 13px 13px 13px 13px;
        margin-bottom: 10px;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 2px solid #22A7F0;
        border-top: none;
        border-left: none;
        border-right: none;
    }
    .feedback-input:focus {
        box-shadow: 0;
        color: #3498db;
        transition: .4s ease;
        outline: none;
        border-bottom: 2px solid black;
        padding: 13px 13px 13px 13px;
    }
    .focused {
        color: #30aed6;
        border: #30aed6 solid 3px;
    }
    textarea {
        width: 100%;
        height: 150px;
        line-height: 150%;
        resize: vertical;
    }
    #button-blue {
        font-family: 'Hind';
        width: 100%;
        border: none;
        cursor: pointer;
        background-color: #22A7F0;
        color: white;
        font-size: 24px;
        padding-top: 22px;
        padding-bottom: 22px;
        margin-top: -4px;
        font-weight: 700;
        transition: .3s ease;
    }
    #button-blue:hover {
        background-color: rgba(0, 0, 0, 0);
        color: black;
        background: #22A7F0;
    }
    .submit:hover {
        color: #22A7F0;
    }
```

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
            <h1>Contact Form</h1>
            <h2>Reach out to us for any inquiry.</h2>
            <form>
                <p class="name"><input class="feedback-input" id="name" name="name" placeholder="Name" type="text"></p>
                <p class="email"><input class="feedback-input" id="email" name="email" placeholder="Email" type="text"></p>
                <p class="text">
                <textarea class="feedback-input" id="comment" name="text" placeholder="Message"></textarea></p>
                <div class="submit">
                    <input id="button-blue" type="submit" value="SEND!">
                </div>
            </form>
        </div>
    <script src="script.js"></script>
  </body>
</html>
```