Create Customer Forms in Framer connected to External API to sends data to any app

today I'm in the beautiful Victoria State library in the city of Melbourne and I'm going to show you how you can create powerful frame of forms send the data to any database of your choice and create flexible workflows on that data get ready for a whole new world of possibilities with framer and Bill ship let's go let's say You're Building your website on framer and you want to add a simple form to that it could be a subscription form for your newsletter or a form where you collect some information from a user for example contact information or a form that triggers a sequence of workflows based on that action to save that data to your database or any other third party tools now the standard forms that are available on framer are very limited you can only connect to for example mail trim or some form spark and things like that but those can be very limiting in what you can do for the processing today we're going to just see that simple forms that you can add to framer tweak with any kind of feel you would like and save that to any other place like a database or ad table Google Sheets and build further work flows on what you want to do maybe you want to send an email via send grid maybe you want to alert on slack so the possibilities are Limitless on what you can do with this bill ship forms all right let's get started so on your website on framer you need to add a form so for that let me get rid of this and go here into assets and add a new new code block let me give this a title of news letter sign up and create this component you don't need to know how to code all you need to do is copy paste the code snippet that we have Linked In the description and simply paste that in and replace this entire content with it so let me select all and control V to replace it and then save it to see the form that has shown up here now if you want want to collect more information like more than an email if you want to collect description or if you want to change this title or this button called to action all that is super simple to do so you just go here and look for the words subscribe to our product newsletter as you can see it shows up here so you can change this to anything you want you can also look up sign up and change this value say suppose you want to say submit now to add more Fields it's pretty straightforward if you're familiar with HTML where you say that there is a input field of email then you can copy paste and add another input field you can add text area and so on now obviously if you don't know how to code all that you need to do is copy this over to chat GPD or friend and ask it to say hey to this form add another field for collecting some information like just give it a title give it a field name Etc and then it'll generate it for you you copy paste it here and you'll be able to see it on the right hand side when you save it so you don't need to actually know the code you just interact with chat GPD and make it happen now there are few parts here that you have to know a bit about to understand what you need to do so first and foremost it's asking you to submit a form URL this is where the submitted form information is to Via an API call we'll be building this API using build ship which is a low code visual API Builder that you can step by step visually build your API I'll talk about that in one second so moving on there are a few other things to take care of so using this API it's making a post request and it's sending the email now if you added another field say for example details you just need to add a comma here and add that field name whatever is the field name that is being set here and this email field is the one that is being used here so you don't need to actually do this you simply in chat GP very clearly prompt saying add this field called description and submit it via the form and it'll actually do it for you you don't need to do any of those changes that I mentioned all you need to Simply change in this is this URL okay now let's go to build ship to see how you can build this URL and handle your submissions on Bill ship when you get set up you get a project and in that you can start building your workflows you can start from scratch like this add API call and you're building an API workflow you can make it a post request type you can give this a name saying newsletter submission and then you can add what do you want to do with it maybe you want to send a message to Discord so you can use our pre-u build nodes here and simply add that or if you want you can store it to a database like fire store or super base and simply create a document also you can use Bill ship's own database so Bill ship comes with inbuilt database that you can use if you would like but if you don't want you can actually use any database like postgress MySQL fir store super base what's interesting is if a node is missing for you here you don't need to like like wait on us to create it you can create your own node with AI and you can say for example send a message on slack if you have access to a sample API code you can just pop that here you can also say things like input is a message and if you have any output that you want to get back you can have that but in this case there's no output so you can leave it as it is so yeah that's simple way to generate a node so in this example when someone submits a email for signing up for newsletter obviously we want to send them a email at some point right so you can use send grid for adding them to the list so for example here on send grid you can use one of these nodes or use the add to contact list node to get them added to a sendri newsletter for the purpose of this example we'll just create a document with that information that is coming in so let's call this product newslet this is the table name that will be used on pill ship then document ID if you want to give a sequential or specific document ID you can do that or optionally you can simply leave it blank then finally you can have in here what is the data that you want us be saved so from the incoming request in the body we have the email so let's just put the body as the data and save it and finally you want to return something you want to say success or failure right so if it is successfully saved in the database you say status return okay and that's it now you click ship and it takes a few seconds and gives you this URL that's it how easy is that now all you need to do is copy this endpoint URL and go back to framer and put it here in the form URL and then you'll be done now you have a fully functioning form that you can use in your web site you can test it out by giving it some email so hello hello.com and when you click sign up it says thank you for subscribing and now if you go to Bill ship you have handy logs at this point where you can click refresh or you can do autof fetching so let me go here and refresh this and as you can see there is a message here and it's successful and you can see that the email is right here inside the body and email that you just sent great now this block of newsletter sign up is working perfectly all that you need to do is place this in your website in your page at specific location where you want it so let's go ahead and go to the pages where you want it to be inserted say for example here at this location after all these rows say suppose right after the social in the row section I wanted to be added I go go back to the assets and right click here and say insert that's it now if you go here this has been added you can obviously tweak The Styling of this easily as I mentioned all that you need to do for that is go back to this copy this code and put it in chat GPD and say change the color to blue or pink and change the text color to Black so you can do whatever you want by just prompting it correctly and you'll get back the code now the best thing about this whole thing is that it's not just a form that you have unlocked you have actually unlocked a way for you to do anything you want in framer so starting from this point right you have this sign up form submission it can be anything like a contact form or hey I'm building a marketplace where someone needs to be connected with someone and someone fills a form I need to send them certain kind of action items all that you need to do is go to your will ship workflow and start doing that action parall for example here every time a request comes in parallely I can create a document so let me drag and drop this under parallel I can also send a message on Discord to alert my team members hey a new agent has signed up I need to do certain things you can Define what message needs to go there you can Define the web hook of your Discord by just going to Discord creating a Channel or you can do anything you want basically so the possibilities of what you can do is actually Limitless and everything here is tweakable with low code so you can go and look at this if you want you don't need to you can also edit a node with AI and say that hey after you get the message append something to it you can tweak the logic of every pre-built node or generate your own node with AI That's it so hopefully this gives you a great idea of what you can do with framer and low code with Bill ship and in the next framer video we are looking to add how can you fetch data from an external API and display it on framer website so stay tuned for that subscribe to our YouTube channel to get more of such amazing video content and we love to see what you build next sh

Channel: BuildShip

Views: 4,872

Keywords: framer, custom framer forms, custom forms, framer form to airtable, framer form to google sheets, framer form to firestore, framer form to supabase, framer form to postgres, framer form custom workflow, custom workflow, workflow, automation, buildship

Id: aghxHhNzTlE

Length: 11min 1sec (661 seconds)

Published: Thu Feb 15 2024