Steps for submitting a form using Bootstrap 4

Hi there! I'm struggling to get this form to function properly by sending data to my email address.

I have included bootstrap.js, bootstrapjquery.js, and popper.js in my setup.

I was hoping to find a solution within this code snippet that allows the form to submit without the need for a separate .js file. If that's not possible, could you kindly provide me with the necessary JavaScript code? I'm fairly new to this and building my own local website, so any assistance would be greatly appreciated.

Thank you in advance.

<!-- Newsletter -->

<section>
  <div class="container text-center">
    <div class="newsletter p-4">
      <form>
        <h5>Sign up to our newsletter</h5>
        <p>Receive the latest 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="example@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 any time</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 does not sell or share any personal information. We use a highly reliable and stable service protected by the latest technology. While we cannot guarantee 100% data protection, we take security very seriously and have implemented measures to safeguard your information to the best of our ability.</p>
              <p>The only data we retain is your email and name, which is only used internally for marketing our products, offers, and services. Under no circumstances will we disclose or provide your information to third-party entities.</p>
              <p>If you wish to have your details removed from our database, please send an email to example@example.com. Please note that this process may take up to 48 hours. We promise not to send spam and only deliver information and offers that 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-->

Answer №1

Fill in the /url field with the URL for your backend service where your html form data will be submitted.

<html>
 <body>
 <form action="/url" method="post">
 </form>
</body>
</html>

Answer №2

Utilize ajax to retrieve input values from a form and call the sendmail function 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>

Answer №3

<!-- Join Our Newsletter -->

<section>
  <div class="container text-center">
    <div class="newsletter p-4">
      <form>
        <h5>Subscribe to our newsletter</h5>
        <p>Get the latest news and exclusive 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3beb2babf93b6abb2bea3bfb6fdb0bcbe">[email protected]</a>" 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 agree to 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 newsletter at any time</small>
          <button type="submit" class="m-1 btn btn-light">SUBMIT</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> We take the privacy of your information seriously. We do not sell or share personal information with third-party companies.</p>
              <p> Your email and name are used for our marketing purposes only and can be removed from our system by emailing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b6e75686e7968786972797e5b796972686f74776b776e76797e69292f2c357874356e70">[email protected]</a>. We promise to only send relevant information and offers that 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>


<!-- END OF NEWSLETTER -->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning a DIV using javascript

Hey everyone, I'm encountering an issue with the JavaScript on my website. I'm struggling to center the div in order to properly display the image I click on. It seems to work fine on the second attempt, but on initial click, the div always appea ...

Encountering a 400 bad request error while trying to upload a file using a flask Ajax call

Currently, I am experimenting with Flask and jQuery to develop a file upload feature. However, the issue I am facing is that whenever I try to upload a file, I receive an error message stating "POST 400 (bad request)". Below is my form.html: <!DOCTYPE ...

Transferring data from JavaScript variables to PHP function through AJAX requests

Within my dashboard.php, there is a JavaScript function triggered by a button click event named getTeamMembers. This function receives values from the user's interaction and passes them to a PHP function also present in dashboard.php. Despite my effo ...

When attempting to access the signup route, AngularJS automatically redirects to the signin route

Every time I launch my application, it redirects me to /signin automatically. However, when I attempt to access the /signup page, it fails to redirect. Is there a way to use next to direct to /signup when the path is http://localhost:9000/signup? Any sugge ...

Transform a single attribute in an array of objects using angularjs and Javascript to a different value

Within an angularjs controller, the following code is used: var ysshControllers = angular.module('theControllers', []); ysshControllers.controller('CommonController', function($scope, $http, $route) { $scope.dbKey = $route ...

Troubleshooting: AngularJS routing issue

I'm facing an issue with my AngularJS routing code. Here is the code snippet: /// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" /& ...

show certain DIVs based on the URL

Is it possible to dynamically display different sections based on the URL? My event website has 3 subevents, and I'd like to show the date of each event in the navigation bar for their respective URLs. <div id="us" class="us-web-date">&nbs ...

Positioning elements in CSS using percentages allows for flexible and responsive

I am new to web design and I am trying to create a webpage similar to the one shown in this image. However, I want to set the height and width of the divs using percentage values instead of pixels. Whenever I attempt this, the boxes end up overlapping or ...

Save the current date in the browser's localStorage

With jQuery Mobile 1.3, I successfully gathered and displayed values from input fields using localStorage through this function: <script type="text/javascript"> function datosCliente (info) { localStorage.setItem(info.name, info.valu ...

Constructing an HTML table with PHP echoes

I am currently developing a PHP script for tracking user attendance. The structure I am aiming for is as follows: Alternatively, you can view my jsFiddle <form action='this_page.php' method='post'> <table> <th>Me ...

What is the best way to style only numbers using CSS in jQuery?

Here is some HTML code that needs styling: <tr> <td>Test</td> <td>324</td> </tr> The default CSS setting is text-align:left However, I am looking to apply text-align:center to any <td> element that contai ...

What is the best way to customize the color of the Option text within a select tag?

I am currently building HTML dynamically and adding it to a select tag within my HTML document. Below is the code I am using: var companies = ["ONE","TWO","THREE","OTHERS","TEN"]; var comapnieshtml = '<option value="" selected>All Companies&l ...

Provide the succeeding line from a CSV document whenever a PHP script is executed

I have implemented highcharts to generate a real-time chart with data that updates dynamically. The chart makes an AJAX call to a PHP file which is responsible for parsing a CSV and returning the output as JSON. Below is my Highcharts/jQuery code: functi ...

Iterating through object using jQuery

I'm facing an issue with iterating through a JSON object for the first time. The JSON is structured like this: { "response": { "2012-01-01": { "Available": 99, "Variations": [ { ...

Getting an UnhandledPromiseRejectionWarning while attempting to navigate through Google Maps using Node.js Puppeteer

(node:15348) UnhandledPromiseRejectionWarning: Error: Execution context was destroyed due to a potential navigation issue. const browser = await puppeteer.launch({headless: false}); const page = await browser.newPage(); page.goto("https://www.google. ...

Tips for showcasing HTML as code tailored to certain programming languages

While browsing the web, I stumbled upon a website that had SQL code displayed with specific classes and styles applied to it. For example, table names were colored blue when inspected. Here is a glimpse of what I encountered: https://i.sstatic.net/WAacj.p ...

Creating a conditional npm script that depends on the output of another: a step-by-step guide

I've encountered this problem before while setting up npm scripts, and I haven't been able to find a solution yet. I'm hoping to make the solution compatible with both Mac and Windows environments. I'm working on splitting up the logic ...

Is animation not functioning for SVG path within a clip path on Firefox?

Creating the HTML for a unique effect: <svg class="svg-defs2" version="1.1" xmlns="http://www.w3.org/2000/svg" height="200" width="640"> <defs> <clipPath id="clipping2"> <!--Adjusting the x-coordinate of start will expand ...

The challenge of handling scopes in Angular-seed

I am currently facing a challenge with creating a pre-routeProvider post. The problem I'm encountering is that $http is coming up as undefined, even though I am passing it to the function as per my understanding. I have made sure to declare angular.js ...

What is the best way to direct attention to the HTML5 canvas element?

I'm having an issue with the HTML5 <canvas> element in Firefox 2.0.0.16 and Safari 3.1.2 on my iMac. Even testing in Firefox 3.0 on Windows did not resolve the problem. Here is the code snippet that seems to be causing the trouble: <td> ...