Skip to content

Conversation

@Smoke3785
Copy link

@Smoke3785 Smoke3785 commented Jul 17, 2025

Adds a customFormLink option so you can embed forms by their custom share URL (e.g. https://fillout.com/my-custom-form) rather than only by filloutId. This avoids having to memorize opaque IDs and makes your embed code more meaningful.


I like using the custom share link feature to organize my forms. Unfortunately, the form react components don't support referencing a form by a custom link.

This feature adds another option, customFormLink, by which forms can be referenced. Usage example:

import { FilloutFullScreenEmbed } from "@fillout/react";

function App() {
  return (
    // By fillout ID
    <FilloutFullScreenEmbed filloutId="abcDeFGhIJk" />
    
    // By custom link
    <FilloutFullScreenEmbed
      customFormLink="my-custom-form"
      domain="example.com"
    />
  );
}

export default App;

I added an exclusive OR to the type which is used by the components. This provides intellisense to warn users not to pass both identifiers simultaneously (though this does not throw an error). Internally, the useFilloutEmbed hook uses a union of the two configuration options. There are other ways I could do this but I wanted to avoid making more changes than necessary.

I also made some alterations to the README to accommodate the new identifier.

This feature would be a great QoL for my workflow so that I could remember which form is which. Please let me know if you'd like anything changed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant