Form building for clients (Marketers)

Design help General
1

Does anyone know of a way to allow clients without a Designer role to build forms on a site? Is there a way the new Marketer role would be able to access/use a form builder WebFlow app (e.g. Flowstar, Typeform, etc) or create natively in WebFlow? I’m thinking something along the lines of Gravity Forms in WordPress where certain editor roles are able to create forms.

I don’t want my clients to ask me to build a form every time they want to add one to their site. It’s functionality like this that is missing from WF but available almost everywhere else (WordPress, Squarespace, Wix, etc.) which nakes it hard to convince clients to switch to WF.

2

Native would be nice but in general Webflow forms are quite limited in their current state anyway. Most forms I build need custom code to add multistep, validations, repeating sections, pre-populated country or zip code lists…

You might be better standardizing on something like jotform and then they could just set a component property with the URL to do the Webflow side of the integration.

3

Thanks @memetican Could you explain your jotform comment a little more—how would this work?

4

I haven’t needed to set this up specifically, build mode isn’t really ready for use by my clients yet.

But when you build a form using a platform like Jotform you get a URL that can be used to iframe embed that form, or button-popup that form, etc. There are different display approaches.

I’d create components that have a Jotform URL property, which are setup with the correct HTML code to do iframing, popups, etc.

Unfortuantely components do not yet support +add field within embeds, so that you can directly insert property values, so you’d need to either use custom elements to reconstruct what you need, or more likely a bit of JS to pull that value from the property into the custom code.

When I build this for clients, one of the techniques I use is that I’ll write JS as an IIFE, an embed it directly in the component. It can self-reference from its script element to locate its container.

This looks something like;

<div class="w-embed">
  <script>
     ... your in-component code ...
  </script>
</div>

Then you can bind component properties like your URL to that embed’s outer div directly, and your script will be able to find & use them.

1 Like