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?
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.
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
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!
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!
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.
Hi, the free version does not support image uploads but we can create a bespoke form that support image uploads using either upload(.)io or Uploadcare. Feel free to reach out if you would like a quote.
Hi Azzam, I recommend using a service like Zapier or Make, as they both have SMTP Integrations. You will need to configure a Webhook and then add the Webhook to the URL field in the form. Whilst Alphi does support sending emails via Postmark this is intended for transactional email within a web app.
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.
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.
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
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?
I will add this to the list of tutorials. We are finalising a new product for Framer that will tie into Alphi and the form component. Stay tuned for updates. We offer consulting and development services if you need a booking for a client project (ASAP). I would be happy to help.
Thanks for the feedback Oskar. Our Framer Form Component can connect to any API server providing you complete control over where your data is sent. Regarding Alphi, we act as a middleman between your users and APIs. We do not store inbound requests or responses. We offer a caching solution, but you as the user, have complete control over how long the data remains on our server (5 min to 24 hours). Lastly, we are a UK company registered in England and Wales and use a data centre here in the UK. You can learn more about our privacy policy on our website.
Hi Lovre, The form component can be used to create a booking form (date fields were added last week). The PRO version will be released soon and includes advanced fields, e.g. Set available dates in the date picker via API. Alphi is a no-code cloud function builder, so the possibilities are endless. You can think of it like a web server without the hassle of maintaining infrastructure or code. Here are some examples of what users are building with Alphi. - Booking systems - Invoicing systems - Job boards - Dashboards - AI Apps We support streaming for OpenAI Text Completion + Chat Completion. Please note the above examples require a database; we recommend, Airtable, BaseRow or MongoDB.
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?
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.
I need to know if there`s a way to add a country selecting field for the form (with all countries) and also a whatsapp number field with a prefix code for all countries too
Hi Kevin, this is currently not available in the free version, but it is something we have done for paying users before. Let me know if you would like a quote.
@@HeyAlphi thanks for the support, I bought alphi yesterday and I am having trouble with the flow, when it isn´t opened in a tab it doesn´t work and I already changed it to live, can you help me out
Hi @@kevinluiscadenacarriel1691 , Apologies for the confusion. It sounds like you need to add your website URL to the allowed hosts. Instructions: 1. Click the ⚙ icon in the left navigation 2. Enter your domain in the Allowed hosts You can add both your Framer staging URL and your production URL. e.g. example.framer.website, example.com Please note: there is no trailing slash and a space between the comma. Let me know how you get on. You can also raise support tickets by clicking the 🛟 icon in the left navigation.
Hey, can I directly attach the formspark link to the form? I tried doing that but the data inputs aren't being recorded on formspark and the entire form wiggles while submitting instead of showing the overlay, how do I fix this?
Hi Kai, The form allows you to connect to any API provider. If the form is not working, I recommend double-checking the following: 1. Method = POST 2. Content-Type = JSON 3. All the fields have a 'name' property set If the form still does not submit, it looks like you may be facing an issue with connecting to the Formspark API. Some users also faced this issue, and it can be resolved by changing the Formspark domain from 'submit-form.com' to 'api.formspark.io'. It looks like some ISP's block the first URL. I hope this helps. P.S. I am currently having electrical work, so my internet keeps getting turned off (cellular data is poor too). I will do my best to support you.
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?
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?
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 . 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.
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
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. 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!
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.
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 ,) Feel free to raise a support ticket 🛟 if you have any follow-up questions.
Hi Sir, thank you for this tuto ! I face an issue, if i close the window on Alphi it never work, even if i switch to live, publish it and update the link in framer... Does it happens to you before ? Thank you very much
Hi Vincent, It sounds like your website URL has not been added to your allowed hosts. If you click the cog icon (in the left menu in Alphi), a popup will appear, allowing you to enter your URL. I recommend adding your framer staging URL and your production URL (without a trailing slash). e,g: example.framer.app, example.com I will improve the documentation as you are not the first person to get caught out by this. Feel free to raise a support ticket by clicking the life ring icon if you need further assistance.
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
@@HeyAlphi nothing is working I have used my website page and also an external link. Form is submitting but not redirecting and its shaking like some wrong input
@@arnabmaiti6269 Regarding the error, I recommend changing the URL to jsonplaceholder.typicode.com/todos/. This is a test endpoint which will echo the request. I just remixed the project and tested it with the URL, and it worked as expected (redirect to /success). If the form jiggles, it indicates an error in submitting the form. Can you send me your console logs? If you would like to create a success overlay, please watch the tutorial below, which uses the Input Component (the steps are the exact same). ua-cam.com/video/Twq4xwvNR-k/v-deo.html I hope this helps.
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 🦾🦾🦾
Just want to let you know, I highly appreciate your work
Hey @alphi, it's awesome. But I cannot go to redirect URL that I filled in the form. Can you help?
1:08 its not giving me those options for the input, its only letting me change the color for the form and boxes
Hi, can Alphi build membership in framer? and how to use it?
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?
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.
same here
Awesome tutorial, is there any chance of finding out how I could make the message input higher?
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
Was this signup form workflow suggestioned pre Formspark release. Or as an alternative?
Great tutorial, thanks for sharing!
Glad you enjoyed it!
This is great, just signed up to Aphi from this video.
why in the world hasn't framer just added all these features?!
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) 😉
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!
How would you add custom animation to the submit button only?
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!
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.
Is it possible to make a multi-step form?
Hi, looks good. Is it possible to upload an image using this form? Thanks
Hi, the free version does not support image uploads but we can create a bespoke form that support image uploads using either upload(.)io or Uploadcare. Feel free to reach out if you would like a quote.
Is there a way to send the submitted information to an email? instead of the airtable in your example
I want to get the info right into my inbox
Hi Azzam,
I recommend using a service like Zapier or Make, as they both have SMTP Integrations.
You will need to configure a Webhook and then add the Webhook to the URL field in the form.
Whilst Alphi does support sending emails via Postmark this is intended for transactional email within a web app.
I did it with formspark, and it works really nice but thank you for the fast reply!
Excellent @@azrrow, I am glad to hear you got it working.
@@HeyAlphi hey Is there a way to show google recaptcha with your method? Don't know if that possible
Google re-captcha will be coming soon, but it isn't available just yet.
To keep updated feel free to follow me on Twitter 0xJJW.
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
Greetings, your work is really excellent. Do you also offer forms where you can do spam protection in Framer via Formspark?
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.
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?
Important to note:
Aplhi is not a free tool!
Geat video!!
Is it possible to create, from this signinup form, a user validation form, so that the user can log in?
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.
This is great! Is it possible to send responses to a list on Klaviyo (instead of Airtable, Notion etc.)?
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
Hey! Great tutorial. Let me know if it is possible to bring this data to Google Sheets?
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?
How to add a responsive calender for appointment page on framer.can you please make h tutorial for this
I'd also be interested in seeing a tutorial for this
I will add this to the list of tutorials. We are finalising a new product for Framer that will tie into Alphi and the form component. Stay tuned for updates.
We offer consulting and development services if you need a booking for a client project (ASAP). I would be happy to help.
Awesome ! Thanks a lot! Do you know if it’s fully compliant with EU GDPR?
Thanks for the feedback Oskar.
Our Framer Form Component can connect to any API server providing you complete control over where your data is sent.
Regarding Alphi, we act as a middleman between your users and APIs. We do not store inbound requests or responses. We offer a caching solution, but you as the user, have complete control over how long the data remains on our server (5 min to 24 hours).
Lastly, we are a UK company registered in England and Wales and use a data centre here in the UK.
You can learn more about our privacy policy on our website.
hmm is there a way to create some reservation systems for example for restaurants with these tools? What is the use except forms?
Hi Lovre,
The form component can be used to create a booking form (date fields were added last week). The PRO version will be released soon and includes advanced fields, e.g. Set available dates in the date picker via API.
Alphi is a no-code cloud function builder, so the possibilities are endless. You can think of it like a web server without the hassle of maintaining infrastructure or code.
Here are some examples of what users are building with Alphi.
- Booking systems
- Invoicing systems
- Job boards
- Dashboards
- AI Apps
We support streaming for OpenAI Text Completion + Chat Completion.
Please note the above examples require a database; we recommend, Airtable, BaseRow or MongoDB.
Hey thank you, this is really helpfull. How do you manage Captcha or prevent spam in your form ?
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?
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.
thanks. but your volume is very low. you need to add a light compressor and adjust your volume to peak at 6db-12db
I need to know if there`s a way to add a country selecting field for the form (with all countries) and also a whatsapp number field with a prefix code for all countries too
Hi Kevin, this is currently not available in the free version, but it is something we have done for paying users before. Let me know if you would like a quote.
@@HeyAlphi thanks for the support, I bought alphi yesterday and I am having trouble with the flow, when it isn´t opened in a tab it doesn´t work and I already changed it to live, can you help me out
Hi @@kevinluiscadenacarriel1691 ,
Apologies for the confusion. It sounds like you need to add your website URL to the allowed hosts.
Instructions:
1. Click the ⚙ icon in the left navigation
2. Enter your domain in the Allowed hosts
You can add both your Framer staging URL and your production URL.
e.g.
example.framer.website, example.com
Please note: there is no trailing slash and a space between the comma.
Let me know how you get on. You can also raise support tickets by clicking the 🛟 icon in the left navigation.
Hey, can I directly attach the formspark link to the form? I tried doing that but the data inputs aren't being recorded on formspark and the entire form wiggles while submitting instead of showing the overlay, how do I fix this?
Hi Kai,
The form allows you to connect to any API provider.
If the form is not working, I recommend double-checking the following:
1. Method = POST
2. Content-Type = JSON
3. All the fields have a 'name' property set
If the form still does not submit, it looks like you may be facing an issue with connecting to the Formspark API.
Some users also faced this issue, and it can be resolved by changing the Formspark domain from 'submit-form.com' to 'api.formspark.io'.
It looks like some ISP's block the first URL.
I hope this helps.
P.S. I am currently having electrical work, so my internet keeps getting turned off (cellular data is poor too). I will do my best to support you.
@@HeyAlphi I think my YT has a bug, my previous reply got deleted, I tried this and it's still showing the same error :/
@@kai2939 Please, could you share a link to your website? Feel free to send it as a DM on Twitter if you don't want to post it publicly. 0xJJW
@@HeyAlphi Hey, yess, but your DM's are closed on twitter
I have just updated my settings, you should be able to send me a message now.
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?
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?
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 .
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.
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
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
@@HeyAlphi Solved it! Amazing. Thank you so much for getting back to me so quickly 🙌
@@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!
Thank you so much!
You're welcome; happy to hear it helped. 😃
You can also use Zapier ;)
Mind explaining how?
the framer components its free but Alphi doest right?
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.
Why does it only work if the Alphi website is open?
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 ,)
Feel free to raise a support ticket 🛟 if you have any follow-up questions.
@@HeyAlphi thank you! Very helpful
Can someone help me to change the forms colour
Hi Sir, thank you for this tuto ! I face an issue, if i close the window on Alphi it never work, even if i switch to live, publish it and update the link in framer... Does it happens to you before ? Thank you very much
Hi Vincent,
It sounds like your website URL has not been added to your allowed hosts. If you click the cog icon (in the left menu in Alphi), a popup will appear, allowing you to enter your URL.
I recommend adding your framer staging URL and your production URL (without a trailing slash).
e,g: example.framer.app, example.com
I will improve the documentation as you are not the first person to get caught out by this.
Feel free to raise a support ticket by clicking the life ring icon if you need further assistance.
@@HeyAlphi best support ever ! Awsome tool for Framer users, thanks a lot.
How can i make savable data and informations
My flow keeps disconnecting, which have become a disaster for my facebook ad campaign.
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
Can this be used with memberstack 2.0 to make framer compatible
In my case form is not redirecting to the success page
Please can you confirm if you are redirecting to an external URL (not your website)?
@@HeyAlphi nothing is working I have used my website page and also an external link. Form is submitting but not redirecting and its shaking like some wrong input
@@arnabmaiti6269 Sorry to hear that, would you be able to send me a link to your Website?
@@HeyAlphi if there is a option like after submitting the form a loading screen appear and give a form submitted message, it will be great
@@arnabmaiti6269 Regarding the error, I recommend changing the URL to jsonplaceholder.typicode.com/todos/. This is a test endpoint which will echo the request.
I just remixed the project and tested it with the URL, and it worked as expected (redirect to /success).
If the form jiggles, it indicates an error in submitting the form. Can you send me your console logs?
If you would like to create a success overlay, please watch the tutorial below, which uses the Input Component (the steps are the exact same).
ua-cam.com/video/Twq4xwvNR-k/v-deo.html
I hope this helps.
Man you are awesome
❤❤❤
HI I need a get Call Can any one please Suggest me
my man...
voice is too low
Far too complicated for an idiot like me…
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 🦾🦾🦾