Uploading image urls via Memberstack form on Webflow to Airtable

Questions / Help
,
1

Hey everyone. I am looking for support with my Webflow, Uploadcare, Memberstack, airtable integration. Curious if anyone might have a solution.

Let me preface. I am not a developer, but I was able to cobble together a solid automated workflow using online resources. So I am looking for a hopeful lowcode/no code solution. Customizing APIs and backend is a little outside my wheelhouse.

I have a Webflow website that I am using for a non-profit membership website. I have successfully integrated a Memberstack form for users to input their information. This auto creates/populates a new memberstack user or updates a memberstack user as necessary. Since the form is a Memberstack form embedded in Webflow, it has all the throughput data.

I then have Airtable watching for changes to automatically create a new row or update user information based on updates. This is using Airtables internal automation (not zapier). Works great.

Then I use Zapier to port this information into the Webflow CMS. We do this because there is an approval process that happens and airtable is both the source of truth and the gatekeeper for this approval process before the new members account appears on the website.

Everything works great, but I am stuck on the image. I’d like every member to have a profile photo that they can upload. The Uploadcare user interface is great and would work well, but I can’t seem to get it to track through to memberstack appropriately. The upload feature does a great job of uploading the image to the Uploadcare system, but I can’t figure out how to accurately get the image URL to a memberstack field. It seems uploadcare is uploading independently. Since I can’t rename the file on upload (say to append the memberstack ID), I can’t have zapier or some system search uploadcare for the correct image.

Eventually I’d like to add a photo reel section to each member page, so they can upload custom photos/videos that show on their unique pages. That’s step 2 though; step 1 is figuring out profile photos.

It’s 1000% likely I’m missing something, so I thought I would reach out

2

Hi @Ian-DPA, we haven’t had much experience with these no-code tools, but I think what you’re looking for is feasible.

So, you have a Memberstack form, and if I get it right, the uploader is added to this form. If so, and it has a name attribute, then you should receive a file URL in form data when a user submits the form. I know that Webflow doesn’t allow users to add hidden input elements, and you’ve probably added a text input instead. In this case, you may need to add some JS to populate the input with a URL. Would you be able to share a link to the form so we can inspect it?

3

Hey Alex - Thanks for your support.

I created a test site that demos the current WIP site HERE.
The uploadcare is on the bottom of page 3 of the signup. It’s in test mode, so you won’t need to pay.

Memberstack has a handy integration guide. I have dropped the top part in the custom code section of webflow, but the bottom script I am a little unclear on where to add or what specifically I should put as the var name. If I was adding it to webflow it would be something along the lines of data-ms-member=“company-photo”

In addition. I don’t want a redirect on successful upload using the window.location.replace feature that seems to be built in. Since the uploadcare widget is a part of the overall sign up page, I want the memberstack/webflow form to work and take the user to /user/step-4 instead of the script taking the user there after successful upload

CleanShot 2022-09-16 at 12.16.57
CleanShot 2022-09-16 at 12.16.57688Ă—909 79.4 KB

4

@Alex - Any thoughts on this? Any help is appreciated.

5

Thanks for the follow-up, and sorry I couldn’t reply sooner! Unfortunately, the test page doesn’t work.

image
image2310Ă—1400 122 KB

Can you please check it?

As for the redirect, our widget shouldn’t trigger it by uploading a file. I think you just need to set /user/step-4/ as a target path for the redirect, but I may need to look at the live setup to make sure.

6

Hi @Alex - Thanks for looking into it. I think I started with the wrong link. I think you have to start at the top of the join link for it to work (from the beginning of the form). I just ran through the form and it worked. All buttons were already set to step-4

Here is the pricing page to get started (its still in free/demo mode, so it wont charge)

https://dallas-producers-associat-c16ddd4bf6d2f.webflow.io/pricing

7

Thanks! I was able to get to the file upload step, and I think I figured out why a widget’s value won’t get passed over to the form handler. It looks like when the type of the widget’s input is text, it is not populated with the URL of an uploaded file or group. There’s a way to fix it quickly. You just need to add this JS snippet that will do the job

var widget = uploadcare.Widget("[role=uploadcare-uploader]");
widget.onUploadComplete(function (info) {
  widget.inputElement.value = info.cdnUrl;
});

Could you give it a try and let me know the result?

8

Hey @Alex - Thanks for the code. Where do you suggest I add it? In the same Custom/Head Code that the uploadcare script goes for the whole site? Or in the head or body section on that specific page with the form? Or somewhere else?

Thanks!

9

You should add it at the end of the tag. See Custom code in head and body tags | Webflow University

10

Hi @Alex - Just wanted to let you know that the solution worked perfect! Tracks the appropriate way and shows up everywhere we need. Thanks!

2 Likes