Alphi - Nocode API
Alphi - Nocode API
  • 5
  • 38 979
How to build custom forms in Framer + Connect Airtable #nocode
Learn how to build a custom form in Framer without writing code using our opensource Framer Form Component.
Custom fields:
Text, Email, Number, Textarea, Select, Checkbox
Alphi: www.alphi.dev/
Form component: framer.components.io/
มุมมอง: 33 055

วีดีโอ

How to Secure Airtable Data in Webflow using Outseta + Alphi to build Web applications
มุมมอง 282ปีที่แล้ว
In this video, we deep dive into how you can build secure web applications in Webflow using Outseta, Airtable Alphi. Alphi will act as the Middleware to authorise inbound requests ensuring the user making the request is a valid Outseta user. Alphi also handles securely storing Airtable API (OAuth) tokens used to retrieve and create records. Outseta is an all-in-one membership software which pro...
Building Reactive Forms in Webflow + Server-side Rendering (Live Event)
มุมมอง 459ปีที่แล้ว
At this live event, we cover various topics related to building Web applications in Webflow. 🔗 Links Alphi - www.alphi.dev Community Hub - hub.alphi.dev SO-Framework - shinyobjectlabs.gitbook.io/framework-js/ Webflow Cloneable - webflow.com/made-in-webflow/website/reactivity Key moments 00:00:00 Introduction 00:05:36 Installation 00:08:20 Creating a component 00:13:20 SO-Inspector 00:17:06 Bin...
How to display Airtable Data In Webflow using APIs + JavaScript
มุมมอง 4.3Kปีที่แล้ว
In this tutorial, you'll learn how to display data from Airtable in a Webflow project using JavaScript and Nocode Middleware. We'll walk through the process step by step, starting with connecting your Airtable account to Alphi. From there, we'll create a secure workflow (middleware) that will let you call the API from the frontend without exposing our API key. Next we will convert a native Flow...
Fs CMS Attributes API + MiddleLink | Display Airtable Data in Webflow
มุมมอง 8932 ปีที่แล้ว
This tutorial covers how to use the CMS Attributes API by Finsweet with MiddleLink to display data from an Airtable database in Webflow. {{ TOOLS }} MiddleLink | Visual No Code API Builder | www.middlelink.io Attributes by Finsweet | No-code Attributes Solutions for Webflow | www.finsweet.com/attributes/ {{ RESOURCES }} Airtable Base | airtable.com/shrNt6KBZWrJC4gmS Finsweet Attributes Tutorial...

ความคิดเห็น

  • @Jaylen-k2d
    @Jaylen-k2d 2 หลายเดือนก่อน

    1:08 its not giving me those options for the input, its only letting me change the color for the form and boxes

  • @rafita8112
    @rafita8112 2 หลายเดือนก่อน

    Hey man. Is it possible to add a filter based on outseta authenticated user?

  • @sale7680
    @sale7680 2 หลายเดือนก่อน

    ❤❤❤

  • @caesarzkn
    @caesarzkn 5 หลายเดือนก่อน

    Hey @alphi, it's awesome. But I cannot go to redirect URL that I filled in the form. Can you help?

  • @jurgendevries1036
    @jurgendevries1036 5 หลายเดือนก่อน

    Is it possible to make a multi-step form?

  • @js-oc
    @js-oc 6 หลายเดือนก่อน

    voice is too low

  • @JayloAbdullahi
    @JayloAbdullahi 6 หลายเดือนก่อน

    How would you add custom animation to the submit button only?

  • @kevinbarry3495
    @kevinbarry3495 6 หลายเดือนก่อน

    I just want to find out the best free way to have a form on my website with name, phone number, email and message fields. And a way to just keep this information in framer and not have to outsource to a third party platform, is this possible?

  • @tech_curious4985
    @tech_curious4985 6 หลายเดือนก่อน

    Man you are awesome

  • @joshd265
    @joshd265 7 หลายเดือนก่อน

    Was this signup form workflow suggestioned pre Formspark release. Or as an alternative?

  • @joshd265
    @joshd265 7 หลายเดือนก่อน

    Is this process from Framer through Alphi through Airtable, all free on a regular Framer subscription? Or do I have to pay extra for this service?

  • @David-xq7ef
    @David-xq7ef 7 หลายเดือนก่อน

    Hey thank you, this is really helpfull. How do you manage Captcha or prevent spam in your form ?

  • @tana_dior
    @tana_dior 7 หลายเดือนก่อน

    I don't have any idea about what just went on but I know this is what I've been waiting on. We need to talk business because ShinyObjects is amazing too.

  • @MathiasRahbek-u8u
    @MathiasRahbek-u8u 8 หลายเดือนก่อน

    Is it possible to get all the submission data sent directly to an e-mail address instead of using a form submission service like Airtable or formspark?

  • @FixxiTechnologiesLLC
    @FixxiTechnologiesLLC 8 หลายเดือนก่อน

    Can you do this same thing with Framer?

  • @richardshelor5642
    @richardshelor5642 8 หลายเดือนก่อน

    my man...

  • @darraghlynch.design
    @darraghlynch.design 9 หลายเดือนก่อน

    Hey do you know how I could add a link in the title, for instance, I want a checkbox for user to agree to a privacy policy but I want the text of the checkbox to go to link to the privacy policy

    • @ajbarron_music
      @ajbarron_music 7 หลายเดือนก่อน

      Do you still need help with this? I built my own form similar to this one that includes a disclaimer.

  • @sakinaihsan93
    @sakinaihsan93 9 หลายเดือนก่อน

    Hey! Great tutorial. Let me know if it is possible to bring this data to Google Sheets?

  • @themichaellll
    @themichaellll 9 หลายเดือนก่อน

    Please I need this and how to publish it to framee

  • @leslie8
    @leslie8 9 หลายเดือนก่อน

    Just want to let you know, I highly appreciate your work

  • @hynora
    @hynora 9 หลายเดือนก่อน

    Can't seem to get the URL to display properly in airtable :( it keeps showing {{request.body.linkedin-url}} but not the correct URL link

  • @jonathanself1263
    @jonathanself1263 9 หลายเดือนก่อน

    Does Alphi offer discounted pricing for non-profits and schools/educational use?

    • @HeyAlphi
      @HeyAlphi 9 หลายเดือนก่อน

      Hi Jonathan, We have paused all discounts for non-profits and schools/ educational institutions for the current version of Alphi as we plan on launching Alphi V2 in Q1 2024. V2 is an entirely new product and much more suitable for educational purposes as we have significantly minimised the abstraction.

  • @Dileep-s7i
    @Dileep-s7i 10 หลายเดือนก่อน

    i wann get the single record that should be last record any please suggest me how to do it ?

  • @Dileep-s7i
    @Dileep-s7i 10 หลายเดือนก่อน

    HI I need a get Call Can any one please Suggest me

  • @Lizzardking
    @Lizzardking 10 หลายเดือนก่อน

    Hi! Thank you very much for this video. I was wondering, which is the section of the code that makes the form responsive to its container stack in the framer editor? I'm trying to make mine responsive as yours and wasn't able quite yet. Thanks in advance!

  • @jowanerodgers1933
    @jowanerodgers1933 10 หลายเดือนก่อน

    Everything work perfectly at first after following this tutorial but I realize that when I am not logged into Alphi the form does not work until I log back in and open the flow. Is this just how Alphi works or is there some setting I need to turn on?

    • @HeyAlphi
      @HeyAlphi 10 หลายเดือนก่อน

      Hi Jowan, If the form is not working when Alphi has been closed, it indicates the allowed hosts have not been set up correctly. Please double-check that your website URLs are listed in the allowed hosts. You can access the allowed-hosts by clicking the ⚙ icon in the navigation on the left. Feel free to raise a support ticket if you have any follow-up questions.

  • @anfisign
    @anfisign 10 หลายเดือนก่อน

    Important to note: Aplhi is not a free tool!

  • @TomasHelbig-u7s
    @TomasHelbig-u7s 11 หลายเดือนก่อน

    Geat video!! Is it possible to create, from this signinup form, a user validation form, so that the user can log in?

    • @HeyAlphi
      @HeyAlphi 11 หลายเดือนก่อน

      Thanks for the feedback. Yes, you could connect the form to your preferred authentication provider and create a form for registering, logging in, resetting passwords, etc. Luckily, we have already built an out-of-the-box solution, so you don't have to do all the legwork. It's called FramerAuth.com, and it lets you add memberships to your Framer website. If you are looking to sell a product or subscription, you can use our LemonSqueezy integration. Next year, we will be releasing a FramerAuth + Alphi integration.

  • @eserhook
    @eserhook 11 หลายเดือนก่อน

    Hi, can Alphi build membership in framer? and how to use it?

  • @Bangs_Theory
    @Bangs_Theory ปีที่แล้ว

    My flow keeps disconnecting, which have become a disaster for my facebook ad campaign.

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      Hi, We have updated your support ticket with instructions on adding your live domain to your allowed hosts. From our investigation, we noticed your flow is only set up to work with your Framer demo URL (****.framer.app) If you have any further questions or you would like us to update your allowed hosts for you please reply to the support ticket with your production domain. e.g. example.com Kind regards, Joel

  • @Dan_Iscra
    @Dan_Iscra ปีที่แล้ว

    Hi, trying to create a new integration with airtable. It says I need to "verify your email to authorize this integration". I haven't received an email. Any help?

  • @klmgfx
    @klmgfx ปีที่แล้ว

    Can someone help me to change the forms colour

  • @pabloderosacruz
    @pabloderosacruz ปีที่แล้ว

    Hi! Finally found something that doesn’t involve 30348 $ sub. I’m trying to style it as a multi step form, is there any way to have several components and just one submit button and feed all data at the end? Thanks 🦾🦾🦾

  • @osks
    @osks ปีที่แล้ว

    Far too complicated for an idiot like me…

  • @ernestoaragon6765
    @ernestoaragon6765 ปีที่แล้ว

    Awesome tutorial, is there any chance of finding out how I could make the message input higher?

  • @EricSchaberle
    @EricSchaberle ปีที่แล้ว

    You can also use Zapier ;)

    • @JeffMcKeand
      @JeffMcKeand 7 หลายเดือนก่อน

      Mind explaining how?

  • @JohnOates-u6r
    @JohnOates-u6r ปีที่แล้ว

    Hey there Joel. This is working well but we've run into an issue. We're getting successful submission of the fields but we can't get the success state to show. The form just shakes so there's no confirmation to the person that it went through. We are using sendgrid with the x-www-form-urlencoded for the content type. Any insight would be great, thank you.

    • @David-xq7ef
      @David-xq7ef 7 หลายเดือนก่อน

      same here

  • @quandalah3081
    @quandalah3081 ปีที่แล้ว

    I watched your tutorial and changed it to live settings and posted it as well. But if I turn off Alphi, it doesn't work. I think you said that if you set it to live, it will work even if it's turned off. Is there a solution?

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      Hi, If the live endpoint is not working it indicates the allowed hosts are not configured. The allowed hosts can be accessed via the ⚙️ icon in the left navigation. Within the allowed hosts, you should list the websites that can call the API. e.g. example.com, example.framer.page Please note the domains do not end in a trailing slash and are separated by <comma><space>. Feel free to create a support ticket by clicking the 🛟 icon in the left navigation. Once the ticket is raised, I will be able to take a look at your account.

  • @stefankuijerx
    @stefankuijerx ปีที่แล้ว

    Hi, I was wondering: If I follow the exact procedure, my submissions will be visible within the Alphi environment. Can I get the submissions to also appear in my own e-mail (for ex. through Outlook or other services)? And how can I do that? Thanks!

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      Hi, If you only need to receive the email in your inbox, I recommend a service like Formspark. If, on the other hand, you are looking to save form data to Airtable and receive an email, you have a couple of options: 1. Use an integration service that lets you send emails via an API. An example is PostMark. 2. If you are saving the data to Airtable, you could set up an Airtable automation to send an email when a new record is created.

  • @Web__star
    @Web__star ปีที่แล้ว

    Is Aphi still active? It's been a while since you uploaded a video, I am wondering if I can go ahead and use Aphi to develop my webapp

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      Hey 👋, Alphi is still active and we have lots of exciting plans for the future. If you are building a Webflow Web App we recommend using Wized with Alphi and Airtable or Baserow.

  • @appybee_nl
    @appybee_nl ปีที่แล้ว

    Hi, where can I find the prepared code?

  • @Jack-hq8ce
    @Jack-hq8ce ปีที่แล้ว

    How can i make savable data and informations

  • @rynopotamus
    @rynopotamus ปีที่แล้ว

    why in the world hasn't framer just added all these features?!

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      I know a form builder is high on their list but for now their priority is localisation and the CMS API. Source: Twitter (Don't quote me) 😉

  • @watchjet
    @watchjet ปีที่แล้ว

    Why does it only work if the Alphi website is open?

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      Hi 👋, Whilst the Alphi flow is open, it can be called from any domain. When you are ready to publish the flow, you will need to: 1. Publish the flow 2. Add your domain to your allowed hosts. 3. Make sure your form points to live.api-server.io/... You can access the allowed hosts using the ⚙️ icon in the left navigation. You can list your staging and live domains. example.com, example.framer.website (Note the ,<space>) Feel free to raise a support ticket 🛟 if you have any follow-up questions.

    • @watchjet
      @watchjet ปีที่แล้ว

      @@HeyAlphi thank you! Very helpful

  • @watchjet
    @watchjet ปีที่แล้ว

    This is great, just signed up to Aphi from this video.

  • @fiurstat8246
    @fiurstat8246 ปีที่แล้ว

    Greetings, your work is really excellent. Do you also offer forms where you can do spam protection in Framer via Formspark?

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      We have started development on reCaptcha and PoisionBot, however, we are currently prioritising the launch of FramerAuth. I will update this comment when we release captcha support.

  • @joshua0x
    @joshua0x ปีที่แล้ว

    Great tutorial, thanks for sharing!

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      Glad you enjoyed it!

  • @darcey.
    @darcey. ปีที่แล้ว

    I've followed your tutorial, and successfully managed to replicate exactly what you configured in the video which is great (thank you!). However, I've encountered an issue - the connection seems to no longer work when I add another "service" to the form-field. I'm not a back-end developer, so it's really hard to understand exactly what I need to do in order to restore the connection between Framer, Alphi and Airtable. I've tried fiddling around with it, but I'm totally lost at this point. Being able to frequently change parameters is going to be key for me, as I work with clients who constantly want changes made on the site, and knowing how to restore connection will be super helpful Attentively await response! Thanks again for making content like this

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      Hi Darcey, Thank you for reaching out. From the information provided, it sounds like the website you are working on/ testing is not listed in your allowed hosts. The allowed hosts can be found by clicking the ⚙ icon, in the left navigation. Looking at your account, I can see you only have one website listed d********u.co.uk Whilst an Alphi flow is open, the host's rule is not enforced to help streamline development. If you are working/ testing a different website, you can also add it to the allowed hosts. e.g. d********u.co.uk, darcey.framer.website Please raise a support ticket (🛟 icon) and include the link to the page with the form and the Workflow URL. I can then investigate this in more detail for you. Additionally, I have some availability this afternoon if you would like to schedule a call to go over any questions you have. Kind regards, Joel

    • @darcey.
      @darcey. ปีที่แล้ว

      @@HeyAlphi Solved it! Amazing. Thank you so much for getting back to me so quickly 🙌

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      @@darcey. Happy to help! I tried out your form, and I noticed the "Subscribe to our newsletter" field is set as required in Alphi. I recommend the following: 1. If the field should be required, also make it required in the Framer form settings (then is prompts the user) 2. If the field is optional, remove the required option in the Alphi settings I hope this helps. Happy building!

  • @AlisterDiaz
    @AlisterDiaz ปีที่แล้ว

    the framer components its free but Alphi doest right?

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      Hi Alister, You are correct, the component is free but Alphi is a paid service. If you are looking for a free service to collect form data you could use a variety of tools. e.g. Formspark.

  • @Airboxr
    @Airboxr ปีที่แล้ว

    This is great! Is it possible to send responses to a list on Klaviyo (instead of Airtable, Notion etc.)?

    • @HeyAlphi
      @HeyAlphi ปีที่แล้ว

      Hi, I am not familiar with Klaviyo but I have taken a quick look at their docs and you should be able to use the HTTPRequest node in Alphi to connect to the API. Here is an example request from their getting started documentation: developers.klaviyo.com/en/docs/make_your_first_api_call