How to Create Popup Contact Form using Bootstrap Modal

Authors: CodeToday | Bootstrap | Views: 579 | Posted: 08 AM: 10/14/2017

Do you have a menu like the one below and you want to click on "Contact Form" a window will appear without opening a new page?

menu popup contact form bootstrap modal

Today I will guide you how to create a popup contact form using bootstrap modal. 

See more:

Steps to prepare to make contact form bootstrap modal as follows

  1. Css Bootstrap and Google Jquery Library
  2. Contact Form HTML
  3. How to call the Bootstrap Modal to display the popup
data-target="#modal" to call Popup in Bootstrap

HTML Full Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Create Popup Contact Form using Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
     	<div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<?=$domain?>">CodeToday.Net</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">News</a></li>
	    <li><a href="#" data-toggle="modal" data-target="#modal"><b>Contact Form</b></a></li>
          </ul>
        </div>
    </div>
</nav>
<div class="container">
<!--SignUp Form-->
 <div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="text-primary">Contact Form</h4>
        </div>
	<div class="modal-body">
	<div class="row"><div class="col-md-12">
	    <form  method="post" action="" role="form" class="form-horizontal">
            <div class="form-group">
              <label class="col-md-3 control-label" for="name">Name</label>
              <div class="col-md-9">
                <input id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-3 control-label" for="email">Your E-mail</label>
              <div class="col-md-9">
                <input id="email" name="email" type="text" placeholder="Your email" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-3 control-label" for="message">Your message</label>
              <div class="col-md-9">
                <textarea class="form-control" id="message" name="message" placeholder="Please enter your message here..." rows="5"></textarea>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-12 text-right">
                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
              </div>
            </div>	
	</form>		
        </div></div>
	</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>      
    </div>
  </div>
</div>
</body>
</html> 

Result:

How to Create Popup Contact Form using Bootstrap Modal

If you have any questions, please leave a message below