I am a new user to simpleform (and html in general), and I am having trouble setting up a contact form for my jekyll website. This is the source I am using for my contact page. The email box seems to check for inconsistent input when submitted, but I don't get redirected or get any output.
Thanks in Advance!
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Contact</h2>
<h3 class="section-subheading text-muted">Thanks for Contacting Me!</h3>
</div>
</div>
<div class="col-lg-12 text-center">
<form action="http://getsimpleform.com/messages?form_api_token=2d6935f301203a8a2b595dfa0141a48a" method="post">
<!-- the redirect_to is optional, the form will redirect to the referrer on submission -->
<input type='hidden' name='redirect_to' value='http://www.google.com' />
<!-- all your input fields here.... -->
Name:<input type='text' name='name'/></br>
Email:<input type='email' name='email'/></br>
Message:<textarea name='message'></textarea>
<button type='submit' value='Submit Form'>Submit:</button>
</form>
</div>
</div>
</section>
Related
I am new to the Express and Bootstrap. Today, I was trying to create a form for logging in. The form will trigger a POST request to the server and I want to send a new HTML page whenever a POST request is sent but there is always a problem "The page isn't working".
This is my HTML form:
<section class="h-100">
<div class="container h-100" style="margin-top: 50px; ">
<div class="row justify-content-md-center h-100" >
<div class="card-wrapper">
<div class="card fat">
<div class="card-body">
<h3 class="card-title">Login</h3>
<form method="POST" class="my-login-validation" novalidate="">
<div class="form-group">
<label for="email">E-Mail Address</label>
<input id="email" type="email" class="form-control" name="email" value="" required autofocus>
<div class="invalid-feedback">
Email is invalid
</div>
</div>
<div class="form-group">
<label for="password">Password
</a>
</label>
<a href="forgot.html" style="float: right">
Forgot Password?
</a>
<input id="password" type="password" class="form-control" name="password" required data-eye>
<div class="invalid-feedback">
Password is required
</div>
</div>
<div class="form-group m-0">
<button type="submit" class="btn btn-primary btn-block">
Login
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
And this is my Express where I try to respond the form with a new html page:
router.post("/index.html", function(req, res, next){
res.send(`
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Practical Excercise 3 - Part 3</title>
</head>
<body>
<p> Thanh Toan </p>
</body>
</html>
`);
});
When a login button in HTML is clicked, a POST request is sent. When the server receive a POST request, I want to send back a new HTML page but a problem occur. Can anyone tell me where the problem is?
Thanks you all in advance!
REMEMBER TO TURN THE SERVER ON npm start
Have a good day!
I am learning django and have built a very basic profile form, I am experiencing a strange issue during page load.
The profile page has a password change form which is at the page bottom and during the browser loading, it auto-navigates to this form and enters the first input field of the form?
Has anyone experienced this and if so how do i prevent this from occurring?
Form on load:
<div class="col-lg-4">
<div class="block">
<!-- Table Styles Title -->
<div class="block-title">
<h2><strong>Change Password</strong></h2>
</div>
<p>Change your password here!</p
<form action="/profile/change_password/" method="post" class="form-horizontal">
<input type="hidden" name="csrfmiddlewaretoken" value="Azuwo63bFBZyum9WJSwwp8gwNcdBKw0cvURhLHoZcVDTsq7ecAJArZTYFE0dHleB">
<div class="col-xs-12">
<div id="div_id_old_password" class="form-group">
<label for="id_old_password" class=" requiredField">
Old password<span class="asteriskField">*</span> </label>
<div class="">
<input type="password" name="old_password" autocomplete="current-password" autofocus class="textinput textInput form-control" required id="id_old_password"> </div>
</div>
<div id="div_id_new_password1" class="form-group">
<label for="id_new_password1" class=" requiredField">
New password<span class="asteriskField">*</span> </label>
<div class="">
<input type="password" name="new_password1" autocomplete="new-password" class="textinput textInput form-control" required id="id_new_password1"> <small id="hint_id_new_password1" class="form-text text-muted"><ul><li>Your password can’t be too similar to your other personal information.</li><li>Your password must contain at least 8 characters.</li><li>Your password can’t be a commonly used password.</li><li>Your password can’t be entirely numeric.</li></ul></small> </div>
</div>
<div id="div_id_new_password2" class="form-group">
<label for="id_new_password2" class=" requiredField">
New password confirmation<span class="asteriskField">*</span> </label>
<div class="">
<input type="password" name="new_password2" autocomplete="new-password" class="textinput textInput form-control" required id="id_new_password2"> </div>
</div>
</div>
<!-- Form Buttons -->
<div class="form-group form-actions">
<div class="col-xs-12 text-right">
<button type="submit" class="btn btn-sm btn-success"> Change Password</button>
</div>
</div>
<!-- END Form Buttons -->
</form>
</div>
Django Template:
<div class="col-lg-4">
<div class="block">
<!-- Table Styles Title -->
<div class="block-title">
<h2><strong>Change Password</strong></h2>
</div>
<p>Change your password here!</p>
<form action="{% url 'change_password'%}" method="post" class="form-horizontal">
{% csrf_token %}
<div class="col-xs-12">
{{ passform|crispy }}
</div>
<!-- Form Buttons -->
<div class="form-group form-actions">
<div class="col-xs-12 text-right">
<button type="submit" class="btn btn-sm btn-success"> Change Password</button>
</div>
</div>
<!-- END Form Buttons -->
</form>
</div>
I am not using javascript on this page it really is a basic setup for learning.
Many thanks
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>
I have been working through this link https://www.npmjs.com/package/html-form-send-email-via-google-script-without-server also https://github.com/dwyl/html-form-send-email-via-google-script-without-server but can't make it through points 10 & 11 - getting a 'thank you for your message' alert instead of JSON response/alert.
I have talked to Google online and they have referred me here now. I'm using it with bootstrap - my codes is below, any ideas would be great.
<section class="test">
<a name="index"></a>
<div class="container">
<div class="row index_section">
<div class="col-md-10 col-md-push-1">
<h2 class="index_h2">The RE Ledger Foundation is a consortium of east coast real estate and financial services executives with the purpose of exploring the applications and advantages of harnessing a blockchain backed peer-to-peer network.</h2>
<p><a class="btn btn-secondary btn-lg index_button" role="button" href="#contact" data-toggle="modal" >Contact Us</a></p>
</div>
</div>
</div>
</section>
<div class="modal fade" id="contact" role="dialogue">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="https://script.google.com/a/macros/headlandholdings.co/s/AKfycbyA1uVrYJK3dowguYNKo65hPfQKLGCFh8_865dFMhXzfE__Io8/exec">
<div class="modal-header">
<h4>Contact RE Ledger</h4>
</div>
<div class="modal-body">
<div class="form-group"><!-- For every row -->
<label for="Contact-name" class="col-lg-2 control-label"> Name: </label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" name="contact-name" placeholder="Please put your full name">
</div>
</div>
<div class="form-group"><!-- For every row -->
<label for="contact-email" class="col-lg-2 control-label"> Email: </label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" name="contact-email" placeholder="email#siteexample.com">
</div>
</div>
<div class="form-group"><!-- For every row -->
<label for="contact-message" class="col-lg-2 control-label"> Message: </label>
<div class="col-lg-10">
<textarea type= "text" name="message" rows="8" class="form-control"> </textarea>
</div>
</div>
<div class="modal-footer">
Close it
<button class="btn btn-primary" type="submit"> Submit</button>
</div>
<div style="display:none;" id="thankyou_message">
<h2><em>Thanks</em> for contacting us!</h2>
</div>
</div>
</form>
</div>
</div>
</div>
</div><!-- /.container -->
<!-- Included so that when you complete a contact request you get a message -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<form class="form-horizontal" method="POST" action="https://script.google.com/a/macros/headlandholdings.co/s/AKfycbyA1uVrYJK3dowguYNKo65hPfQKLGCFh8_865dFMhXzfE__Io8/exec">
In the above line of code, the action= should be referring the link provided by Google. In point 5 of the github link you provided, you should get a link after deploy web app. Use that link instead of the example code.
A tip for you: only copy codes you understand.
Ok - this has taken ages but I figured it out. First of all use the Github link at the top not the other one - it's not as easy to follow.
The issue with the JSON/Ajax was that I was trying to use a different modal to the google sheets one in the example. The important bit is that the id="gforms" line is inserted where your personal generated email address link.
I then took the index example from github and methodically moved across all of the name data. It's tedious but it worked
<div class="modal fade" id="contact" role="dialogue">
<div class="modal-dialog">
<div class="modal-content">
<form id="gform" class="form-horizontal" method="POST" action="--- YOUR LINK HERE ---">
<div class="modal-header">
<h4>Contact RE Ledger</h4>
</div>
<div class="modal-body">
<fieldset class="form-group">
<label for="name" class="col-lg-2 control-label">Name: </label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Please put your full name" />
</fieldset>
<fieldset class="form-group">
<label for="email" class="col-lg-2 control-label">Email: </label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" name="email" value="" required placeholder="email#siteexample.com"/>
</fieldset>
<fieldset class="form-group">
<label for="message" class="col-lg-2 control-label">Message: </label>
<div class="col-lg-10">
<textarea type= "text" id="message" name="message" rows="8" class="form-control"></textarea>
</fieldset>
<div class="modal-footer">
Close it
<button class="btn btn-primary" type="submit"> Submit</button>
</div>
</div>
</form>
<!-- Customise the Thankyou Message People See when they submit the form: -->
<div style="display:none;" id="thankyou_message">
<h2 class='col-lg-10 model_message'> Thanks for your message - We will get back to you soon</h2>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<!-- Included so that when you complete a contact request you get a message -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
make sure that your form has class 'gform'
make sure to add another div under the form directly has class 'form-elements' and close this div before 'thankyou_message'Div
I created a fiddle but the image doesn't display in firefox. Why not? The html is
<div id="message1" class="alert alert-warning alert-dismissable flyover flyover-centered">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">x</button>
<strong></strong> User added
</div>
<!-- Menubar -->
<div id="menubar">
<div id="menubarcentercontainer">
<div id="menubarleft">
</div>
<div id="menubarright">
<div id="menubaruserinfo" class="menubaritem">
<p>Sign In or Sign Up</p>
</div>
<div class="menubaritem">
<p>Get Onacci</p>
</div>
</div>
</div>
</div>
<img id="top-header" src="https://wwwe.onacci.com/onacci.png">
<form id="searchbox" action="connect.php" method="POST">
<div class="control-group" style="float:left;">
<div class="controls" style="float:left;">
<input type="text" id="email" name="email" placeholder="Enter your email" class="input-xlarge">
<p class="help-block">Please provide your E-mail</p>
</div>
</div>
<div style="float:left;">
<!-- Button -->
<button type="submit" class="btn btn-success">Add me to waiting list</button>
</div>
</form>
Because you have an "e" on your www url request(image path).
Also, the image URL is untrusted and firefox will keep blocking the image source url.
Try requesting the image URL in a new window.
It's classed as an untrusted connection by default in Firefox and therefore the image won't download and display.
It is showing up on Firefox v40. However, if it is an issue of "This Connection is Untrusted" error, then better you refer to this solution at official Firefox support forum: https://support.mozilla.org/en-US/kb/connection-untrusted-error-message