Search code examples
amp-html

Post an amp-form with a templated url


We have a searchbar made with an amp-form and an input text. On validation, we want to redirect the page on the mobile site, but we don't find a way to templatize the url with something like this :

<form method="get" action="https://example.com/search/'+searchword+'.html'">
  <input type="text" autocomplete="off" id="searchbar">
</form>

Of course, we can't change the url, to pass the param in query string.

So far we tried to use the amp-bind, but form [action] isn't a valid target.


Solution

  • You can't change the URL directly, but amp-form will append your input field values to the URL as query parameters. This form:

    <form method="get" action="https://example.com/search/">
      <input type="text" autocomplete="off" id="searchbar" name="query" value="hello">
    </form>
    

    results in the following request URL: https://example.com/search/?query=hello.

    I'd also suggest filing a feature request here for enabling bindings to the form actions.