I am not encountering any error messages, but when I attempt to click on the form, the mouse cursor does not change to the expected form type

While there are no errors showing up in the Chrome Developers Error code, I am facing an issue with my form where the text fields are not visible. It should be a simple task, but it has turned into a headache for me. I would greatly appreciate any help in resolving this.

 <section class="reservation">
        <img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
        <div class="wrapper">
            <div class="container-fluid">
                <div class=" section-content">
                    <div class="row">
                        <div class="col-md-5 col-sm-6">
                            <form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
                                      {{ csrf_field() }}

                                <div class="row">
                                    <div class="col-md-6 col-sm-6">

                                    <div class="form-group">
                                        <input type="text" class="form-control reserve-form empty iconified" name="name" id="name"
                                               placeholder="  &#xf007;  Name">
                                    </div>
                                    <div class="form-group">
                                        <input type="email" name="email" class="form-control reserve-form empty iconified" id="email"  placeholder="  &#xf1d8;  e-mail">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone"  placeholder="  &#xf095;  Phone">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder="&#xf017;  Time">
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3"  placeholder="  &#xf086;  We're listening"></textarea>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <button type="submit" id="submit" name="submit" class="btn btn-reservation">
                                        <span><i class="fa fa-check-circle-o"></i></span>
                                        Make a reservation
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

Answer №1

After integrating the Bootstrap CDN and implementing your code, everything appears to be working correctly. Have you included the CDN as necessary?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="reservation">
  <img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
  <div class="wrapper">
    <div class="container-fluid">
      <div class=" section-content">
        <div class="row">
          <div class="col-md-5 col-sm-6">
            <form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
              {{ csrf_field() }}

              <div class="row">
                <div class="col-md-6 col-sm-6">

                  <div class="form-group">
                    <input type="text" class="form-control reserve-form empty iconified" name="name" id="name" placeholder="  &#xf007;  Name">
                  </div>
                  <div class="form-group">
                    <input type="email" name="email" class="form-control reserve-form empty iconified" id="email" placeholder="  &#xf1d8;  e-mail">
                  </div>
                </div>
                <div class="col-md-6 col-sm-6">
                  <div class="form-group">
                    <input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone" placeholder="  &#xf095;  Phone">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder="&#xf017;  Time">
                  </div>
                </div>
                <div class="col-md-12 col-sm-12">
                  <textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3" placeholder="  &#xf086;  We're listening"></textarea>
                </div>
                <div class="col-md-12 col-sm-12">
                  <button type="submit" id="submit" name="submit" class="btn btn-reservation">
                  <span><i class="fa fa-check-circle-o"></i></span>
                  Make a reservation
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

How to interact with AngularJS drop-down menus using Selenium in Python?

I have been working on scraping a website to create an account. Here is the specific URL: Upon visiting the site, you need to click on "Dont have an account yet?" and then click "Agree" on the following page. Subsequently, there are security questions th ...

A step-by-step guide on utilizing the v-for index loop to showcase a nested JSON array

My JSON Array has the following structure: items: [ { ID: 11, UserID: "test.com", UserRole: "user", timeStamp: "2021-03-23T15:54:02.125578", dialogs: [ { "Bot" ...

How to personalize your Fullcalendar event tooltips with custom profile images

I recently integrated the Fullcalendar plugin by Adam Shaw with Bootstrap 3 on my website to display events created by users. Each event has a popover script that provides additional information when clicked. One feature I would like to add is displaying ...

Node.js and the Eternal Duo: Forever and Forever-Montior

Currently, I am utilizing forever-monitor to launch a basic HTTP Node Server. However, upon executing the JavaScript code that triggers the forever-monitor scripts, they do not run in the background. As a result, when I end the TTY session, the HTTP server ...

The Google Javascript API Photo getURL function provides a temporary URL that may not always lead to the correct photo_reference

Currently, I am integrating Google Autocomplete with Maps Javascript API into my Angular 5 application. As part of my website functionality, I fetch details about a place, including available photos. The photo URL is obtained through the getURL() method. ...

Ways to sort out chosen checkboxes in angularJS

Displayed all the objects in an array as a list using ng-repeat, with a checkbox for each value. My goal is to filter the checkboxes and create a new JSON when clicking Apply Filter based on checked/unchecked values. Current Approach I attempted to stor ...

The horizontal overflow is malfunctioning, resulting in only a limited number of columns being visible on the screen

I am facing an issue with the CSS for my table. Despite using overflow-x: scroll, only half of the columns are being displayed on the screen out of the 15 total columns. Can anyone provide assistance with this problem? .table { font-family: Roboto,"He ...

Utilizing vue-chartjs to display a pair of data figures side by side

In my vue application, I utilize vue-chartjs to showcase some data and I incorporate semantic-ui for the layout. My goal is to display two figures side by side on the screen, but unfortunately, I am facing difficulties achieving this. I have attempted us ...

Cannot display GIF file from the SRC directory in a React application

I am trying to display a gif from the "/src/images" folder in my component, but I keep getting my "old" value displayed instead. What could be causing this issue? Snippet from Danke.js site: import Confetti from "../images/confetti.gif"; <Box sx={{ ju ...

Updating parts of a list using AJAX

Recently, I've encountered a challenge where I need to enable editing functionality on a table column from a database. The goal is to make the column editable when clicked and update the value when clicked out. To achieve this, I decided to utilize A ...

Generate a byte array in JavaScript

How can a byte array be created from a file in JavaScript (or Typescript) to send to a C# WebApi service and be consumable by the C# byte array method parameter? Could you provide an example of the JavaScript code? The context here is an Angular 4+ applic ...

Move the scroll event binding from the parent element to the child element

I'm working on an HTML page with the following structure: <div class="parent"> <div class="child1"> <div class="child2"> </div> </div> </div> Currently, I have a scr ...

The setInterval function continues to execute endlessly even after each interval is three months

I need to remove all expired OTP records every three months. In the file /sheduled-tasks/OTPRecords.js const prisma = require("../services/prisma"); const THREE_MONTHS = 1000 * 60 * 60 * 24 * 90; async function deleteExpiredOTPRecords() { ...

What is the best way to incorporate and execute a separate JavaScript file in a Node application using Express JS?

I am attempting to configure a javascript file that is responsible for grabbing an RSS feed and storing the information in a database. Originally, I had this file called by the HTML page, but now I want it to continuously run in the back-end (constantly re ...

Comparing AngularJS and AppML

As a beginner in AngularJS and AppML, I am curious to understand the strengths and differences between these two frameworks. Despite some similarities I noticed on W3Schools, I'm eager to dive deeper into each one's unique features. ...

Utilize JSON data from a service to populate a Bootstrap Modal

I need assistance with populating a Modal using the JSON values I received from a service call. The object structure is simple and understandable, like this: var object = [ {Value1: "Val1", Value2: "Val", Value3: [{a:"a",b:"b"}] }] The ajax call looks ...

jQuery's show/hide functionality allows for the dynamic resizing of images,

I am experiencing an issue with a Joomla template that has a custom jQuery menu. When I hover over the map with my mouse, the overlay appears slightly larger than expected. This problem seems to be occurring in Firefox and IE 11, leading me to believe it ...

Issue with table cell resizing improperly with scrollable pre content

I'm facing a challenge with resizing my table cell correctly within a variation of the "holy grail" layout. The behavior differs when displaying my main content as a block versus a table-cell. The issue seems to stem from having a scrollable pre bloc ...

CSS3 Animation displaying text color change on various elements in a continuous loop

I was attempting to create a dynamic animation where multiple texts change color, similar to what you can see on https://vercel.com. I have successfully figured out how to make one text change color using keyframes, but I am struggling to make each text ch ...

The navigation menu on major browsers, such as Google Chrome, is malfunctioning and not responding as expected

Hope you're having a wonderful day! ☺️ I recently created a responsive navigation menu bar for mobile devices, but it seems to be malfunctioning on some major browsers like Google Chrome and Bing. Instead of displaying the mobile view, it shows t ...