Form

The Form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where buyers can submit the form from any input by pressing "enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible.

Unlike an HTML form element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an onSubmit callback that will perform the necessary HTTP requests in JavaScript.

import {extend, Form, Button} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {

const form = root.createComponent(

Form,

{

// eslint-disable-next-line no-console

onSubmit: () => console.log('Submitted!'),

[root.createComponent(Button, {submit: true}, 'Submit')],

);

root.appendChild(form);

});

import {render, Form, Button} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

return (

// eslint-disable-next-line no-console

<Form onSubmit={() => console.log('Submitted!')}>

<Button submit>Submit</Button>

</Form>

);

}

import {extend, Form, Button} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const form = root.createComponent(
    Form,
    {
      // eslint-disable-next-line no-console
      onSubmit: () => console.log('Submitted!'),
    },
    [root.createComponent(Button, {submit: true}, 'Submit')],
  );

  root.appendChild(form);
});

import {render, Form, Button} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    // eslint-disable-next-line no-console
    <Form onSubmit={() => console.log('Submitted!')}>
      <Button submit>Submit</Button>
    </Form>
  );
}

Anchor to PropsProps

optional = ?

Name	Type	Description
disabled?	`boolean`	Whether the form is able to be submitted. When set to `true`, this will disable the implicit submit behavior of the form.
implicitSubmit?	`boolean \| string`	Whether this form should be submitted when the buyer presses the "enter" key on their keyboard. Defaults to `true`. When set to a string value, the implicit submit behavior will be enabled, and the string will be used as a label for an explicit submit button that is visible only to assistive technologies.
onSubmit	`() => void`	A callback that is run when the form is submitted.

Was this page helpful?