I'm making a contact form that a user can type in then when they click submit it opens Outlook with their input. The problem is that the output is really messy. It outputs like this:
name=John+Smith&email=I+am+contacting+you&comment=example+text+here
I want to output to be more like:
name=John Smith email=I am contacting you comment=example text here
Is that possible with this HTML5 code:
<form method="post" name="contact" action="mailto:myemail#gmail.com">
<p>
<label>Name</label>
<input name="name" value="Your Name" input type="text" size="50" />
<label>Email</label>
<input name="email" value="Your Email" input type="text" size="50" />
<label>Your Comments</label>
<textarea rows="5" cols="5" name="comment"></textarea>
<br />
<input class="button" input type="submit" />
</p>
</form>
Since you have not specified otherwise, your form is “send” using the default enctype application/x-www-form-urlencoded.
Add the attribute enctype="text/plain" to your form element.
Related
I have a form:
<form action="/index.html" method="POST" id="form">
<div id="namediv">
Full Name:
<input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"/ id="name" required/></div>
<div>
Date:
<input type="date"/>
</div>
<div id="emaildiv">
Email:
<input type="email" id="email" onblur="validateEmail()" required/><br>
<emailerror class="invisible">Incorrect email address!</emailerror>
</div>
<div id="urldiv">
Favorite webpage:
<input type="url" name="favurl"id="url" onblur="validateFavURL()" required/><br>
<urlerror class="invisible">Incorrect webpage!</urlerror>
</div>
<div>
<input type="button" value="Validate" onclick="validateAll()"/>
</div>
</form>
How can I trigger the name's pattern validity without submitting the form? I tried checkValidity() but didn't succeed. What is the exact syntax for it?
Not sure that I clearly understand the question. But the problem appears to be invalid regex. But the field does say "full name" so you'd likely need to allow a space as well.
<div>
<label>This field accepts upper and lowercase letters only</label>
</div>
<input type="text" pattern="[A-Z][a-z]+" id="name" required/>
I have two forms (ref https://jsfiddle.net/svejdo1/f7uwt6jo/12/)
Second form (the on the bottom) is inside iframe.
The autofill seems to work for both cases - i.e. if I type into "street" it allows me to select from "street" fields I recently submitted. However there is one significant difference - when I select email it also prefill the whole form with my profile - but just for the non-iframed form. When I attempt to do the same for iframed form it doesn't work.
Is there a trick to make it working ? Or is this a bug in chromium ? Or is this security feature of some sort ?
<form id="form" action="#">
<label for="street">Street</label>
<input type="text" id="street" name="street" />
<label for="zip">ZIP</label>
<input type="text" id="zip" name="zip" />
<label for="email">Email</label>
<input type="text" id="email" name="email" />
<input type="submit" value="Submit" />
</form>
<iframe id="iframe"></iframe>
<script>
var cln = document.getElementById('form').cloneNode(true);
document.getElementById('iframe')
.contentWindow.document.children[0].children[1].appendChild(cln);
</script>
I have created a simple form (mail-based submission). However, when I submit and when I am directed to the mail app, I don't see the text I have input to the "First Name" and "Surname" box. Is there anything wrong with my code?
<form action="mailto:someone#mail.com" method="post" enctype="text/plain">
First name: <input type="text" name="firstname" /> <br/>
Surname: <input type="text" name="surname" /> <br/>
<input type="submit" value="Submit now" />
</form>
Hi I am trying to make all the fields in my form required,
I am using the required parameter and adding it to all the fields but its not working at all, not showing any validation error
<form action='index.php' method='POST' enctype="multipart/form-data">
<h6>First Name</h6>
<input type='text' name='fname' value="First Name" required />
<h6>Last Name</h6>
<input type='text' name='lname' value="Last Name" required />
<h6>Email</h6>
<input type='text' name='email' value="Email" required />
<h6>Password</h6>
<input type='text' name='password' value='Password' required />
<input type='submit' value='submit' />
<input type='hidden' value='1' name='submitted' />
</form>
The validation of required fields occurs only after you try to submit a form. The problem with the posted code is that there is no form wrapped around the inputs, therefore there is no form to submit.
This is how you should've done it:
<form action="#">
<h6>First Name</h6>
<input type='text' name='fname' required />
<h6>Last Name</h6>
<input type='text' name='lname' required />
<h6>Email</h6>
<input type='text' name='email' required />
<h6>Password</h6>
<input type='text' name='password' required />
<input type="submit">
</form>
If, however, you want instant validation, you'll have to do it yourself using one of many validation libraries which already exists or by writing custom JavaScript code.
Input tags are self-closing. The "/" is the first suspect. Try it again without those closing tags. I would also remove the space after "required", but that's just my OCD.
I have a problem with a form. It is not sending any action (page not even refreshing on click). If I copy the form in another document locally it has no problem, all working well, mail message being sent. Here is the code of the form:
<form method='post' name='ContactForm' id='contactForm' action='contact_main.php'>
<p>Your name:</p>
<input type="text" class="input-box" name="user-name" placeholder="Please enter your name.">
<p>Email address:</p>
<input type="text" class="input-box" name="user-email" placeholder="Please enter your email address.">
<p>Subject:</p>
<input type="text" class="input-box" name="user-subject" placeholder="Purpose of this message.">
<p class="right-message-box">Message:</p>
<textarea class="input-box right-message-box message-box" name="user-message" placeholder="Your message."></textarea>
<button type='submit' class='myinputbtn' name='submitf' id="submitf">Send your message</button>
<div id='message_post'></div>
<input type="hidden" name="contact">
</form>
Clicking the submit button results in... nothing!
Please let me know if I need to edit my question before downrating. Thanks!
Use
<input type="submit" ...
instead of a button (which is used with Javascript, not for form submitting)