Send data from Framer to Google Sheet (Custom Form)

hey guys so the form that we'll be creating in this particular video is a simple form like this which has some basic styling I'm actually going to show you how to do all of this from scratch so creating a form creating custom form in framer styling it like this and then selecting some data and as you can see like it has some basic validation as well which normal HTML forms have so it's going to be that and then I can type a message and then I can click on submit we're going to get a confirmation here done nice work am design and this is going to land into our Google sheet so I'm going to show you all of that so stay tuned and do subscribe for a recent client I actually created this functionality and I figured out like not a lot of people are talking about it that client also had framework forms purchased so something you see here and I'm like surprised that a lot of people are using framework forms um to me it's not really worth it but I mean I don't want to disown them but the fact is that it does not even have basic validation like basic HTML validation and obviously you can't send data from streamer forms directly to Google Docs or something along those lines so that was a limitation that I encountered there as well apart from obviously tons of other limitations uh but I'm going to show you how to actually go ahead and do that in framer so the first thing I'm going to be creating a custom form I'm going to also show you how to actually style it and then send data so in order to do that you just need to create obviously a um a form in or as a react component and framer so I'm going to create like form or something on those lines here I have the form and I'm going to just start adding things so the first thing I want to add is I want to add a where exactly the form is going to be sent so the form test or the form URL or something on those now let's just name it that name it that then we have a basic form so I'm going to say okay one other thing that you can see we have some styling applied here so we can probably use that so I'm going to say this is going to be a form and this is also going to be a form and then here what we're going to do is we're going to say the action or where this is going to actually submit the data is going to be our form URL which we will fill out later and then we have a method so we want this form to post not get data so since this is posting we're going to see the method is going to be post and then we're just going to insert a bunch of input Fields so we're going to say the name for this input field is going to be first underscore name and I'm just trying to do this really quickly I'm not going to again show you how to style everything I guess like I'll show you how to style something actually let me just do that so you can tweak it later on if you want to a lot of people are confused by react and style so I'm going to say this is going to be my input Style that's done let's discrete our input style here as well input Style s t y l e and then we can obviously style it later but for now we have the first name we have the last name we have the email and then we have the message these are the fields let's say that we actually want to send so I'm going to say last name and let me just add the placeholder here as well type something let's just keep it generic okay let's delete all of this again so we can have that okay so this is going to be our last name this is going to be our email also one important thing is I could just type the type here the type is going to be text here the type is going to be text as well here the type is going to be email because we want basic email validation here which unfortunately as I mentioned isn't really present in framer forms so something like this required let's make all of these fields required and then we have a basic text area so let's just go ahead and add that text area here well we don't really need to add anything inside of it so let's just say that the name is going to be the message and the style is going to be our input style so basically the same style input style and if we save it we can see the form on the right and now let's just go ahead and actually give some styling so we have a display Flex here on the form we're going to say that this particular form is going to flow in a particular direction so maybe the horizontal Direction so Flex direction is going to be column and everything should start following um vertically for the input stylus and we also need a gap between these fields so let's just give a gap it can be eight or maybe 16 the input style is going to be padding let's just give it a padding first padding 8 12 pixel 16 pixel maybe and then I think that should be it let's just consider that it and we can obviously give a border radius if we want border radius 4 or 8 or 12. let's just give it or maybe let's just make them all four pixels I don't really like a lot the Border radius um so that is done let's also add a placeholder to the text area as well say type your message there you go and maybe obviously we need the text area to be a bit larger so I'm just going to say that the rows are going to be five row sorry rows are going to be five and then we have a button at the bottom that's going to send the data so we're going to say input type is going to be of submit the value of the button is going to be submit and there you go so we have a button here and maybe we want to style the button so I'm just going to say that this button is going to take a button style and let's just go ahead and add a button style here so the background can be hash22 and the color can be white the font size or sorry the font weight can be 600 and maybe the padding can be 12 pixel 16 pixels similar to our input fields and maybe the Border can be none so border none okay so that's done this is our form if you want to insert it we can just insert it here now as you can see we can't really scale it so in order to scale it we can just go at the top and as you can see we have these two values written here which says like framer supported layout width so if you want to change or modify this layout width we can say any uh prefer prefer fixed so if we just replace that with both height and width we should be able to change the width now so I can go here I can say this should be fixed and I can resize it or do whatever and if this was within an auto layout so for example this is sorry a stack then I can also say that this is going to be fill container or something on those lines so I can tweak all of that stuff okay so now that that's done I'm just going to publish it and see if the form is working fine so publish and if we try to submit it obviously the fields are saying that they're not done correctly the email validation is at least getting some basic validation I also don't really like the borders on the input style so let me just go ahead and remove them uh border none there we go and now we should not have the border and now let's just go ahead and actually link this form to our Google form or Google sheet so in order to do that you need to create an extension here so you're going to go to extension you're going to say app Scripts once you actually say that you're going to land into a page like this you're gonna have some files here in this particular editor and you can open or create a new script so I'm going to add a new script I'm going to say this is going to be my framer form script or something and then I'm going to say this is going to post the data it's going to prevent receive an event from that form and what we need to do here is we need to Define all of the data that we are actually going to get from this form so we can say variable row and this row is going to have let's say a bunch of data parameter e dot parameter is going to fetch the value of our first name actually let me see if I actually what yes this is first name last name email message and that's it first name last name email message okay so we have first name we have last name we have email and then we have message so we already got this particular data now we have to fetch the sheet that we actually want to send this data on so we're going to say spreadsheet dot app so this is a service that allows us to access our spreadsheets and we can access this spreadsheet by open ID open by ID or open by URL I'm just going to say open my URL so here is our URL for the spreadsheet so I'm just going to copy this sorry I'm just going to copy this URL that you see here and you can copy it on your end as well and then once you've done that so this is our sheet now we want to say on this sheet that we we just have access to I want to append each row that I get of this data and maybe we're also going to return a message that basically prints out if a form is submitted successfully so I'm just going to say done nice work am design okay so that's done I think that should be done that should be working I'm just going to say deploy and I'm going to make a new deployment and I'm just going to deploy I'm not going to enter anything here well actually you should make sure that obviously you have access to it and everything and once you're done you get this web app and actually let me just deploy again to make sure you see the fields here so when you're deploying you obviously need to deploy it as a web app when you're deploying it as a web app you can give a description you can make sure that it's executing as you or whatever and decide like who actually has access to this web app and then you can deploy it once you've deployed it you're gonna get a screen like this which is going to allow you to copy the web app URL and the deployment ID I'm going to copy the web app URL and I'm just going to paste it into this form URL and hopefully hopefully if I publish this everything should already be connected and it should be working so if I go to my form here and I try to type my name email and then this is your message and submit it done nice work am design so that's done and hopefully we should have our data here so I said Mahmoud email and message so email and message is unfortunately not working and I'm let's just see why that is okay I have mentioned like email underscore name obviously did not fetch any value like that and similarly for the message as well so we're gonna do a new deployment here we're gonna say deploy and it should work now both the email and the message obviously I was not fetching the correct values which is why it was not working and then I'm just going to go ahead and update our form URL here as well and publish this so hopefully it should be working now I'm just going to delete the corrupted values and we're going to go to our framer sorry we're gonna go back here we're gonna say that this is some of the stuff that I want to submit and I'm going to submit it and we have this and hopefully all of the values should be here and you can keep on expanding the form as much as you want but this is basically what I wanted to demo and a really nice easy way in just a few quick steps to actually connect your streamer form how to style it and then obviously post data to any service like this is just one service but you can just create a custom framework form and then post data into different places like forms park or MailChimp or like I don't even know so that's pretty much it do let me know if you found this video useful I actually am trying to do things that are that may be a bit more advanced so if this is a bit more advanced just get going on top of your heads definitely let me know and I can think of slowing down a bit so that's pretty much it see you later take care and do subscribe and do hit the Bell icon

Channel: AM Design

Views: 11,053

Keywords: amdesign, form, framer, framer form, framer to google sheet, google, google form, google sheet, ui, ux

Id: 18Cpu_Xajo8

Length: 11min 34sec (694 seconds)

Published: Thu Sep 28 2023