1

I need help with making this form work. I need it to send to my email address.

I have bootstrap.js, bootstrapjquery.js and popper.js

I was hoping this would contain something to make the form submit without creating a separate. js file. but if I need to please could you include the js code. I'm a novice at this doing my own local website. So need all the help I can get really.

Thanks in advance.

<!-- Newsletter -->

<section>
  <div class="container text-center">
    <div class="newsletter p-4">
      <form>
        <h5>Sign up to our newsletter</h5>
        <p>Recieve the lastest news and offers by signing up today.</p>
        <div class="form-group text-center">
          <label for="input-name" class="sr-only">Your Name:</label>
          <input type="text" class="form-control text-center" placeholder="full name" id="input-name">
        </div>
        <div class="form-group text-center">
          <label for="input-email" class="sr-only">Your Email:</label>
          <input type="email" class="form-control text-center" placeholder="mail@example.com" id="input-email">
        </div>
        <div class="form-check">
          <label class="form-check-label">
              <input type="checkbox" class="form-check-input" id="input-terms" value="terms">
              I have read and accept the <a href="#" data-toggle="modal" data-target="#modal"> terms and conditions.</a>
            </label>
        </div>
        <div>
          <small class="form-text">You can unsubscribe from the mailing list at anytime</small>
          <button type="submit" class="m-1 btn btn-light">SIGN UP</button>
        </div>
      </form>
      <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="modal-body">
              <p> Bristol Plumber 24-7 do not sell or forward any personal information, we use highly reliable And stable service which is protected by the latest technology. We are unable like every other company to protect your information 100%, but we
                take this very seriously and have every form of protection in place to ensure all areas are covered and protected to our best ability.
              </p>
              <p> The only information we hold is your email and name, this is forward on only back to you or our system administrators for the marketing of our own products, offers and services. Under no circumstances would we ever give or use your details
                for third-party companies.
              </p>
              <p> Should you wish for your details to be removed from our system simple send an email to unsubscribe@bristolplumber247.co.uk, This process may take up to 48 hours. We promise not to spam and to only share information and offers that will benefit
                our customers.
              </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- NEWSLETTER END-->
Bazla
  • 127
  • 2
  • 14

3 Answers3

1

In /url, enter your back-end service endpoint which will accept your html form input.

<html>
 <body>
 <form action="/url" method="post">
 </form>
</body>
</html>
Facundo Colombier
  • 3,487
  • 1
  • 34
  • 40
Vijay Pandey
  • 11
  • 4
  • I'm a total novice when you mention back-end service. Where can I find the URL and where will the email go to? is it something I can find in Cpanel? – Bazla Sep 04 '18 at 13:50
0

you can use ajax to get value from form and function sendmail on the backend

<script>

    $(function () {
        $('.m-1').attr('type', 'button');
        $('.m-1').click(function () {
            let val_check = $('#input-terms').is(":checked");
            if(val_check){
                let val_name = $('#input-name').val();
                let val_email = $('#input-email').val();
                $.ajax()
                $.ajax({
                    method: "POST",
                    url: "some.php",//url sendmail
                    data: { name: val_name, email: val_email }
                })
                .done(function( msg ) {
                    alert( "Data Saved: " + msg );
                });
            } else{
                alert('please accept the terms and conditions');
            }
        })
    });
</script>
trí trần minh
  • 41
  • 4
0

<!-- Newsletter -->

<section>
  <div class="container text-center">
    <div class="newsletter p-4">
      <form>
        <h5>Sign up to our newsletter</h5>
        <p>Recieve the lastest news and offers by signing up today.</p>
        <div class="form-group text-center">
          <label for="input-name" class="sr-only">Your Name:</label>
          <input type="text" class="form-control text-center" placeholder="full name" id="input-name">
        </div>
        <div class="form-group text-center">
          <label for="input-email" class="sr-only">Your Email:</label>
          <input type="email" class="form-control text-center" placeholder="mail@example.com" id="input-email">
        </div>
        <div class="form-check">
          <label class="form-check-label">
              <input type="checkbox" class="form-check-input" id="input-terms" value="terms">
              I have read and accept the <a href="#" data-toggle="modal" data-target="#modal"> terms and conditions.</a>
            </label>
        </div>
        <div>
          <small class="form-text">You can unsubscribe from the mailing list at anytime</small>
          <button type="submit" class="m-1 btn btn-light">SIGN UP</button>
        </div>
      </form>
      <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="modal-body">
              <p> Bristol Plumber 24-7 do not sell or forward any personal information, we use highly reliable And stable service which is protected by the latest technology. We are unable like every other company to protect your information 100%, but we
                take this very seriously and have every form of protection in place to ensure all areas are covered and protected to our best ability.
              </p>
              <p> The only information we hold is your email and name, this is forward on only back to you or our system administrators for the marketing of our own products, offers and services. Under no circumstances would we ever give or use your details
                for third-party companies.
              </p>
              <p> Should you wish for your details to be removed from our system simple send an email to unsubscribe@bristolplumber247.co.uk, This process may take up to 48 hours. We promise not to spam and to only share information and offers that will benefit
                our customers.
              </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- NEWSLETTER END-->
13DS Harishankar
  • 1