Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Melissa Wright
4,726 PointsWhen creating an HTML form, my textarea attribute keeps creating + signs instead of spaces. HELP
I am creating a contact me form for my website. I have a pulldown selection for the "Subject Line" that is requiring me to use the GET method instead of POST.... when the email application opens with my email + subject + body, the body does not have spaces between the words, only + signs. I have looked at tons of forums and can't figure out the problem. If I write "I am sending this email" in the textarea box, it will show up like this in my email application.."I+am+sending+this+email" here is the code I am using
//<form method="get" action="mailto:melreneewright@gmail.com" enctype="application/x-www-form-urlencoded">
<h1>Email Me</h1>
<legend>Who are you?</legend>
<label for="name">Your Name</label>
<input type="text" id="name">
<label for="mail">Your Email</label>
<input type="email" id="mail">
<legend>What can I do for you?</legend>
<label for="subject">Subject</label>
<select name="subject" id="subject">
<option value="I want to hire you">I want to hire you</option>
<option value="I want to give you money">I want to give you money</option>
<option value="I love your work">I love your work</option>
<option value="Want to meet for coffee?">Want to meet for coffee?</option>
</select>
<label for="body">Message</label>
<textarea name="body" id="body" rows="2" cols="20"></textarea>
<button type="Submit" value="Submit" style="color: #FFFFFF; background-color: #3299CC">Send</button>
</form>//
6 Answers
Kez Khou
3,903 PointsI see, Melissa Wright please view this Link when you have a moment. It will clarify the way you're trying to use the form you've made.
Jacob Herper
94,150 PointsI don't understand, why you would have to use the GET method rather than the POST method for a select box? POST should work just fine and fix your problem with the "+" sign instead of spaces, as GET will have to escape the spaces to a valid browser format. The GET method should never be used for forms that post something, it's generally only used for Search forms and other forms to request information from a database or page in general.
Kez Khou
3,903 PointsHello Melissa I modified the code you pasted just a bit. Please review and let me know if this helps you at all. And ditto what Jacob Herper said, The GET method should NEVER be used for forms that post i.e. SEND data.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="myForm" action="melissawright.html" metho="post">
<h1>Email Me</h1>
<legend>Who are you?</legend><br>
<label for="name">Your Name:</label>
<input type="text" id="name" placeholder="FirstName LastName"><br><br>
<label for="mail">Your Email:</label>
<input type="email" id="mail" placeholder="youremail@gmail.com"><br><br>
<legend>What can I do for you?</legend><br>
<label for="subject">Subject:</label>
<select name="subject" id="subject">
<option value='' disabled selected style='display:none;'>PLEASE MAKE YOUR SELECTION </option>
<option value="I want to hire you">I want to hire you</option>
<option value="I want to give you money">I want to give you money</option>
<option value="I love your work">I love your work</option>
<option value="Want to meet for coffee?">Want to meet for coffee?</option>
</select>
<br><br>
<label for="body">Message:</label>
<textarea name="body" id="body" rows="2" cols="20"></textarea>
<button type="Submit" value="Submit" style="color: #FFFFFF; background-color: #3299CC">Send</button>
</form>
</body>
</html>
Melissa Wright
4,726 PointsI have been using the GET method because otherwise my Subject line, chosen by the user via a pull-down menu, does not show up, however, when I use the POST method with the code above, my subject line is gone and when I typed "My message" in the textarea, it shows up in my email launcher with this as it's message ..... subject=I%C2%A0want%C2%A0to%C2%A0hire%C2%A0you&body=My+message
I've tried the 'postform' method and it does the same thing as "get" .... it adds a + instead of a space.
Kez Khou
3,903 PointsMelissa, please post your code again, this time in it's entirety please. I noticed after second glance that I had a typo in the opening <form> tag, I left the "d", out of the word "method". I dont know if I added the form line to your original code, or if you had that typo in your original post, but I was able to re-create the weird string response after submitting the form with the missing "d" from the word "method" in the opening <form> tag.
I created two test pages. One page has the exact code I posted above, and the other page is the edit of the code I posted above with the letter "d" included in the word "method" in the opening <form> tag.
Kez Khou
3,903 PointsBut if you're dead set on using mailto: via the action attribute then this Link might help you out. Adding enctype="text/plain" in the opening form tag makes it so the data sent to your email client isn't the long jumbled string thats hard to read.
Melissa Wright
4,726 PointsThe enctype="text/plain" worked and took the + signs out but it deletes the subject line from the actual email. I was hoping to create the contact form with just html, since I don't know PHP, but I was unaware of the risks of using mailto: Those links were really helpful. Thank you so much for all of your information, it has really helped!
Melissa Wright
4,726 PointsI had noticed the missing 'd' in method. You have the action as opening another html document where as I am trying to have the action as mailto: directly to my email after someone fills all of their info out. There's a website I found that does everything I want EXCEPT the crucial part - send as an email-. They even show the code but I'm coming up with the same problem :((.... http://www.quackit.com/html/codes/html_form_code.cfm
I have found a number of ways of writing this form, but I still end up with the same result. Uber frustrating.
My current code is this...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact Me</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <form id="myForm" action="mailto:melreneewright@gmail.com" method="get">
<h1>Email Me</h1>
<fieldset>
<legend>Your Details</legend>
<div>
<label for="name">Your Name:</label><br>
<input type="text" name="name" value="" placeholder="Your name here" maxlength="100" /><br>
</div>
<div>
<label for="mail">Your Email:</label><br>
<input type="email" name="mail" value="" /><br>
</div>
<legend>What can I do for you?</legend><br>
</fieldset>
<fieldset>
<div>
<label for="subject">Subject:</label><br>
<select name="subject">
<option value=''disable selected style='display:none';></option>
<option value="I want to hire you">I want to hire you</option>
<option value="I want to give you money">I want to give you money</option>
<option value="I love your work">I love your work</option>
<option value="Want to meet for coffee?">Want to meet for coffee?</option>
</select>
</div>
</fieldset>
<fieldset>
<div>
<label for="body">Message:</label><br>
<textarea rows="2" cols="20" name="body"></textarea>
</div>
</fieldset>
<fieldset>
<div>
<button type="Submit" value="Go">Send</button>
</div>
</fieldset>
</form>
</body>
</html>
//
Melissa Wright
4,726 PointsMelissa Wright
4,726 PointsI don't know why it won't show the whole code :/