so i am new to LARAVEL and i am following a tutoriel. he created a navbar with bootstrap and gets this result :
and me i get this :
this is my code :
app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>WebSite</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
#include('inc.navbar')
#yield('content')
</body>
</html>
navbar.blade.php
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Below are the cdn's
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
use thses cdn's as like below.
<!DOCTYPE html>
<html>
<head>
<title>WebSite</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
Fiddle
Related
hope you are all doing well, i have just face a problem. i make my website online. everything working well expect navbar toggler icon. it is not working on mobile device. it is working well on desktop
here is my code
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.php"><img src="./assests/images/logo.png" class="logo ml-5" alt="file not found" /> </a>
<button class="navbar-toggler " type="button" role="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item <?php if($page == 'home') echo 'active' ?>">
<a class="nav-link " href="index.php"><i class="mr-2 fas fa-home"> </i>Home </a>
</li>
<li class="nav-item <?php if($page == 'about') echo 'active' ?>">
<a class="nav-link" href="about.php"><i class="mr-2 fas fa-users"> </i> About Us</a>
</li>
<li class="nav-item dropdown <?php if($page == 'products') echo 'active' ?>" >
<a class="nav-link dropdown-toggle dropdown-toggle-split" href="products.php" data-toggle="dropdown" id="dropedownMenuButton"aria-expanded="false" aria-hospopup="true" >
<i class="mr-2 fas fa-wrench"> </i>Products
</a>
<ul class="dropdown-menu" aria-labelledby="dropedownMenuButton">
<li class="list-group-item">
<a class="dropdown-item" href="bolts-screws.php"> Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="nuts.php"> Nuts </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="washers.php"> Washers </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="screws.php"> Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="socket-bolt-screws.php"> Socket Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="anchor-fastener.php"> Anchor Fasteners </a>
</li>
</ul>
</li>
<li class="nav-item <?php if($page == 'connect') echo 'active' ?>">
<a class="nav-link" href="connect.php"><i class="mr-2 fas fa-user"> </i> Contact us </a>
</li>
</ul>
</div>
</div>
</nav>
you can check my website also
http://rudrafasteners.com/
It seems you don't add Javascript at your head. Add the followings lines to your HTML <head> tag (Jquery and Bootstrap JS):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Hello everybody i'm new to laravel and php.
today i was able to launch a local laravel website using php artisan serve.
but now i wanted to add a navbar with bootstrap and that worked, but in the navbar i want to add a brand.
unfortunately i have tried many ways to add the path for the image like using ../ and echo path but nothing seems to work. I'm probably doing something wrong :). help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YGP</title>
</head>
<style>
h1
{
font-family: 'Geneva', sans-serif;
}
</style>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="" width="50" height="50" class="d-inline-block align-top" alt="">
YGP
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="content">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
and this is the folder layout:
the image
located in IMAGES/LOGO.PNG
Move your images folder into public. Then access them by
<img src="{{ asset('images/logo.png') }}" alt="" title="">
Anyways, I recommend you to check with Filesystem. The Laravel Flysystem integration provides simple to use drivers for working with local filesystems and Amazon S3. Even better, it's amazingly simple to switch between these storage options as the API remains the same for each system.
it should help!
For more detail document : https://laravel.com/docs/7.x/filesystem
i am new to laravel. currently i am working on laravel 7. i made a navigation bar a seperate file which i extends on all the front end file. i just know that when i need a data from the database in front end
then i do like this
$cat = modelname::all();
return view('addproducts')->with('cat',$cat);
but that code works on that condition when i have to go to that front end blade file. but on navigation bar senario i dont need to go to the nav file i just go to another blade file and nav file is extended on it.
i just want to know how to access the data from the databse on navigation bar
<html>
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
#yield('content')
</body>
</html>
this is the code of my nav file where i want to get the data from the database and then want to show in a dropdown menu
#extends('layouts.nav');
#section('content')
//code for the front end of the page
#endsection
this is how i extend the nav file on another page
#Fahad Munir would something like this work in your case? Using 'include' instead of 'extends'?
#include('layouts.nav', ['cat' => $cat = App\modelname::all();])
If this does not work for your purposes, you may also consider using a View Composer.
See the Laravel documentation about View Composers here: https://laravel.com/docs/7.x/views#view-composers.
Utilizing a View Composer would allow you to add something like the following to the boot() method in your appServiceProvider or after creating a new service provider using artisan and adding to the boot() method after doing that like so:
view()->composer('layouts.nav', function($view) {
$view->with('cat', App\modelname::all());
});
Read more about that in the Laravel documentation here, if need be:
https://laravel.com/docs/7.x/providers#the-boot-method
If your on Laravel 7 then you really need to use the new component feature added to Laravel 7, to do that run php artisan make:component NavigationComponent, this will generate a NavigationComponent class and a navigation-component blade file.
navigation-component.blade.php
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
NavigationComponent.php
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class NavigationComponent extends Component
{
public $cat;
/**
* Create a new component instance.
*
* #return void
*/
public function __construct()
{
$this->cat = CatModel::all();
}
/**
* Get the view / contents that represent the component.
*
* #return \Illuminate\View\View|string
*/
public function render()
{
return view('components.navigation-component');
}
}
For more visit Laravel Component docs
I took the code from the Bootstrap Documentation with my existent code and it crashed it, meanwhile I put the same code in a Test.html and it works. I tried downloading the last version, put all bootstrap.min.css and all that stuff but it doesn't work, tried to put container-fluid at line 18 but the problem persists
I took the code from the Bootstrap Documentation (NavBars).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Also my login.php code (when it collide)
<?php require 'inc/cabecera.inc'; ?>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>Portal web</h1>
</div>
</div>
<div class="row">
<div class="col-sm-4 caja col-centrar">
<form action="login.php" method="POST" role="form">
<legend>Logueate!</legend>
<div class="form-group">
<input name="email" type="text" class="form-control" id="" placeholder="Su email...">
</div>
<div class="form-group">
<input name="contrasena" type="password" class="form-control" id="" placeholder="Su contraseña...">
</div>
<button type="submit" class="btn btn-primary">Ingresar</button>
<a class="pull-right" href="registrarse.php">Registrarse</a>
<label for="" class="checkbox-inline">
<input name="recordar" type="checkbox" value="activo"> Mantener sesión iniciada.
</label>
</form>
</div>
</div>
</div>
<?php require 'inc/footer.inc'; ?>
The problem:
It's all good:
I have no knowledge of PHP at all and am in desperate need of help. I have trawled the web for working examples but none of them are working for me. I need to send the data in the form to an email. I have 3 php files: index.php, contact.php and thank-you.php. Both the index and the contact page have forms on them and after sending the user is directed to the thank-you.php page. I am using localhost (MAMP) but i have also uploaded the website to this domain. Please tell me what I am doing wrong. The following code is located in the contact.php file:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Legal Active - Contact Us </title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="description" content="Index">
<meta name="keywords" content="personal inury specialist, accident,
accident claims, claim, personal injury, claim today,">
<meta name="author" content="Sukhvir Singh">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="../../css/main.css">
<!-- Animate.css -->
<link rel="stylesheet" type="text/css"
href="../../css/animate.css-master/animate.min.css">
<!-- Favicon -->
<link rel='shortcut icon' href='favicon.png' type='image/x-icon'/>
<script src="http://localhost:35729/livereload.js"></script>
</head>
<body>
<!-- Header Navbar -->
<nav class="navbar navbar-header-custom navbar-header-bg-custom">
<ul class="navbar-header-icon nav navbar-nav pull-md-left">
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-dm-down"
href="#">
<i class="navbar-header-link__icon--lg fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-sm-down" href="https://twitter.com/search?src=typd&q=legal%20active%20ltd">
<i class="navbar-header-link__icon--lg fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-sm-down" href="#">
<i class="navbar-header-link__icon--lg fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item hidden-md-up">
<h5 class="navbar-header-link nav-link navbar-header-link--span"> Have a Question? </h5>
<a class="nav-link navbar-header-link" href="tel:01618852353"> Call us NOW
<i class="navbar-header-link__icon fa fa-phone" aria-hidden="true"> </i> 0161 885 2353
</a>
</li>
<li class="nav-item hidden-sm-down">
<h5 class="navbar-header-link nav-link navbar-header-link--lg--span"> Have a Question? </h5>
<a class="nav-link navbar-header-link navbar-header-link--lg" href="tel:01618852353"> Call us NOW
<i class="navbar-header-link__icon--lg fa fa-phone" aria-hidden="true"> </i> 0161 885 2353
</a>
</li>
</ul>
</nav>
<!-- Navbar -->
<nav class="navbar navbar-custom bg-custom">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar4" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
<i class="navbar__icon fa fa-bars" aria-hidden="true"></i>
</button>
<div class="collapse navbar-toggleable-sm" id="exCollapsingNavbar4">
<ul class="nav navbar-nav pull-xs-left col-xs-12">
<li class="nav-item active col-xs-12 col-md-2 offset-md-1">
<a class="nav-link" href="index.php"> HOME </a>
</li>
<li class="nav-item btn-group col-xs-12 col-md-3">
<div class="dropdown">
<button class="btn dropdown-toggle nav-link" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
TYPES OF CLAIMS
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="road-traffic-accident.html"> ROAD TRAFFIC ACCIDENTS </a>
<a class="dropdown-item" href="Slips-Trips-and-Falls.html"> SLIPS TRIPS & FALLS </a>
<a class="dropdown-item" href="accident-at-work.html"> ACCIDENT AT WORK <span class="sr-only">(current)</span> </a>
</div>
</div>
</li>
<li class="nav-item col-xs-12 col-md-3">
<a class="nav-link" href="work-with-us.html"> WORK WITH US </a>
</li>
<li class="nav-item col-xs-12 col-md-1">
<a class="nav-link" href="#"> CONTACT </a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="#">
<i class="nav-link__icon fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="https://twitter.com/search?src=typd&q=legal%20active%20ltd">
<i class="nav-link__icon fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="#">
<i class="nav-link__icon fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="contact">
<h3 class="contact__h3"> CONTACT US </h3>
<div class="contact__divider"> </div>
<div class="contact__text col-xs-12 col-md-5">
Please use the form to tell us what you are enquiring about and somebody from our team will call you shortly.
</div>
<div class="contact__form form col-xs-12 col-md-5 offset-md-1">
<form class="form-group" id="contact__form" action="thank-you.php" method="POST">
<input type="text" class="input form-control fullName" placeholder="Full Name" name="fullName">
<input type="tel" class="input form-control number tel" placeholder="Contact Number" name="contactNumber">
<input type="text" class="input form-control email" placeholder="Email Address" name="email">
<textarea class="input col-xs-12 message" placeholder="Your Message" name="message"></textarea>
<button type="submit" class="form__btn btn btn-secondary"> SEND </button>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<nav class="navbar bg-footer">
<ul class="nav navbar-nav footer__nav">
<img class="footer__nav__logo col-xs-4 col-md-4 col-lg-3 pull-xs-right pull-md-left" src="../../assets/legal-active-logo-large.png" alt="Logo"/>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Legal Active</li>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Magnus House, 8 Ashfield Road, Cheadle, Cheshire, SK8 1BB </li>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Registered in England & Wales - Company No. 123 4567</li>
<li class="footer__nav-item nav-item col-xs-12 col-md-12 col-lg-5 pull-xs-right"> All Rights Reserved © Legal Active </li>
</ul>
</nav>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="../../scss/bootstrap-4/js/tests/vendor/jquery.min.js"></script>
<script src="../../scss/bootstrap-4/js/tests/vendor/tether.min.js"></script>
<script src="../../scss/bootstrap-4/dist/js/bootstrap.min.js"></script>
<script src="../../js/custom-js.js"></script>
</body>
</html>
I have now removed the php code from contact.php to thank-you.php.
Here is the code located in than-you.php:
<?php
$to_mail = "sukhy87#me.com";
$mail_sent = 0;
if(isset($_POST['submit'])){
echo "the form was submitted";
$name = trim(strip_tags($_POST['fullName']));
if($name == "")
$error = true;
$email = trim(strip_tags($_POST['email']));
if($email == "")
$error = true;
$phone = trim(strip_tags($_POST['tel']));
$message = trim(strip_tags($_POST['message']));
if($error != true){
$header = 'From: "Legal Active Website" <no-replylegalactive.co.uk>'."\r\n";
$subject = "New Enquiry";
$message = "New Contact message, received from: <br /> \n ";
$message .= "<b>Name</b> ".$name."<br /> \n";
$message .= "<b>Email</b> ".$email."<br /> \n";
$message .= "<b>Phone</b> ".$phone."<br /> \n";
$message .= "<b>message</b> ".$message."<br /> \n";
if(#mail($to_mail,$subject,$message,$header))
{
echo "mail sent";
$mail_sent = 1;
}
else echo "mail not sent";
} else {
echo 'validation error';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title> Legal Active - Contact Us </title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="description" content="Index">
<meta name="keywords" content="personal inury specialist, accident, accident claims, claim, personal injury, claim today,">
<meta name="author" content="Sukhvir Singh">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="../../css/main.css">
<!-- Animate.css -->
<link rel="stylesheet" type="text/css" href="../../css/animate.css-master/animate.min.css">
<!-- Favicon -->
<link rel='shortcut icon' href='favicon.png' type='image/x-icon'/>
<script src="http://localhost:35729/livereload.js"></script>
</head>
<body>
<!-- Header Navbar -->
<nav class="navbar navbar-header-custom navbar-header-bg-custom">
<ul class="navbar-header-icon nav navbar-nav pull-md-left">
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-sm-down" href="#">
<i class="navbar-header-link__icon--lg fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-sm-down" href="https://twitter.com/search?src=typd&q=legal%20active%20ltd">
<i class="navbar-header-link__icon--lg fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-sm-down" href="#">
<i class="navbar-header-link__icon--lg fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item hidden-md-up">
<h5 class="navbar-header-link nav-link navbar-header-link--span"> Have a Question? </h5>
<a class="nav-link navbar-header-link" href="tel:01618852353"> Call us NOW
<i class="navbar-header-link__icon fa fa-phone" aria-hidden="true"> </i> 0161 885 2353
</a>
</li>
<li class="nav-item hidden-sm-down">
<h5 class="navbar-header-link nav-link navbar-header-link--lg--span"> Have a Question? </h5>
<a class="nav-link navbar-header-link navbar-header-link--lg" href="tel:01618852353"> Call us NOW
<i class="navbar-header-link__icon--lg fa fa-phone" aria-hidden="true"> </i> 0161 885 2353
</a>
</li>
</ul>
</nav>
<!-- Navbar -->
<nav class="navbar navbar-custom bg-custom">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar4" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
<i class="navbar__icon fa fa-bars" aria-hidden="true"></i>
</button>
<div class="collapse navbar-toggleable-sm" id="exCollapsingNavbar4">
<ul class="nav navbar-nav pull-xs-left col-xs-12">
<li class="nav-item active col-xs-12 col-md-2 offset-md-1">
<a class="nav-link" href="index.php"> HOME </a>
</li>
<li class="nav-item btn-group col-xs-12 col-md-3">
<div class="dropdown">
<button class="btn dropdown-toggle nav-link" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
TYPES OF CLAIMS
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="road-traffic-accident.html"> ROAD TRAFFIC ACCIDENTS </a>
<a class="dropdown-item" href="Slips-Trips-and-Falls.html"> SLIPS TRIPS & FALLS </a>
<a class="dropdown-item" href="accident-at-work.html"> ACCIDENT AT WORK <span class="sr-only">(current)</span> </a>
</div>
</div>
</li>
<li class="nav-item col-xs-12 col-md-3">
<a class="nav-link" href="work-with-us.html"> WORK WITH US </a>
</li>
<li class="nav-item col-xs-12 col-md-1">
<a class="nav-link" href="contact.php"> CONTACT </a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="#">
<i class="nav-link__icon fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="https://twitter.com/search?src=typd&q=legal%20active%20ltd">
<i class="nav-link__icon fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="#">
<i class="nav-link__icon fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="submitMessage col-xs-12">
<h5 class="submitMessage__h5 h5"> THANK YOU </h5>
<p class="submitMessage__p p"> A member of our team will be in touch with you shortly </p>
<a class="submitMessage__link link" href="index.php"> Back to homepage </a>
</div>
</div>
</div>
<!-- Footer -->
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<nav class="navbar bg-footer">
<ul class="nav navbar-nav footer__nav">
<img class="footer__nav__logo col-xs-4 col-md-4 col-lg-3 pull-xs-right pull-md-left" src="../../assets/legal-active-logo-large.png" alt="Logo"/>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Legal Active</li>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Magnus House, 8 Ashfield Road, Cheadle, Cheshire, SK8 1BB </li>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Registered in England & Wales - Company No. 123 4567</li>
<li class="footer__nav-item nav-item col-xs-12 col-md-12 col-lg-5 pull-xs-right"> All Rights Reserved © Legal Active </li>
</ul>
</nav>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="../../scss/bootstrap-4/js/tests/vendor/jquery.min.js"></script>
<script src="../../scss/bootstrap-4/js/tests/vendor/tether.min.js"></script>
<script src="../../scss/bootstrap-4/dist/js/bootstrap.min.js"></script>
<script src="../../js/custom-js.js"></script>
</body>
</html>