creating forms/submit without reloading

Plasmic Studio Questions
1

Do I understand correctly that it is impossible to make a form that would not reload the page when sending, using the built-in capabilities of Plasmic (without using library components for forms)?

It is logical, if I make a form (block with the form tag) and add an input and a button to it, put the Submit form prop on the button, do not perform any actions on the button, but perform an action in the form block when sending - then this should cancel the action of reloading the page? But this does not happen - the page reloads. It seems to be a classic flow, but for this you have to write custom components.

It is also annoying that you cannot set the “required” input parameter and for this you also have to write a code component.

Plasmic seems to be a progressive tool, but sometimes the absence of seemingly obvious and simple things makes it not very suitable for rapid development.

2

Hi @se.belobrov

Can you please share your use case and how are you calling/linking an action in the form block?

Also, are you using Customizable components for Text input and Button within the Form or using raw html tags of input and button?

Thanks

3

As simple as possible:

A block with a Form tag. Inside is a standard input, a standard button (the button has the submit form property).

In the Form block: settings / interaction / On submit / any action

It is impossible to make the input required.

It is impossible to prevent the page from reloading.

4

Using the Ant library form component is impossible because of a bunch of console errors when adding a form to a page and standard behavior like autofocus on an input field not working.

And I spend three days to make a simple form and a simple way to prevent page reloads. This is crazy.

5

Hi @se.belobrov

You can add event.preventDefault() in your code action in On Submit interaction on Form to avoid page reload. I’ve added a test MyForm component with form tag in the following project that works with standard button tag and Customizable Button component.

Project Link

For example, in above project when a user submits a form, it updates the formState variable to have a name property updated to textField value.

  1. There is a state variable formState
  2. form element has On Submit interaction with the following code.
(() => {
  event.preventDefault()
  $state.formState = {...$state.formState, name: $state.textField.value }
})()
  1. For a plain button tag, we have to add type attribute with value submit
  2. For a Customizable Button, we have to turn on the Submit Form boolean flag.
  3. Once you submit the form, it will run the action without page reload.

Let me know if this helps. Thanks

6

“Could not open project
This project does not exist or you do not have access to it.”

Please give me access!

7

Please try visiting the link now.

8

Thank you!
And how to achieve input validation in the form?

9

This is crazy. I can’t create a simple form for days.

When I add a simple form component from the Ant library, I immediately get a bunch of errors in the console:

  • Warning: React does not recognize the formItems prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase formitems instead. If you accidentally passed it from a parent component, remove it from the DOM element.

  • Warning: Unknown event handler property onIsSubmittingChange. It will be ignored.

  • Warning: React does not recognize the submitSlot prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase submitslot instead. If you accidentally passed it from a parent component, remove it from the DOM element.

10

Hi @se.belobrov,

In case of using raw elements, validation has to be handled manually. I’ve added more logic to the project to demonstrate how the custom validation can be added in the interaction action and component state. I’ve used a mix of both standard input and normal TextField input to ensure it works with both approaches.

For AntD form, we will review it internally and prioritize it accordingly to remove those warnings. Those warnings shouldn’t impact the functionality of your Form component.

11

Thanks for the examples. Unfortunately, this is too complicated for me. So this approach does not work for me.

These errors affect the behavior of the components. I can’t get a simple autofocus on the input!

12

We will investigate the AntD Forms further and will share an update here.