I am hosting a website on GitHub pages, and when I try to submit a formspree.io form I get the following error:
Here is my code:
<form action="http://formspree.io/example#example.com" method="post">
<div class="row uniform collapse-at-2">
<div class="6u">
<input type="text" name="_replyto" placeholder="Email">
</div>
</div>
<div class="12u">
<textarea name="Message" placeholder="Message..." rows="4" cols="50" maxlength="500"></textarea>
</div>
<br>
<div style="display:none">
<input type="hidden" name="_subject" value="New submission!">
<input type="hidden" name="_next" value="thanks.html">
<input type="text" name="_gotcha">
</div>
<div class="row uniform">
<div class="12u">
<ul class="actions">
<li>
<input type="submit" class="special" value="Send">
</li>
</ul>
</div>
</div>
</form>
Would this be due to a code error, GitHub pages error, or a formspree error?
Things you should do to make it work are as follows:
According to formspree example:
<form method="POST" action="http://formspree.io/YOUREMAILHERE">
<input type="email" name="email" placeholder="Your email">
<br>
<textarea name="message" placeholder="Your message"></textarea>
<button type="submit">Send</button>
</form>
Here put your email in "http://formspree.io/YOUREMAILHERE" after /. And if you want change name="email" to name="_replyto" this will change the senders email to a clickable link.(Helps while reading in mail)
If that also doesn't work and it shows that "you must use server. Formspree will not work in pages browsed as HTML pages."
Then inside your <head> tag put:
<meta name="referrer" content="origin">
Hope it works!!
All the best :)
I had the exact same problem - add the following to your field:
<meta name="referrer" content="origin" />
This worked from me.
Related
How would I fix this code for it to be validated in html 5 correctly? When I test my page in Chrome, it shows the page correctly, but I am validating with errors...
<div class="form">
<form action="#">
<div class="flexBox">
<input type="text" name="" id="" placeholder="Your name">
<input type="email" name="" id="text" placeholder="Your email">
</div>
<input type="text" name="" id="" placeholder="Your subject">
<textarea "name" id="" cols="30" rows="8" placeholder="Your message">
</textarea>
<button type="submit">Send</button>
</form>
</div>
There are multiple errors in your HTML code.
Firstly, you need to remove the name string on the <textarea> element.
I think you wanted to set the name attribute to something. In that case, you can use the code below.
<textarea name="name"></textarea>
Secondly, you have to remove all of the empty name and id attributes. So, all of these:
<input name="" id="" />
Can simply be removed.
<input />
So, in summary, you need to:
Change the "name" text on the <textarea> element to be an attribute (and have a value).
Remove all empty name and id attributes.
All the issues that have been pointed out are right. I strongly recommend you to use a linter within your IDE
Or check out sites like validator.w3.org where you can paste/upload/urled your code and it will analyze it.
Here is my corrected code which validates perfectly. Just in case someone runs into a similar issue in the future. Thanks everyone.
<div class="form">
<form action="#">
<div class="flexBox">
<input type="text" placeholder="Your name">
<input type="email" placeholder="Your email">
</div>
<input type="text" placeholder="Your subject">
<textarea cols="30" rows="8" placeholder="Your message">
</textarea>
<button type="submit">Send</button>
</form>
</div>
I'm using FormSubmit to create a contact form in my static website (hosted on a server).
My form looks like this:
<div id="contact-area" class="container">
<h1>~$ contactme</h1>
<br>
<form action="https://formsubmit.co/c379c266434ca1a039bdf03209919395" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Your name..." required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Your e-mail" required>
</div>
</div>
</div>
<div class="form-group">
<textarea maxlength="1000" placeholder="Your message..." class="form-control" name="message" rows="10" required></textarea>
</div>
<input type="hidden" name="_template" value="table">
<input type="text" name="_honey" style="display:none">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="message_sent.html">
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit</button>
</form>
</div>
My email is verified. When the user clicks on submit button, this message appears in a new page:
" Make sure your form has the method="POST" attribute "
However, I receive the message. That's weird. Anyone know why it says my form should have POST attribute while my form actually has the post attribute.
Your code snippet is all okay. I have tested it, forms are getting submitted, and nothing wrong except the way you implement the "_next" feature. As FormSubmit documentation clearly mentioned you have to provide an alternative URL not just a path or file, it should be a URL.
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
Please change the hidden filed in your form to:
<input type="hidden" name="_next" value="https://yourdomain.co/message_sent.html">
and that should probably work fine.
Additional information:
FormSubmit documentation: https://formsubmit.co/documentation
I guess you have gone wrong in the action of the form.
Try using this:
<form action="https://formsubmit.co/your#email.com" method="POST">
<!-- Your form inputs here -->
</form>
Here is simple form which collects a user's info and sends that info to a specified email address. But whenever I am extracting those info into mail & appears between inputs. Like
email=some%40gmail.com&password=asdf&password-repeat=asdf
How can I remove this? Please help
Here is my HTML form:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method="post" action="mailto:somebody#gmail.com">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<label for="password-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="password-repeat" required>
<hr>
<p>By creating an account you agree to our Terms & Privacy.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? Sign in.</p>
</div>
</form>
</body>
</html>
There are two ways to do this:
1) Add enctype="text/plain" to your <form> tag, e.g.:
<form method="post" enctype="text/plain" action="mailto:alice#example.com">
2) Add formenctype="text/plain" to your <button> tag, e.g.:
<button type="submit" formenctype="text/plain" class="registerbtn">Register</button>
Both approaches will produce a body like:
email=bob#example.com
password=asdf
password-repeat=asdf
This is necessary because the default MIME type for the form is application/x-www-form-urlencoded. You can read more on this at Mozilla.org. I've quoted enctype below but provided links for both.
enctype
When the value of the method attribute is post, enctype is the MIME type of content that is used to submit the form to the server. Possible values are:
application/x-www-form-urlencoded: The default value if the attribute is not specified.
multipart/form-data: The value used for an <input> element with the type attribute set to "file".
text/plain (HTML5)
This value can be overridden by a formenctype attribute on a <button> or <input> element.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formenctype
Here's your code (with demo email address) as a running example with enctype:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method="post" enctype="text/plain" action="mailto:alice#example.com">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<label for="password-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="password-repeat" required>
<hr>
<p>By creating an account you agree to our Terms & Privacy.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? Sign in.</p>
</div>
</form>
</body>
</html>
I'm trying to remove the message box and I want to move the e-mail box to the right of the name, so that it all fits into the top bar.
I have tried removing the message box through the html code, but when I do, I get errors and it doesn't function properly.
I assume I have to remove something in the PHP because it's obviously not able to find the missing html code, but as I don't understand PHP I don't know what to remove.
this is the html code for the subscribe button
<div class="subscribe">
<div class="containerContact">
<div id="contactFormContainer">
<div id="contactForm">
<div class="loader"></div>
<div class="bar"></div>
<form action="mail.php" class="contactForm" name="cform" method="post">
<div class="input_boxes">
<p><label for="name">Name</label><span class="name-missing">Please enter your name</span><br />
<input id="name" type="text" value="" name="name" />
</p>
<p>
<label for="e-mail">E-mail</label><span class="email-missing">Please enter a valid e-mail</span><br />
<input id="e-mail" type="text" value="" name="email" />
</p>
<p><label for="message">Message</label><span class="message-missing">Say something!</span><br />
<textarea id="message" rows="" cols="" name="message"></textarea>
</p>
</div>
<input class="submit" type="submit" name="submit" value="Submit Form" onfocus="this.blur()" />
</form>
</div>
<div class="contact"></div>
</div>
</div>
<!-- this is the overlay which hides the rest of the website when the Subscribe button is pressed. -->
<div id="backgroundPopup"></div>
</div>
I can't post more than one link, so here is a text dump to the PHP and CSS for the subscribe button
any help would be much appreciated!!
I have this template where I customized whats on it BUT i got stuck on the contact page where the contact form upon clicking the button clear OR send button nothing happens. I really don't know much about most of the stuff ALL are from research through net but can't get to fix this. Am I missing something here?
Questions I have in mind:
1. Do I need to put something or create in "action"
2. What do I have to put in "href" to clear or send the form to my email?
Or you have a better idea.
<h2 class="p0">Contact Form</h2>
<form id="contact-form" action="#" method="post" enctype="multipart/form-data">
<fieldset>
<label><span class="text-form">Name:</span>
<input name="p1" type="text" />
</label>
<label><span class="text-form">Email:</span>
<input name="p2" type="text" />
</label>
<div class="wrapper">
<div class="text-form">Message:</div>
<textarea></textarea>
</div>
<div class="buttons"> <a class="button-2" href="#">Clear</a> <a class="button-2" href="#">Send</a> </div>
</fieldset>
</form>
Use real buttons, don't just give them a class called buttons.
In action, put down the name of the server file that will process this form, for example action="contact_form.php". If you would like to send an email, put down action="MAILTO:someone#example.com".
<h2 class="p0">Contact Form</h2>
<form id="contact-form" action="MAILTO:someone#example.com" method="post" enctype="multipart/form-data">
<fieldset>
<label><span class="text-form">Name:</span>
<input name="name" type="text" />
</label>
<label><span class="text-form">Email:</span>
<input name="email" type="text" />
</label>
<div class="wrapper">
<div class="text-form">Message:</div>
<textarea name="message"></textarea>
</div>
<div class="buttons">
<input type="button" value="Clear" onclick="document.getElementById('contact-form').reset()"
/>
<input type="submit" value="Send" />
</div>
</fieldset>
</form>