Skip to content

Accept custom form link as alternative to form id#6

Open
Smoke3785 wants to merge 3 commits intofillout:mainfrom
Smoke3785:feat/accept-custom-link
Open

Accept custom form link as alternative to form id#6
Smoke3785 wants to merge 3 commits intofillout:mainfrom
Smoke3785:feat/accept-custom-link

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