Contact form: some html elements don't seem to work

Help
,
1

I am trying to add a Contact Me form to a pinned post on a write.as blog. However, it seems that the way posts are rendered won’t let me do so.


# Contact Me

<form
  action="https://formspree.io/f/redacted"
  method="POST">
  <label for="from">
    Your email:
</label> <!-- This label disappears entirely when looking at a "View Source" on the rendered post. Only the text remains.

    <input type="text" name="_replyto""id="from"> </input> <!-- this input is now no longer programmatically associated with the label, rendering screenreaders and other assistive technologies unable to determine what the form field is called.
 

  <label for="message">
    Your message:
</label> <!-- same deal, this label element vanishes and only leaves its inner text.
    <input type="text" name="message" id="message"></input> <!-- this was actually a <textarea> but that element seems to not render at all.

  <button type="submit">Send</button> <!--  this just shows up as the word "Send" without any HTML markup.
</form>

What am I doing wrong here?
2

Hi @zersiax, thanks for bringing this up! This doesn’t look like anything on your end, but on ours – we remove certain HTML elements when the page renders.

We’ll get this fixed so you can share this form, likely within the next day or two. Will keep you updated here!

3

This is fixed now! Specifically, we’ve added support for the following HTML elements:

  • label
  • textarea
  • button
1 Like
4

I attempted to create the following form below, but the textarea still does not render.

<form
  action="https://formspree.io/f/xxxxxxxx"
  method="POST">
<label for=“full-name”>Your Name</label>
	<input type=“text” name=“name” id=“full-name” placeholder=“First and Last” required=“”>
<label for=“email-address”>Email Adresss</label> 
    <input type=“email” name="replyto" id=“email-address” placeholder=“email@domain.tld” required=“”>  
<label for=“message”>Message</label>
    <textarea name=“message” rows=“5” cols=“40” id=“message” placeholder=“Type your message…” required=“”></textarea>

<button type="submit">Send</button>
</form>
5

@mikejones,

textarea element does render for me. I would suggest trying the following:

  1. Remove label elements
  2. Remove all the attributes from elements other than type, name and value.
  3. Optionally, you can modify the height of the textarea using something like style=“height:200px;” (using the hight value in pixels that you prefer).

I hope it helps.
Javier

6

the id and for-attributes should work as expected, they are necessary for various mechanisms to work correctly/ If they don’t, that needs fixing. :slight_smile:

7

Thanks for the suggestions. I’ll use them to work with it a bit more.