I would like to have data entered into an html form saved to my local drive. I do not want the form data sent to a server and do not want to have the saving of the form data require internet access. Is there a way to have this data saved via javascript to a local xml file? Below is an example of some basic form fields I would like to save to xml locally. thank you.
<!DOCTYPE html>
<html>
<form action="/my-local-drive" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email" />
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
</html>
Related
Hey so i'm trying to use a custom html layout for a form and sending the data through google forms to a sheet.
The project is being developed in Angular.
When i try to send the form the "submit" button does nothing, and there are no errors in the console or the debugger.
But when i copy the exact same code into a fresh html file it works with no problems. So i'm pretty sure it has something to do with Angular.
<form action="https://docs.google.com/forms/u/0/d/e/(personal link)/formResponse" method="post">
<input type="text" name="entry.1676852988" placeholder="name">
<input type="text" name="entry.567673583" placeholder="email" id="">
<button type="submit" >Submit form</button>
</form>
Try using the ngNoForm directive.
<form ngNoForm action="https://docs.google.com/forms/u/0/d/e/(personal link)/formResponse" method="post">
<input type="text" name="entry.1676852988" placeholder="name">
<input type="text" name="entry.567673583" placeholder="email" id="">
<button type="submit" >Submit form</button>
</form>
<form action="https://formsubmit.co/myemail" method="POST" >
<div class="row gtr-uniform">
<div class="col-6 col-12-xsmall">
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div class="col-6 col-12-xsmall">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="col-12">
<input type="text" name="name" id="subject" value="" placeholder="Subject" />
</div>
<div class="g-recaptcha" data-sitekey="6LdseqkZAAAAAL5m2SpQL1I5Wo5aoC9qcWrfFq7c"></div>
<!-- Break -->
<div class="col-12">
<textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
</div>
<!-- Break -->
<div class="col-12">
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
<input type="hidden" name="_next" value="google.com">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_autoresponse" value="Your message has been recieved.Thank You...">
</div>
</div>
</form>
I have the method="POST" attribute in the form. I have used formsubmit.co to get help with the backend stuff, but it keeps giving me an error that "Form should POST". How do I solve this?
When using your snippet above, I get the following message: "Make sure you open this page through a web server, FormSubmit will not work in pages browsed as HTML files." Have you read the FAQ on this exact error message?
According to the linked FAQ:
You may encounter an error: Make sure you open this page through a web
server, FormSubmit will not work in pages browsed as HTML files.
So there are 2 ways you can fix this issue.
You can use a simple web server like Apache HTTP Server. You can add a
hidden input field with the form URL,
<input type="hidden" name="_url" value="https://yourdomain.co/contact.html">
This is a bit late but I'm sure it will help you out.
I'm referring to this answer https://stackoverflow.com/a/64719964/9535043
Your code seems okay the only issue is with the "_next" feature. As FormSubmit documentation clearly mentioned you have to provide an alternative URL not just a path or domain name, it should be a URL.
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
I'm sure this will help you out.
Further information
FormSubmmit Documentation: https://formsubmit.co/documentation
I recently mirrored a login Html Template. I want a user who enters a specific username and password to be redirected to another page and any other login detail entered get an error alert. Could you kindly help me out?
Find the code below:
<h3>Sign into your account</h3>
<form action="index-bank-2.html" method="GET">
<div class="form-group">
<input type="email" name="email" class="input-text" placeholder="Email">
</div>
<div class="form-group">
<input type="password" name="Password" class="input-text" placeholder="Password">
</div>
<div class="checkbox clearfix">
<div class="form-check checkbox-theme">
<input class="form-check-input" type="checkbox" value="" id="rememberMe">
<label class="form-check-label" for="rememberMe">
Remember me
</label>
</div>
Forgot Password
</div>
<div class="form-group mb-0">
<button type="submit" class="btn-md btn-theme btn-block">Login</button>
</div>
</form>
<form action="index-bank-2.html" method="GET">
is wrong..you need PHP or any back-end language to validate your login credentials. You may try like this
<form action="validate_user.php" method="POST">
Create validate_user.php file and you need POST method instead of GET because you are sending data over HTTP and GET request(read up on HTTP request) only used to retrieve data.
Quick google by me: https://www.tutorialrepublic.com/php-tutorial/php-mysql-login-system.php
You may refer above link to implement what you are looking for. Good luck!
I have downloaded a website using site sucker and I have all the html files. The website was developed using a CRM (it's my new client's website which I have to upload to my server asap and they don't have credentials for the same). I have a contact form which I want to make it work
Form code:
<form name="contactform" method="post" class="dmRespDesignRow" locale="ENGLISH">
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1289337126">
<label for="dmform-0" id="1623474142">Name:</label>
<input name="dmform-0" type="text" id="1049346235"/>
<input name="name" value="Name" type="hidden" id="1808095320"/>
</div>
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1229775582">
<label for="dmform-1" id="1413734224">Email:</label>
<input name="dmform-1" type="email" id="1874224805"/><input name="email" value="Email" type="hidden" id="1790388701"/>
</div>
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1182638845">
<label for="dmform-2" id="1659409819">Phone:</label>
<input name="dmform-2" type="tel" id="1363423394"/><input name="phone" value="Phone" type="hidden" id="1562324064"/>
</div>
<div class="dmforminput dmRespDesignCol small-12 newLine large-12 medium-12" id="1310223649">
<label for="dmform-3" id="1594580770">Message:</label>
<textarea name="message" id="1731760981"></textarea>
<input name="message2" value="Message" type="hidden" id="1794081407"/>
</div>
<div class="dmformsubmit dmWidget R" preserve_css="true" id="1012153111">
<input class="" name="submit" value="Send" type="submit" id="1446531284"/>
</div>
<!--<input name="dmformsendto" value="O0wrseIfFLsSlLR4GAldF3Dy0PQjrXVAFxL5GhwSjRb9oqY0OVrc11ouhyoy2GDw/aszBHJnGyRKqT/UtxxJVGSoojrduF5h" preserve_css="true" type="hidden" id="1937799400" data-success-page="" data-dec="true"/>-->
<input class="dmActionInput" name="action" value="form_email.php" type="hidden" id="1733868877"/><input name="dmformsubject" value="Form Message" preserve_css="true" type="hidden" id="1339178452" data-success-page=""/>
</form>
I tried creating a new file i.e form_email.php and adding as action in the form but no luck. If I create a separate form test file (plain html without any classes) it works using that php file but doesn't work when integrating it with the actual form. I am not able to figure out what's the issue.
If you are not using JavaScript to intercept the form the action attribute should be added to the form tag, and not to an input. Example:
<form name="contactform" method="post" action="form_email.php" class="dmRespDesignRow" locale="ENGLISH">
In addition you must make sure that form_email.php is being correctly requested. If the file's location is not within the same directory the HTML file is (or the directory in which the CMS designated as such) you must fix the action attribute so that it points to the correct location. For example, if form_email.php is one level up (in the directory above the HTML file) you would reference it as such: action="../form_email.php".
I have a custom page template with a form. And this form displayed in many pages using shortcode. When the user click the submit button, the user will redirect to a "Thank you" page. This thank you page is a static (created using the WP page editor) with a href. Now, when the user click that a href (found in the thank you page, he/she will redirect to the page url where the user submit the form but in the specific portion of the page where the user came from. But I don't know how to do this. Can anyone help me with this?
<form method="POST">
<span class="icon-pp-green-ribbon"></span>
<fieldset>
<div class="form-group">
<label for="customer_fname"><span class="icons-asterisk"></span> Your name:</label>
<input type="text" name="name_first" placeholder="" required/>
</div>
<div class="form-group">
<label for="customer_tsname"><span class="icons-asterisk"></span> Your surname:</label>
<input type="text" name="name_last" placeholder="" required/>
</div>
<div class="form-group">
<label for="email">Your e-mail:</label>
<input type="email" name="email" placeholder="#"/>
</div>
<div class="form-group">
<label for="phone"><span class="icons-asterisk"></span> Phone number:</label>
<input type="text" name="phone" pattern ="^09\d{9}$" onkeypress="return isNumberKey(event)" size="11" placeholder="09" required/>
</div>
<div style="margin-top: 1.50em;">
<input type="checkbox" id="utm_checked" checked style=" float: left; transform: scale(1.2);"/>
<label for="utm_checked">I want to be occasionally notified</label>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Send"/>
</div>
</div>
</form>
Try this button maybe as told here:
<input action="action" type="button" value="Back" onclick="window.history.go(-1); return false;" />
If your previous page URL does not have page section info like www.yoursite.com/somePage#someSection, you can push custom URL to the history stack before leaving that page, so that whenever your go back, you not only go back to the page but also the specific portion that you came from. You can push custom URL to the history stack maintained by the browser as described here
Try this code to utilize page visit history maintained by the browser:
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.history.back();
}
</script>