Building a Pre-Launch Landing Page - Webflow, Airtable & Zapier Tutorial for Beginners

in today's video i want to give you a simple project to work on that will help you get started in no code so without further ado let's get into it hey friends welcome back to the channel if you're new here my name is connor and on this channel i help people set up their online businesses using no code tools like webflow ear table and zapier now over the last few months i've been making quite a few advanced tutorials to kind of show you how things with the unicorn factory work but a little bit of feedback that i received from a few people was that oftentimes those tutorials are not particularly great for anyone just getting into no code and i completely agree so that is why i have decided that today i am going to show you a tutorial or a project that you can work on if you are brand new to all of the tools so what we're going to be doing today is we are going to be building a pre-launch landing page for your startup idea and then we are going to use zapier to send all of the form submissions of people who might be interested in using your platform all the way to airtable not just is this a great way to learn how webflow airtable and zapier work this is also a fantastic way to see how much interest you can gather for your startup idea before actually going out and building your prototype so a lot of startups actually got their start using exactly this method which is to basically build a pre-launch landing page explaining what the idea does what the value of it all is and then they used email signups as a way to gorge how much interest there actually is in the platform now this is something that joel from buffer did when he started his social media scheduling platform buffer.com and that is ultimately what inspired this particular tutorial today now given that this will be your first time using webflow ear table and zap yet don't worry if it takes a little bit of time to kind of wrap your head around how all of it works again it's just muscle memory the more often you practice the better you'll get at it but if you get through this particular tutorial you'll be at a point where you understand the basics of how those tools work together and that really lays the foundations for you to end up building entire prototypes like the unicorn factory but before we get into it you know what i'm going to ask please subscribe to the channel if you haven't already also if you enjoy this type of content then please like this video it helps spread the word and it also lets me know that you want me to make more of these particular videos but without further ado let's get into it so the first thing that i want to say straight off the bat is that this will not be a web flow master class i'm going to show you how to build one particular section that will allow you to add a form to basically sell your value proposition and it will kind of be a good place to start without having to get overwhelmed with all the different types of layouts that they are but i'll be linking some resources to where you can learn a bit more about building different things inside of webflow so once you have got this first initial section set up you can then also go and expand on it just by watching all those different videos so assuming you have now got your webflow account set up and you have started your new project then what we're going to do is we're going to start on the home page i'm going to start on a separate page only because i'm going to be putting this particular landing page on my already existing website so the landing page that i am going to be building is going to be for a webflow ear table zapier beginner class that i thought you know what because this is what it's about in this video i thought appropriately i should also create a landing page for it so what i'm going to be doing is i'm going to be starting to set that up inside of webflow now so if you are in here what we want to do is we want to start off by creating the overall layout and structure of this particular page so the way that you can use webflow is you can go over to the left side where that big plus button is and when you click it you'll see that there are a whole bunch of elements that you can use to then populate the white canvas that's in the middle of the screen so i always start off by just adding a section and then in order to make sure that all of the content doesn't go all the way out to the edges what i do is i drop a container inside of that section so that should look something like this so far and if you've made it this far fantastic the next thing that i want to do is i want to put a grid in there that allows me to have two different columns on this particular home section or hero section so the way that you do that is just jump in here and under the layout tab you'll have section container grid and columns available i'm just going to go ahead and click on the grid button now as soon as you've created the grid you'll see that it automatically generates a 2x2 grid but in my particular example i only need two columns but i don't need two rows so the way that you can change that is over on the right side you can go to the style panel and the style panel is used to basically design different elements and what i can do here is just click on the edit grip button and then it will tell me how many columns i have so in this case it says two columns which i can see here one and two and it also says two rows row one row two now all i need to do now in order to remove that um second row is just click on the remove button and now we can see we have two columns one row and that is exactly where we want to go so the next thing that i want to do now is i want to drop two div blocks into this particular grid and div blocks are essentially wrappers that hold the different content so what i'm going to be doing is i am going to just go over here and then i'm going to click on div block now before i actually move on you can probably see that it says grid 11 in here what i want to do is i actually want to start off by naming my different elements in a way that is intuitive for me to understand but also intuitive to others to understand if they ever jumped into this project and wanted to make changes to the layout so what i'm going to do is i'm going to click on this grid 11 and i'm going to rename it to two column grid and so using names like that is just a really good way to make sure that people who end up looking at the structure of your page have a good understanding of what these different elements are another big pro of using um good naming conventions like that is that you'll be able to reuse it in case you ever want to create another section that has a two column grid so back to the div block now if i click on the two column grid element and then drop in the div block it will automatically fill the first column now if i want to add another um div block what it will do is it will automatically drop this div block into the next available column so now i have these two div blocks in here which i'm going to be using as my content wrapper and the idea that i have for these two div blocks is to have the content in the first one and then a video in the second one in fact i might actually put this video right here into that particular div block so the way i can add the video element to this div block is just by going over again to the elements panel and then scrolling down to where it says video so all i'm going to do is i'm going to click on video and then what it will do is it will ask you to add a url now because i haven't uploaded this video yet i won't be able to add it just yet but all i would need to do is just get my youtube link and just drop it in here and then that video will automatically load whenever someone visits the webpage so a very important thing to do in your hero sections is to basically lay out what the value is that you are going to be providing to your customer when they visit your website so because mine is all about helping people get started in no code i'm going to use exactly that as my title so all i need to do is just click on the plus button scroll down to where it says heading and then i'll just drop a heading in to my dev blog so i'm going to change this heading to the ultimate guide to ear table webflow and zapier again not a copywriting master class i might change it in the future but you kind of get the idea then what i want to do next is below my main section what i want to do is i want to add a little bit of a description of what it's all about so i'm just going to go in here add a paragraph and i'm going to quickly describe what this course is about want to learn how to build no code prototypes but not quite sure where to start learn in a diy course how to build a simple landing page for your website and web flow build a crm and ear table and automate some key workflows with zapier so i am definitely going to make changes to this in the future but then what we want to do is we want to collect people's email addresses in case they are interested so the way that we can do that is we can just scroll down to the form block click on the form block and what that will do is it will automatically create a form for you with your name email address and a submit button so i'm just going to remove the name label and the name text field for now by just clicking on the delete button when they are selected and that will leave us with the email address and a field where your website visitors can submit their email address so i want to change the name of the button from submit to sign up for updates so all you need to do is just double click on it that will then open up the form settings tab and then you can already see in here it says button text submit all you need to do then is just change it for sign up for updates now obviously this is not an amazingly detailed landing page but what you could do now is you could add additional sections with things that they're going to learn because i haven't invested a lot of time into thinking about how something like this could work i don't really have the content to add but what i want to show you now is i want to show you how you can now style this particular section inside of webflow so what we want to do is we want to start off by changing the background to a slightly different color than the white so the way that we can do that is we come over here and we start off by giving our section a class name so what i'm going to do is i'm going to call this here dark section now the reason why i give it class names is because if i ever want to reuse a section with the same settings then i can do that by just reusing that class name on that particular element then what you can do is if you want to change your background scroll down on the right side to the background section click on it and then in there you can pick whatever color you want now i've already got a few brand colors set up so i'm just going to go ahead and set that now you can obviously see that now all of the um text is very hard to read because it is black on a dark background so what you can do now also is you can just go to the color section of this particular section and change it from the color free free free to white which is if if if okay so the next thing that i might want to do is i might want to change the color of my button so again if you want to style an element on your page just click on the element and then you'll see that on the right side it automatically selects the element and it allows you to style it so the first thing that we always have to do when we want to style a brand new element is give it a class name so i'm going to call this particular button the submit button so now again all i need to do is just go to the different sections and make the changes that i want so i'm going to just change the color of this button from blue to red beautiful and then another thing that i want to do is i actually want um my text to be all capitalized and i also want to make it bold so all you need to do is just jump over to the typography section and then under letter spacing you'll see the capitalize field so all you need to do is click on the all caps field and then all we need to do is just scroll up to our font and then just select the weight of the font so in my case i'll use 700. and then another thing that i might want to add is i just want to add a little bit of space between the sign up form field and the actual button and the way that i can do that is by adding some spacing now there are two types of spacing first of all you have margin and margin kind of pushes other elements away and then you have padding and padding just adds additional space inside so if i added padding you'd see that it actually adds that additional space inside of the button whereas if i added margin to the top it actually just pushes it away from the next element that is above it so i'm just going to make this here 30 pixels and that is pretty much fine so the next thing that i want to do is i want to add a little bit of margin below my actual heading so i'm just going to click on my heading and again first thing that we need to do is we need to give it a class name so i'm going to call this the hero title now you'll see that inside of my project already some options come up and these here are existing classes now an important lesson to know about using classes inside of webflow is if you want to reuse a specific setting that you have for a particular element you can do so with class names so if i click on hero title you'll see that the weight of the font has changed and that is because i actually have a different element on my website that has the title hero title and that basically means that whenever i reuse the settings of that class it will automatically apply those settings to whatever i apply so in this case i actually am quite happy with leaving it as it is using the same class names across different elements adds nice consistency to your website and so i'm happy to just keep it as it is the next thing maybe style the hero paragraph a bit so what i'm going to do is i'm just going to go ahead and call this class hero paragraph and again i already have an existing class for that so if i click on that i can see that it goes gray now not ideal if you have a background like this but i do actually like the um sizing of the font so one thing that you can do if you already have a class that you like but you just want to make some minor changes to that particular paragraph now instead of just going ahead and changing the color of this particular font which would then change on all the other different pages as well and you definitely don't want to do that because there is probably a reason why you chose this color what you can do is you can use something called combo classes and combo classes are basically subclasses that basically allow you to make some minor changes to your existing class so what i'm going to do is i'm going to add a combo class that allows me to make this particular font white so just click on behind hero paragraph and then i'm just going to write font white now as soon as i add that particular combo class to my element it won't automatically make that change but what i can do then is i can now scroll down and i can just change the color of the font to white and now it's already starting to look like something now one thing that's bugging me a bit is that on my website if i click on the preview button you'll see that there's a huge section down here that is the white and i don't want my website to look like that because it kind of looks weird so what i'm going to do is i am going to jump in here and i'm going to again click on my dark section now what i can do is i can either add some padding to my section by just going in here and clicking on the 40 40 at the top and the bottom or option number two i can actually just give this particular section a defined height by just adding it down here to the height section now if you want to add a height to a section then what i recommend doing is actually giving it a combo class so that you can then reuse the dark section styling on different elements in the future so the way that we're going to do this is we're going to go up here again to where it says dark section and we're going to add a combo class and so i'm going to call this combo class full page and what that will indicate to me is that this particular section is a full page section and then all you need to do is just type in the height and the height is 100 vh now vh is basically something that you can use to tell the browser how high your section is relative to the viewport of a particular user so if someone is looking at it on a phone basically what you're saying is i want this particular section to be 100 in height of that particular device that they are using and so that allows you to be a lot more flexible across multiple different device sizes now another thing that i'm not a huge fan of if i am completely honest is that my entire section actually sits quite at the top so what i want to do is i want to just shift this entire section here more towards the middle of the page so the way that i can do that is just by jumping in here and changing the layout so where you can say see display from what is currently set which is display block 2 display flex so if i click on that it will then allow me to basically change the alignment of the different elements so i'm just going to change it to center and now you can see that it moves the entire element into the center of the page now again not a design master class i feel like if i had additional sections i'll move it up a bit but for now this does the trick so the next thing that we'll want to do is we will want to move over to the next stage which is testing form submissions so the way that you can do that is you can just jump in here and publish your site and once you have published your site you'll actually be able to go to that particular landing page and you'll have a url with the particular slug that you created and now what we want to do is we just want to test putting in our email address so i'm just going to put in connor unicornfactory.nz now as soon as that happens you'll see that a little message come comes up that says thank you your submission has been received obviously that doesn't look great if you want to style it the way that you can do it is just click on your form element and then click onto the settings element and then inside of that settings element switch the state from normal to success and then again you can just jump in here and style it in whatever way you like so again just go in here you can go and click on the success message field type in the class name so i'm just going to call this success message and then i have a combo class for this which is called green nice and so this will do the trick for now but again you have more time feel free to style it to your delight and um basically make your landing page look appealing to anyone who might want to sign up to try your platform as soon as you have built it now the next thing i want to show you is where those form submissions are sent when someone submits their email address so all you need to do is click on project settings and then in your project settings click on forms and then you'll see inside of the form sections that all of your uh form submission data is sent in you can see right there at the bottom that it says connect uniform factory.nz which is the form that i submitted now one recommendation that i have if you're using multiple forms on your website is to actually name that particular form something that makes sense so i'm going to name my form um beginner course form that way you'll be able to separate out the different people that submit different forms on your website and it will be easy to basically contact them with the relevant information as soon as you're ready to launch your platform and so that is the first part of the job done obviously we only built one particular section for this landing page but i'll be linking some resources in the description down below where you can learn how to build additional sections for things like features benefits testimonials and all those types of things and just adding those sections to your site will definitely increase the chances of people signing up to your pre-launch list now the next thing that we need to do is we need to build out our little pre-launch list using a tool called air table now the reason why we want to obviously build this list is because then when you're ready to actually get your product to market then you can actually contact people who have already expressed interest and that just helps a lot with getting traction and building momentum a lot faster so just start off by going over to ear table create an account and then add a new base now when you add your new base you should start off with something like this now i've created a new table for my beginner course leads but yours will probably be empty at this point which means that all of these other uh tabs will be missing no big deal all you need to do is just go ahead and then rename your table to whatever it is that it is that you want to name it and then you'll be good to go to start so all we are collecting here is email addresses so all you need to do is really just change this first field from a name to email so the way that you can do that is just by clicking on customize field type and then change the name from name to email and then another thing that you can do is you can actually change the type of field so at the moment it's a single line text and what we want to change it to is email so now the idea is whenever someone submits that form on your website that the email address just automatically gets added here so that over time you can build this huge list of people that you can get in touch with for launch now one other thing that i recommend doing is also adding a new field at the end for a date and time when the record was created that gives you a real good idea of when you have certain types of spikes and signups so i'm just going to call this field created and then in the find a field type section i'm just going to go ahead and type and create it and what it will do is it will give you two options one is the created by field which basically tells you who the person was that added that record but the one that we want to use is the created time field and what that will do is will automatically tell you when that particular record was created so in my case it's got all of the dates when the original records were moved in there but you'll see in just a second when we send all this information from webflow to airtable that it actually tells you what the actual time was that the person submitted their email address now one last thing that you could do is just remove all of the unnecessary fields that you don't need so we'll remove notes we will remove attachments and we'll also remove the status field so now i obviously showed you where you can go ahead and find all of your email addresses that are submitted on your website but obviously what we want to do is we want to start automating some of these workflows because as soon as you start automating them there is less error that happens and also you don't actually have to spend the time actually manually writing in what the email address is now you could obviously at the end also export um the csv file of all of the records that were submitted through webflow but this is just a really great example of how you can use noco tools to send data between the different platforms so what i'm going to do now is i'm going to show you how you can get all of those email submissions from webflow to airtable so i use a tool called zapier and zapie is a tool that allows you to send data between all these different apps that you use so i'm pretty sure they have over 2000 apps that you can integrate with so if you already have a selection of tools that you enjoy using then you can actually just integrate it with that so if for example you're using something like hubspot or even google sheets and you don't really want to use airtable then just go ahead and use zapier to connect it with whatever tool works best for you so we're going to start off with creating what's called a zap and a zap is basically one of those workflows so just click on the make zap button and then what zapier will do is it will ask us for a trigger now then zapier there are two different types of things that can happen first of all you have a trigger and an action now the trigger is basically the event that happens that basically starts the automation now in our particular case the trigger is when someone submits a form on our landing page and from that point we want to start certain types of automations so in my case i actually want to send the information that was submitted inside of that form to airtable so first of all we've got to configure the trigger and the way that we can do that is just by typing in the name of the app that triggers the event so in our case that's webflow now my account is already connected but if you haven't connected it yet then just go ahead and do that and you'll be able to select the actual website that triggers the particular event and as soon as you've connected it you'll be at this particular screen here now if we look at the trigger event options you'll see that you have form submission new order and updated order now obviously it's quite intuitive to figure out which one it is that we're going to be using it is a form submission so the first thing that we're going to have to do is we're just going to have to start off by selecting the name of our site so in our case i want to select my personal website because that's where my landing page is and now it's going to ask us for our form name now one thing i recommend doing before actually setting up the workflows is just testing that workflow one more time so i'm back on my page now and i'm just going to go ahead and submit it so i am going to type in my email address and as soon as that is done i can now go back to zapier and now i can go and have a look at my particular form names and you can see right at the top that the beginner course form pops up because that is what i named it now if you don't name your field you'll probably just have to go with email form but again if you have multiple forms on your page you might get it mixed up with other forms so i always recommend just naming your forms inside of webflow now once that is done just click on continue and then click on test trigger and so as soon as you do that you actually see what information was submitted by email so you can see here what the name of the site was what the date was what the data email was so what was the email that the person submitted and what was the name of the form now because i'm only asking for someone's email address it only has that but obviously you can add whatever other fields you want to your form and the responses from that form submission will then be listed in here so now that we have done that now what we want to do is we want to set our action and the action that we want to set is we want to send that information that our customer submitted to airtable so again similar process we want to start off by picking the app so i'm just going to type in airtable and now we need to choose our action event now again here we have two options we have create record and update record now the one that we want to work with is the create record field so i'm just going to go ahead and click on that and now again i just want to connect it to my account and now what we want to do is we want to select our base and the base is basically the name of the overall uh airtable base that you collected i don't know if there's any other word for it so in my case it's my confirmation.com base and then you want to select your table now your table is the um column that you have inside of your ear table base so in my case it's called beginner's course lead and then what i want to do is i just want to go ahead and select that so i've got that down there and now what you'll see is that it will open up some different fields now the only field that i really need to populate is the email field so all i need to do is just click into it and what you'll see is i can actually just manually type in different values or more more usefully you can actually select fields that were submitted in any of the previous steps so in our case we only have one previous step which is a form submission inside of webflow and you can see from that test record that there is my email address so all i need to do is select there and then i can click on continue and then once i'm here all i need to do is click on test and continue and now if we go back into ear table we can see that a new record was added with the email address of my particular website visitor as well as the date and time when that record was submitted so all you need to do then before we wrap things up is turn on the zap and then i just rename it to beginner course leads or whatever it is that is more applicable to your particular project so now i actually want to show you what happens in real time when someone submits their email address to your landing page so what i'm going to do is i'm just going to jump in here i'm going to add another email address which in my case is connor plus2 gmail.com now as soon as i submit it you can see that it automatically gets added to my record inside of airtable and that is basically the most simple workflow that you can set up inside of webflow ear table and zapier and that is pretty much it so obviously you can expand on both the form fields that you collect the designs of your landing page and all those types of things but the most important thing about this video is that if you get an understanding of how you can work with each of those tools then you'll be able to expand on that in the future and those tools can be used to build things like the unicorn factory and a whole bunch of other fantastic platforms and it basically works off the foundations of webflow airtable and zapier so i made this particular tutorial for anyone who is brand new to the tools so if you have never used it before and you're interested in giving this a try then i'd highly recommend just sitting down with this particular video and going through each individual element now as soon as you have managed to build the landing page as soon as you have managed to automate the workflow in zapier then start using different resources that are again i'll link in the description down below to expand on what you've done because as soon as you get to a certain point where you feel like you're making good progress with it it'll become a lot easier to start jumping into some of the more complex workflows now obviously if you want to see what kind of workflows you can set up beyond just a basic workflow like that then i recommend checking out some of the other videos in my channel i've got some that are quite advanced where i use multiple different tools and that will give you kind of an idea of how far you can take things and also if you do want me to make that webflow airtable zapier beginner course then submit your email address on that landing page i'll leave the link in the description down below and if we get enough people i might just go ahead and build it other than that i hope that this tutorial gets you going with no code it can be life-changing you can end up building platforms that can change both your life and the lives of others and i just wanted to say thank you so much for sticking around for the entire video and i'll see you back here for the next one

Channel: Connor Finlayson

Views: 2,063

Keywords: no code beginners tutorial, webflow, webflow tutorial, airtable, airtable tutorial, zapier, zapier tutorial, zapier tutorial for beginners, zapier tutorial 2021, webflow tutorial for beginners, webflow tutorial 2021, airtable beginners tutorial, airtable tutorial 2021, entrepreneurship course, indiehacker, how to build a membership site with webflow memberstack airtable and zapier course, connor finlayson, online marketplace, unicorn factory, no code app development

Id: l0XOYd356TY

Length: 28min 35sec (1715 seconds)

Published: Mon Apr 19 2021