CODEWITHSUNDEEP
javascripthtmlcss
Giorgio Vitanza
Giorgio Vitanza

Reputation: 171

Email form in a window alert or similar?

What I want to achieve is creating a form that will open when pressing the link, where people can put their email and then email me directly from that form. I want that form to be displayed in let's say a window alert that opens when clicking the icon link. I was also wondering if there are ways I can stylize this form. I am not expecting to use CSS and HTML only, I can also use Java Script.

Upvotes: 0

Views: 62

Answers (2)

Alex
Alex

Reputation: 829

try this: https://jsfiddle.net/3p8akoy8/

thats not a pure JS alert, but a popup window. With a bit love and CSS you'll be able to make it loke pretty neat.

$('.openForm').click(function() {
    $('.popup').addClass('visible');
});
$('.closeForm').click(function() {
    $('.popup').removeClass('visible');
});
.openForm {
    color:blue;
    cursor:pointer;
}

.popup {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
}

.visible {
    display:block;
}

.popup .form {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    width:300px;
    height:200px;
    background:white;
    border:solid 1px #ddd;
}

.popup .closeForm {
    position:absolute;
    top:0;
    right:0;
    cursor:pointer;
    color:#ccc;
}

.popup .closeForm:hover {
    color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="openForm">Click Me</div>
<div class="popup">
    <div class="form">
        <div class="closeForm">X</div>
        <input type="email" name="email" placeholder="Enter your E-Mail...">
    </div>
</div>

EDIT: here's an updated version with a send button and a little test-response in JS. Usually you would either use the form tags action attribute or an AJAX call with js.

Upvotes: 1

Driesigner
Driesigner

Reputation: 71

You could use a bootstrap modal, and put the form in there. http://getbootstrap.com/javascript/#modals

Upvotes: 0

Related Questions