I'm trying to make authentication/registration page via bootstrap on wordpress
Here is my code which I inserted with Bootstrap Modal.
The problem is that when I enter login/password and hit Enter button, it just closes modal. when I click to open the modal again, my typed information is there and I still can click login button to login. I coped code from WordPress login page (which engine I'm currently using).
How to make Enter log me automatically?
<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 id="Login">
<ul class="nav nav-pills">
<li class="active">ავტორიზაცია</li>
<li>რეგისტრაცია</li>
</ul>
</h5>
</div>
<div class="pill-content">
<div class="pill-pane active" id="loginpill">
<div class="modal-body">
<form name="loginform" id="loginform" action="/wp-login.php" method="post">
<p>
<input type="text" name="log" id="user_login" class="input span5" style="height:50px;font-size:20px" placeholder="სახელი" size="40" /></label>
</p>
<p>
<input type="password" name="pwd" id="user_pass" class="input span5" style="height:50px;font-size:20px" placeholder="პაროლი" size="40" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> დამიმახსოვრე</label></p>
</div>
<div class="modal-footer">
პაროლის აღდგენა
<button class="btn" data-dismiss="modal" aria-hidden="true">დახურვა</button>
<input type="submit" name="wp-submit" id="wp-submit" class="btn btn-primary" value="შესვლა" />
<input type="hidden" name="redirect_to" value="/" />
<input type="hidden" name="testcookie" value="1" />
</div>
</form>
</div>
<div class="pill-pane" id="registrationpill">.v..</div>
</div>
</div>
Try putting the button that closes the modal outside of <form>:
<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 id="Login">
<ul class="nav nav-pills">
<li class="active">ავტორიზაცია</li>
<li>რეგისტრაცია</li>
</ul>
</h5>
</div>
<div class="pill-content">
<div class="pill-pane active" id="loginpill">
<div class="modal-body">
<form name="loginform" id="loginform" action="/wp-login.php" method="post">
<p>
<input type="text" name="log" id="user_login" class="input span5" style="height:50px;font-size:20px" placeholder="სახელი" size="40" /></label>
</p>
<p>
<input type="password" name="pwd" id="user_pass" class="input span5" style="height:50px;font-size:20px" placeholder="პაროლი" size="40" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> დამიმახსოვრე</label></p>
</form>
</div>
<div class="modal-footer">
პაროლის აღდგენა
<button class="btn" data-dismiss="modal" aria-hidden="true">დახურვა</button>
<input type="submit" name="wp-submit" id="wp-submit" class="btn btn-primary" value="შესვლა" />
<input type="hidden" name="redirect_to" value="/" />
<input type="hidden" name="testcookie" value="1" />
</div>
</div>
<div class="pill-pane" id="registrationpill">.v..</div>
</div>
</div>
Related
I'm trying to send a message to an email like in this code, once you click on "Enviar", your message goes to your email with the name, email and message info. I'm using this provider but it's not working: https://formsubmit.co/ this is the code:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Contáctanos</h4>
</div>
<div class="modal-body">
<form>
<form action="https://formsubmit.co/myemaiL#gmail.com" method="POST">
<div class="form-group">
<label for="Name">Nombre</label>
<input type="text" class="form-control" id="Name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email-1" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Message">Mensaje</label>
<textarea class="form-control" id="Message" placeholder="Ingresa tu mensaje" required></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-success">Enviar</button>
</div>
</div>
</div>
</div>
</div>
</div>```
Hopefully someone can help me out, thanks!
The problem with your code is that submit button is outside <form> open and close tag. However the <form tag immediately after the modal-body class is not necessary
Your code should be like this
<form action="https://formsubmit.co/laide_lawal#yahoo.com" method="POST">
<div class="form-group">
<label for="Name">Nombre</label>
<input type="text" class="form-control" id="Name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email-1" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Message">Mensaje</label>
<textarea class="form-control" id="Message" placeholder="Ingresa tu mensaje" required></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-success">Enviar</button>
</div>
</form>
I have required validation on three of my fields in my form.
When I submit with nothing in them, they get submitted to the database which crashes my program even though I have required in them.
<button class="btn btn-info btn-lg" type="button" data-toggle="modal"
data-target="#myModal" tabindex="-1">Add</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-
dismiss="modal">×</button>
<h4 class="modal-title">Add Work Order/Service Request</h4>
</div>
<div class="modal-body">
<div class="popup">
<form action="{{ url_for('background_process') }}" method="POST">
<input type="text" id="name" name="name" required />
<input type="url" id="url" name="url" required />
<input type ="text" id="mdp-demo" name= "mdp-demo" required />
<a href=# id=process_input><button
class='btn btn-default'>Submit</button></a>
</form>
</div>
</div>
</div>
</div>
Anyone know the reason for this?
<!DOCTYPE html><html>
<head>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="popup">
<form action="{{ url_for('background_process') }}" method="POST">
<input type="text" id="name" name="name" required />
<input type="url" id="url" name="url" required />
<input type ="text" id="mdp-demo" name= "mdp-demo" required />
<a href=# id=process_input><button
class='btn btn-default' >Submit</button></a>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
i have used the same code but it gives me
I am building a simple little personal site, and for the site I am making a modal contact form with Bootstrap. When I open the modal and click on any of the form fields, I am immediately redirected to the Forbidden page and see the error message "You don't have permission to access /none" on this server.". I can't for the life of me understand why this would happen. Below is the form modal:
<div class="modal fade" id="contact-form" tabindex="-1" role="dialog" aria-labelledby="contact-form" aria-hidden="true" style="color:darkslategray;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Shoot me a message!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Contact form -->
<form method="POST" action="index.php">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control mb-4" id="name" />
<label for="email">Email Address:</label>
<input type="email" class="form-control mb-4" name="email" id="email" />
<label for="message">Message:</label>
<textarea class="form-control mb-4" name="message" id="message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And below is the HTML for the link that triggers the modal:
<p>Want to chat? <span class="contact" data-toggle="modal" data-target="#contact-form">Contact me</span>.</p>
Could someone please help me understand why this is happening and how I can fix it? Many thanks in advance.
I have the following code on 2 pages:
<input class="btn btn-primary" type="button" value="Sign Up" data-toggle="modal" data-target="#myModal"/>
<!-- my modal dialog-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Create New User</h4>
</div>
<div class="modal-body">
<form id="myform" action="add_user.php" method="POST">
<div class="form-group">
<input class="form-control" type="text" id="username" name="username" placeholder="Username"/>
</div>
<div class="form-group">
<input class="form-control" type="password" id="password-input" name="password" placeholder="Password"/>
</div>
<div class="form-group">
<input class="form-control" type="password" id="password-confirm-input" placeholder="Confirm Password" onblur=";"/>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="User Type"/>
</div>
<div class="form-group" id="msg">
<input class="form-control" type="text" name=email placeholder="E-mail Address"/>
</div>
<div>
<label id="label" for="male"></label>
</div>
<br>
<div class="form-group pull-right">
<input class="btn btn-success" type="submit" id="create_user2" value="Create User"/>
</div>
</form>
</div>
</div>
</div>
</div>
This code works on the index.php page, a modal dialog pops up.
in another page, dashboard.php, it does not.
I have the exact same button and modal code in the body tags
Be sure you have bootstrap JS references in both pages:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
It appears that I either have trouble spacing correctly or making things stack either horizontally or vertically.
Still new to Bootstrap but I'm pretty happy with what I got so far. Currently I have this for my login form:
I would like to make my contact form the same way, vertically stacked. But here is what I end up with:
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact me!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<form role="form" class="navbar-form" action="" method="post">
<span>Your Name</span>
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
<span>Your Email</span>
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
<span>Your Message</span>
<textarea id="contact-message" class="form-control" placeholder="Your message..." required></textarea>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Use form-groups. Just make sure you wrap your input in <div class="form-group"></div>:
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>