Bootstrap Modal Submit Form Button Does Nothing

Question

I am very new to using bootstrap and I've never used it to submit a simple form,I just want it to send an email to my email. Below is my source code and I also have files connected to the source code The bootstrap modal works nicely when you hit the notify me but the submit button does nothing so I am sure I am missing something and I can't figure out what.You can see a live version here http://tinytimberscabins.com/construction/index.html What am I missing? Can someone tell me how to get it to work? Any help is appreciated.

This is my Source Code

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Coming Soon </title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin"/>
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&amp;display=swap"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&amp;display=swap" media="print" onload="this.media='all'"/>
    <noscript>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&amp;display=swap"/>
    </noscript>
    <link href="css/bootstrap.min.css?ver=1.2.0" rel="stylesheet">
    <link href="css/font-awesome/css/all.min.css?ver=1.2.0" rel="stylesheet">
    <link href="css/main.css?ver=1.2.0" rel="stylesheet">
  </head>
  <body id="top"><div class="site-wrapper">
  <div class="site-wrapper-inner">
    <div class="cover-container">
      <div class="masthead clearfix">
        <div class="inner">
          <h3 class="masthead-brand">Coming Soon</h3>
          <nav class="nav nav-masthead">
            <a class="nav-link nav-social" href="#" title="Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
            <a class="nav-link nav-social" href="#" title="Twitter"><i class="fab fa-twitter" aria-hidden="true"></i></a>
            <a class="nav-link nav-social" href="#" title="Youtube"><i class="fab fa-youtube" aria-hidden="true"></i></a>
            <a class="nav-link nav-social" href="https://www.instagram.com/tinytimbers_pa/" title="Instagram"><i class="fab fa-instagram" aria-hidden="true"></i></a>
          </nav>
        </div>
      </div>      
      <div class="inner cover">
          <h1 class="cover-heading">Tiny timbers</h1>
        <h1 class="cover-heading">The adventure Begins</h1>
        <p class="lead cover-copy">Hold tight as we get working on our tiny cabins for an astonishing vacation.</p>
        <p class="lead"><button type="button" class="btn btn-lg btn-default btn-notify" data-toggle="modal" data-target="#subscribeModal">Notify Me</button></p>
      </div>
      <div class="mastfoot">
        <div class="inner">
          <p>&copy;<strong>Tiny</strong> Timbers 2022</p>
        </div>
      </div>
      <div class="modal fade" id="subscribeModal" tabindex="-1" role="dialog" aria-labelledby="subscribeModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="subscribeModalLabel">Get Notified on Launch:</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="form-control-label">Enter you e-mail to get notified when we launch</label>
                  <input type="text" class="form-control" id="recipient-name" placeholder="your-name@example.com">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default">Subscribe</a></button>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>
    <script src="scripts/jquery.slim.min.js?ver=1.2.0"></script>
    <script src="scripts/bootstrap.bundle.min.js?ver=1.2.0"></script>
    <script src="scripts/main.js?ver=1.2.0"></script>
  </body>
</html>


  [1]: https://i.stack.imgur.com/jOuDS.jpg

This is my CSS
/*
 * Globals
 */
/* Links */
a,
a:focus,
a:hover {
  color: #fff; }

/* Custom default button */
.btn-default {
  color: #fff;
  text-shadow: none;
  /* Prevent inheritence from `body` */
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 0.5rem 2rem; }

.btn-default:hover,
.btn-default:focus {
  background-color: rgba(255, 255, 255, 0.3); }

/*
 * Base structure
 */
html,
body {
  height: 100%; }

body {
  background: url(../img/beginning.jpg) no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  text-align: center;
  font-family: 'Quicksand', sans-serif; }

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%;
  /* For at least Firefox */
  min-height: 100%;
  background: rgba(48, 53, 70, 0.5);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5); }

.site-wrapper-inner {
  display: table-cell;
  vertical-align: top; }

.cover-container {
  margin-right: auto;
  margin-left: auto; }

/* Padding for spacing */
.inner {
  padding: 30px; }

/*
 * Header
 */
.masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px; }

.nav-masthead {
  text-align: center;
  display: block; }

.nav-masthead .nav-link {
  display: inline-block; }

@media (min-width: 768px) {
  .masthead-brand {
    float: left; }
  .nav-masthead {
    float: right; } }

/*
 * Cover
 */
.cover {
  padding: 0 20px; }

.cover .btn-notify {
  padding: 10px 60px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 40px; }

.cover-heading {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 10px;
  font-size: 2rem;
  margin-bottom: 5rem; }

@media (min-width: 768px) {
  .cover-heading {
    font-size: 3.4rem;
    letter-spacing: 15px; } }

.cover-copy {
  max-width: 500px;
  margin: 0 auto 3rem; }

/*
 * Footer
 */
.mastfoot {
  color: #999;
  /* IE8 proofing */
  color: rgba(255, 255, 255, 0.5); }

/*
 * Subscribe modal box
 */
#subscribeModal .modal-content {
  background-color: #303546;
  color: #fff;
  text-align: left; }

#subscribeModal .modal-header, #subscribeModal .modal-footer {
  border: 0; }

#subscribeModal .close {
  color: #fff; }

#subscribeModal .form-control {
  margin-top: 1rem;
  background: rgba(0, 0, 0, 0.4);
  color: #fff; }
  #subscribeModal .form-control:focus {
    border-color: #49506a; }

/*
 * Affix and center
 */
@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0; }
  .mastfoot {
    position: fixed;
    bottom: 0; }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle; }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%;
    /* Must be percentage or pixels for horizontal alignment */ } }

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 1060px; } }

This is my CSS

/*
 * Globals
 */
/* Links */
a,
a:focus,
a:hover {
  color: #fff; }

/* Custom default button */
.btn-default {
  color: #fff;
  text-shadow: none;
  /* Prevent inheritence from `body` */
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 0.5rem 2rem; }

.btn-default:hover,
.btn-default:focus {
  background-color: rgba(255, 255, 255, 0.3); }

/*
 * Base structure
 */
html,
body {
  height: 100%; }

body {
  background: url(../img/beginning.jpg) no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  text-align: center;
  font-family: 'Quicksand', sans-serif; }

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%;
  /* For at least Firefox */
  min-height: 100%;
  background: rgba(48, 53, 70, 0.5);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5); }

.site-wrapper-inner {
  display: table-cell;
  vertical-align: top; }

.cover-container {
  margin-right: auto;
  margin-left: auto; }

/* Padding for spacing */
.inner {
  padding: 30px; }

/*
 * Header
 */
.masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px; }

.nav-masthead {
  text-align: center;
  display: block; }

.nav-masthead .nav-link {
  display: inline-block; }

@media (min-width: 768px) {
  .masthead-brand {
    float: left; }
  .nav-masthead {
    float: right; } }

/*
 * Cover
 */
.cover {
  padding: 0 20px; }

.cover .btn-notify {
  padding: 10px 60px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 40px; }

.cover-heading {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 10px;
  font-size: 2rem;
  margin-bottom: 5rem; }

@media (min-width: 768px) {
  .cover-heading {
    font-size: 3.4rem;
    letter-spacing: 15px; } }

.cover-copy {
  max-width: 500px;
  margin: 0 auto 3rem; }

/*
 * Footer
 */
.mastfoot {
  color: #999;
  /* IE8 proofing */
  color: rgba(255, 255, 255, 0.5); }

/*
 * Subscribe modal box
 */
#subscribeModal .modal-content {
  background-color: #303546;
  color: #fff;
  text-align: left; }

#subscribeModal .modal-header, #subscribeModal .modal-footer {
  border: 0; }

#subscribeModal .close {
  color: #fff; }

#subscribeModal .form-control {
  margin-top: 1rem;
  background: rgba(0, 0, 0, 0.4);
  color: #fff; }
  #subscribeModal .form-control:focus {
    border-color: #49506a; }

/*
 * Affix and center
 */
@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0; }
  .mastfoot {
    position: fixed;
    bottom: 0; }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle; }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%;
    /* Must be percentage or pixels for horizontal alignment */ } }

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 1060px; } }

score 0 · Answer 1 · answered Feb 15 '22 at 04:39

0

You have 2 things to fix:

The 'Subscribe' button should be a type='submit' and not button. So change:

<button type="button" class="btn btn-default">Subscribe</a></button>

to

<button type="submit" class="btn btn-default">Subscribe</a></button>

Your submit button is not in the form. So either wrap the modal body and footer within the form, or move the button inside the form that is in the modal body.

answered Feb 15 '22 at 04:39

Siddharth Bhansali

2,017
2
10
19

Thank you @SiddharthBhansali I will give that a try. I have a stupid question, how does it know where to send the information when they hit submit? I haven't specified an email address or any thing else. I am new to this and trying to learn, thanks for your patience. – Grecon Feb 15 '22 at 14:18
ok I made the changes and the button does work but I don't know where it goes after you hit the subscribe. How do I get it to send it to my email? Thanks – Grecon Feb 15 '22 at 22:48
You can't send an email directly using just html/css. You can at most, make it open the mail app on the device. For actually sending mail you'll need some sort of SMTP server setup. Refer to: https://stackoverflow.com/questions/8239782/how-to-create-an-email-form-that-can-send-email-using-html/8241925 Also please accept the answer if it helped you. :) – Siddharth Bhansali Feb 16 '22 at 05:55

Bootstrap Modal Submit Form Button Does Nothing

1 Answers1