Does anyone know how to make my login form work without PHP
such that if I enter a specific email and password it will go to a specific page? So basically it would function as a login page.
Please help
This is my code:
<div class="container" id="container">
<div class="form-container sign-up-container">
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Login</h1>
<span>Login with your education Account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
</div>
<div class="overlay-panel overlay-right">
<h1 style="color:white;">Department of Education</h1> <br>
<img src="doe-logo-white.png">
<p>Enter your personal details and start journey with us</p>
</div>
</div>
</div>
</div>
Related
I wrote this simple form that should require the users to input their phone number if the submit button is hit. Instead, nothing happens. Can someone please help me?
Here is the code for my form:
<form id="subscribeForm" method="POST" novalidate="novalidate">
<div class="payment margin-top-30">
<div class="payment-tab payment-tab-active">
<div class="payment-tab-trigger">
<input checked id="{PAYMENT_TYPES.folder}"
class="payment_method_id" name="payment_method_id"
type="radio"
value="{PAYMENT_TYPES.id}" data-name="m-pesa2">
<label for="{PAYMENT_TYPES.folder}">{PAYMENT_TYPES.title}</label>
<img class="payment-logo {PAYMENT_TYPES.folder}"
src="{SITE_URL}includes/payments/{PAYMENT_TYPES.folder}/logo/logo.png"
alt="{PAYMENT_TYPES.title}">
</div>
<div class="payment-tab-content">
<p>
A Push notification shall be sent to the Phone
Number to complete payment.
</p>
<div class="payment-tab-content">
<div class="row payment-form-row">
<div class="col-12">
<div class="card-label form-group">
<input type="text" class="form-control"
name="phone" placeholder="Phone Number" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" name="Submit" class="button big ripple-effect
margin-top-40 margin-bottom-65 subscribeNow"
id="subscribeNow">submit</button>
</form>
Remove novalidate="novalidate" from <form>
How can I add Contact Form 7 shortcode fields to custom HTML?
I also would like to keep the template (HTML) appearance.
For reference, this template form can be seen in this link right here.
My HTML code:
<div class="background">
<div class="container">
<div class="screen">
<div class="screen-header">
<div class="screen-header-left">
<div class="screen-header-button close"></div>
<div class="screen-header-button maximize"></div>
<div class="screen-header-button minimize"></div>
</div>
<div class="screen-header-right">
<div class="screen-header-ellipsis"></div>
<div class="screen-header-ellipsis"></div>
<div class="screen-header-ellipsis"></div>
</div>
</div>
<div class="screen-body">
<div class="screen-body-item left">
<div class="app-title">
<span>CONTACT</span>
<span>US</span>
</div>
<div class="app-contact">CONTACT INFO : HELLO#CROWNSDEV.COM</div>
</div>
<div class="screen-body-item">
<div class="app-form">
<div class="app-form-group">
<input class="app-form-control" placeholder="NAME">
</div>
<div class="app-form-group">
<input class="app-form-control" placeholder="EMAIL">
</div>
<div class="app-form-group">
<input class="app-form-control" placeholder="SUBJECT">
</div>
<div class="app-form-group message">
<input class="app-form-control" placeholder="MESSAGE">
</div>
<div class="app-form-group buttons">
<button class="app-form-button">SEND</button>
</div>
</div>
</div>
Contact form 7 form:
<label> Your name
[text* your-name] </label>
<label> Your email
[email* your-email] </label>
<label> Subject
[text* your-subject] </label>
<label> Your message
[textarea your-message] </label>
[submit "Send"]
I made a login page on my computer but I don't know how to make it react after login. I am trying to make a website that people can send messages to each other.
I typed in this:
<html>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- The Modal -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<img src="https://clipground.com/images/img_avatar2-png-2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="friends"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="friends" required>
</div>
<label for="keep secrets"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="keep secrets" required>
<div class="container">
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="keep secrets">Forgot password?</span>
</div>
</form>
</div>
</html>
This type of application, a lot more complicated than a single page, i recommend you search for some tutorias like on youtube .-.
This is a good link https://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example
So i was given a custom submission form HTML and CSS code template as shown below
I want to add the HTML mailto: script, so that anytime a employee enters a ticket, it will send to our help desk ticket email. My issue is i am completely lost on where to put it in the code itself so that when they click the submit now icon, it will send to the given address.
<!-- Main -->
<section id="main" class="container 75%">
<header>
<h2>Help Desk Ticket</h2>
<p>Submit a Help Desk Ticket to IT</p>
</header>
<div class="box">
<form method="post" action="#">
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div class="6u 12u(mobilep)">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
</div>
<div class="row uniform 50%">
<div class="12u">
<input type="text" name="subject" id="subject" value="" placeholder="Subject" />
</div>
</div>
<div class="row uniform 50%">
<div class="12u">
<textarea name="message" id="message" placeholder="Description of Problem" rows="6"></textarea>
</div>
</div>
<div class="row uniform">
<div class="12u">
<ul class="actions align-center">
<li></a><input type="submit" value="Submit Ticket" /></li>
</ul>
</div>
</div>
</form>
</div>
</section>
All i want is for them to be able to click "submit ticket" and it will send to our company IT help desk email.
change this
<form method="post" action="#">
to this
<form action="mailto:someone#example.com" method="post" enctype="text/plain">
editing the email address with the recipient you want to send the mail to
I want my Signup and Login form at the same place .By default i want to show the Signup form . On Login Button Click event i want Signup form should be replaced by Login form at the same place or position but its not happening . What is happening is Signup form is coming at top while login form is coming at down . To see the result as of now i have removed Visibility css ..
Here is my Markup ..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-7 text">
<h1><strong>Custom</strong> Authentication Form</h1>
<div class="description">
<p>
Please register or enter credentials to enjoy the app
</p>
</div>
<!-- Trying to add Angular JS Snippet !-->
<div ng-controller="LoginController" class="top-big-link">
<a class="btn btn-link-1" href="" ng-click="$event.preventDefault();Register()">Login</a>
</div>
</div>
<!-- Signup Form Here !-->
<div ng-controller="SignupformController" class="col-sm-5 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Sign up now</h3>
<p>Fill in the form below to get instant access:</p>
</div>
<div class="form-top-right">
<i class="fa fa-pencil"></i>
</div>
<div class="form-top-divider"></div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="form-first-name">First name</label>
<input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-last-name">Last name</label>
<input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-email">Email</label>
<input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email">
</div>
<button type="submit" class="btn">Sign me up!</button>
</form>
</div>
</div>
<!-- Login Form Here !-->
<div ng-controller="LoginformController" class="col-sm-5 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Login now</h3>
<p>Fill in the form below to get instant access:</p>
</div>
<div class="form-top-right">
<i class="fa fa-pencil"></i>
</div>
<div class="form-top-divider"></div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="UserID">User ID</label>
<input type="text" name="UserID" placeholder="User ID..." class="form-first-name form-control" id="UserID">
</div>
<div class="form-group">
<label class="sr-only" for="Password">Password</label>
<input type="text" name="Password" placeholder="Password..." class="form-last-name form-control" id="Password">
</div>
<button type="submit" class="btn">Login!</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Please help me to resolve this ..
This is how I did it:
<div class="col-sm-7 text">
<h1><strong>Atlas</strong> Authentication Form</h1>
<div class="description">
<p>Please register or enter credentials to enjoy the app</p>
</div>
<ul class="nav nav-pills" id="myTab">
<li class="active">Sign Up </li>
<li>Log In </li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="signup">
<div ng-controller="SignupformController" class="col-sm-5 form-box">
...
</div>
</div>
<div class="tab-pane" id="login">
<div ng-controller="LoginformController" class="col-sm-5 form-box">...</div>
</div>
</div>
Here is the JSFiddle demo
What you are actually to achieve is basically the way bootstrap nav-pills work. You just need to display the buttons as nav-pills and then set the respective contents in tab-content class.
Using data-toggle="pill" will automatically switch between the tabs and contents.
(You can add the fade class along the tab-pane class to give the switching a little effect like this :) )