Embedding a webmentions form

Help
1

Hello! Does anyone here have experience with building input forms or using Webmention.io? I signed up and was able to get it working far enough to generate this submission form, but what I’m wondering is whether it’s possible to embed the form on one of my own pages directly.

The version hosted on Webmention.io uses code that looks like this:

  <form action="/osteophage.neocities.org/webmention" method="post">
    <label for="source">Source URL:</label>
    <input type="url" name="source" id="source" placeholder="The page sending this webmention (probably yours)" style="margin-bottom: 14px; width: 90%; display: block;">
    <label for="target">Target URL:</label>
    <input type="url" name="target" id="target" placeholder="The page that should receive this webmention" style="margin-bottom: 14px; width: 90%; display: block;">
    <div style="margin-top: 16px;">
      <input type="submit" class="button" value="Send Webmention">
    </div>
  </form>

So on a test page I’m using for a project, I tried adding this…

<p><form action="https://webmention.io/osteophage.neocities.org/webmention" method="post">
    <label for="source">Where you linked it: </label>
    <input type="url" name="source" id="source" placeholder="The url of your website or post" style="margin-bottom: 14px; width: 90%; display: block;">
    <label for="target">Where it links:</label>
    <input type="url" name="target" id="target" value="The url of this page" style="margin-bottom: 14px; width: 90%; display: block;">
    <input type="submit" class="button" value="Send"> <br>
	  <br>
  </form>

…and I tried testing it out with a url of a page that I know already links to one of mine (inputting the Aromatic directory and my web neighbors page), but… unfortunately… that didn’t work.

Anyone have ideas for how to get it operational?

Note I changed the form action value to a more complete url because originally when I kept it exactly the same, testing the form led to an error page. With the full version, I just get no response.

2

I suspect that webmention.io isn’t set up to accept form submissions from external sites for security reasons.

You’d want to contact the operator of webmention.io, Aaron Parecki, and ask him.

3

Oh! Okay. That wouldn’t have even occurred to me.

4

Update: I emailed Aaron Parecki and got confirmation that Webmention.io is set up to accept external submissions and that adding the form to our own sites should be possible.

5

Then it’s just a question of why that submit button isn’t triggering properly. Maybe, instead of a form action, you need write an event handler for the OnSubmit event in JavaScript to make the API call?

6

Maybe! I’ve never written any original Javascript though. I’m not sure if that’s getting beyond the scope of one thread – are there any beginner guides you would recommend?

7

I use Mozilla’s documentation as my primary reference both at work and at home.

1 Like
8

Thanks for the link. From conferring with the folks at IndieWeb, I learned that the big roadblock here is the Neocities Content Security Policy, which apparently blocks input forms like this. Oh well.

1 Like