how to add form builder app on shopify website

Hi everyone, it's me, Lu Wee, and welcome back to a new video.,So in today's video, I'm going to show you,how you can set up custom forms inside your Shopify store.,While Shopify does offer two native forms, that is, the account creation form as well,as the contact form, you'll find that these these forms are pretty basic.,For instance, for the create account form, you'll find that there are only four,fields the first name, last name, email and password.,That's it. On the other hand, the contact page also,only features four fields name, email, phone number and message.,While these default forms get the job done,for advanced users who have a need for getting more information from their,customers or potential customers, these forms can be quite limiting.,If that's you,,you find yourself in the position where you need to customize your own forms.,So there are a few options to achieve this.,The first option is to get your hands,dirty and go into the liquid code of your theme and edit them there.,But if you don't know how to code,in liquid, all of this can look like a bunch of gibberish to you.,So if you don't know how to code yourself and hiring a developer is too expensive,for you, well, the good thing is that you can use form builders.,Form builders typically have a drag and drop interface where you can build,almost any kind of form without using a single line of code.,Now, when it comes to using form builders,,there are actually two types of form builders that you can use.,The first kind are the third party ones where you build the form on another,platform and then you embed that code into your Shopify store.,And the other way is using a third party,app within the Shopify ecosystem to build the forms.,Well, these forms that you build,with an app can also be in the form of embedding or using a short code.,There are pros and cons of using either one.,Of course, when you use a third party form builder that's outside of Shopify's,ecosystem, there's a problem with compatibility.,Whereas when you use a Shopify approved,third party app within the Shopify ecosystem, there's a higher chance,that whatever form you build will work in Shopify.,Additionally, when you use an app within,the Shopify ecosystem, you can manage everything within one,shopify dashboard versus having to make amendments outside of shopify.,And for these reasons, it may be much more convenient for most,merchants to simply use a form builder app within the Shopify ecosystem.,So the app that we'll be looking at today,is called the powerful contact form builder app by Global.,Global's form builder app is one,of the most powerful ones that we have in the Shopify app marketplace.,So as you can see here in the demo,,there are so many different types of forms you can build.,For instance, the normal contact form.,And we also have the floating contact form.,And then we have the shopify registration form.,Remember earlier we could only have four fields.,Now you can add a lot more fields to it.,You also have the resume application form.,Well, this would be useful for you if you,want to have people submit their resumes to you for a job application.,As you can see, you can build out a pretty comprehensive forms with a ton,of questions to find out more about your candidates.,And then you can also build a multistep form.,So multi step forms are where a user needs to complete information on one page first,and then only proceed to the next page, et cetera.,You also have newsletter forms like MailChimp, cleavio.,So these are forms which your users can,sign up to get updates about your store or your business from.,Same with clavio.,And then you also have the bulk order form.,This is a form that would be useful if you,are a wholesaler or B to B merchants are selling in bulk.,You can customize your form to include all the information that you need here,on conditional notifications form, you can even let your customers select,what they want to receive notifications about then the conditional logic form.,Conditional logic forms are those forms,that new fields will show up only based on the selection of the previous field.,For example, here we have cat.,What if I select dog?,Okay, so if I select Dog, you'll see that this information will,change hamster, details about your hamster.,Okay? Bird, something like that.,Okay. Of course, you can get a lot more complex.,We can cover that in another video.,How to create these forms than a product question?,You can add a question form to your product page as well.,Okay, so as you can see, there's almost every kind of use case with these forms.,And these are only examples that the global demo is showing.,There are a lot more, of course, and it really depends on how you want to use it.,All right, so let's take a look at the product page again for more details,before we move into the install and setup stage.,Okay, so based on the information here, we can see that there is a fleet free plan,available and it even includes a seven day free trial, all right, for the paid plan.,So let's take a look at the screenshots here.,So we've seen this already.,We can build contact form of PSTAP, registration forms, floating, et cetera.,Okay, so these are just some examples of the type of forms you can build.,And this is a screenshot of the interface inside.,Once we installed, we can take a look at it shortly.,All right, so some other details about okay, so these are about the form,submissions, some survey form, how it looks on mobile.,Okay, so let's move on to the app.,As you can see, unlimited number of forms,,unlimited number of input fields, easy to display, your shortcodes, et cetera.,SEO. All of these we've seen already.,SEO, apply, conditional logic, et cetera.,The most important part, the pricing.,Again, there's a seven day free trial on the premium plan.,So what's the difference here?,So we can see for the free plan.,I've used this phone for many of my client stores, and it's actually pretty good,for most use cases just to stick to the free plan.,So what does it include?,Display form anywhere.,So you can put your form in any page, any place.,As we've seen in the demo, you can even put a form on your product page.,Okay? So there's really no limits to it.,But the limit here is that you can only have one form.,So if you need more than one custom form, then you need to jump on the paid plan.,SEO, you are allowed twelve fields and then you have unlimited submissions,and 40 auto response emails file upload and even conditional logic is included.,SEO, this is a pretty generous plan.,If you have very limited needs, just one form, then this plan is good enough.,The plan I use for most of my clients,who have the need for only, for example, customizing one order form or one product,form, or the basic accounts registration form on their shopify store.,So on the premium plan, now they're saying they're giving a discount.,So it used to be 1490, now it's $999 free, plus SEO, everything here.,Plus instead of having only one form,,you get unlimited forms and then unlimited submissions, unlimited response emails,,and then you have a bigger file load size, storage size.,You even have the cart form and the bulk order form.,Okay, so depends on what you need.,But if you like my clients, most of you might only need the free plan.,All right?,So now that you're clear about the features and how much it costs for you,to use this app, let's now try to install and set up the app.,All right?,So once you're on this product pages, simply click on add app, okay?,Then install the app.,All right?,So once the app is installed, you will be presented with these two options.,Okay, so one is the free and then one is the premium plan, as you've seen before.,So if you want to go for the premium plan, you have a seven days free trial.,If you choose to go for the free plan, it's going to be free forever.,Okay? So just review everything.,Okay?,For this video, I'm going to go with the free plan.,All right, so this is the dashboard that you see once you've installed the app.,On this page, you can see the overview of the form submissions to storage,capacity left, and the email auto responses that you have left.,If you look to your left, you'll find that there are a few options here.,Okay?,So some of them you need to configure, some you can just leave it at default.,So let's take a look at them one by one,before we start looking at the formula itself.,So of course you have the forms.,So this page is where you find all the forms.,If you don't have one yet, of course you need to create one.,Okay, we'll get to it in a bit. Submissions.,So all the submissions that you receive, you see them here.,Okay, so these may come from your customers, potential customers, et cetera.,Settings.,Okay, so you want to see what other things you need.,Most people will want to enable google recapture, so you want to check that out.,Okay.,If you need that, obviously you can set that up.,So it depends if you are using the,forms to set up your newsletters, you can also link it to your MailChimp,cleavio, helps spot and lots of other integrations here.,Okay. And then you have the theme.,All right, so here,you need to make sure that the form is first enabled in your store.,Okay, so we need to do that shortly.,And then you have the contact us page, then the pricing implants.,Okay, so the very first thing you want to do is to enable the app in your theme.,Okay? So here you click on theme setup.,So it really depends on the theme that you're using.,Okay, so this will detect your team,and then give you the instructions on how to do it.,All right. SEO here.,I need to go to my theme and then click on this.,Alright, so let's do that.,Okay. Go to customize.,All right, so you can see just exactly as a screenshot.,You'll find an option here.,Enable it.,Save it.,Okay, let's get out.,All right, so that's done.,So now all we have to do is go back to the form builder.,All right, you can see here from builder.,Has been installed successfully on the team.,Okay, so once you have that notifications, you're good to go.,Now you can build your forms, right?,So go back to forms.,So obviously, we don't have any new forms yet, so let's create one.,So it's pretty simple to set up a form inside this global form builder,,because you can already start off with the templates.,Obviously, if these templates are a little bit too restrictive or doesn't actually,represent what you want to do, you can always start with a blank form.,Okay, SEO, for the purpose of this,tutorial, let's start with an already prebuilt form.,All right, so let's, for example, go for this form, create the form.,As you can see,,if you start with the preview form, obviously it's a lot easier.,So for the fields that are already here,,you can edit them by simply clicking on the items under elements.,So elements are where you can find all the fields that are already on this one.,For example, the first name, I can click on this and then I can edit.,Okay, so for example,,if instead of first name, I don't want to put first name, just put name.,Okay. So the label will change, et cetera.,Okay, so let's say I want to remove an element.,So for example, instance, I only want one name field.,Don't want this name field last name.,I can just remove it.,Remove this element and it will just disappear.,And you can also see that this element takes about 50% of this form space.,You can also change that with the column width.,Okay, SEO.,If now we only have one field for name, we might want to make 100%.,So let's do that and it will expand accordingly.,Okay, so this is how you can edit.,So every single type of element will have different edit options as well.,You can also change if you want this to be a required or not required field.,So that depends on you.,All right, so this regarding the elements that are already here.,But what if you want to add new elements?,What other elements are there?,What are the different types of elements you can add inside a global form builder?,Let's check them out.,You can add text.,Feels like this.,Name, email.,Okay, we have that here.,The name.,We have a different field for name text area.,So text area would be a little bit bigger. Okay.,So you see, this would be an example of text area.,Again, you can adjust this.,Maybe you want to put a message in.,We can make this a required field.,Make it big.,Okay, something like that.,What other elements are there?,You have the URL? URL.,We'll check for if it's a website or something like that.,Phone. Okay, we already have that here as well.,Yeah, here.,Number, password, date, time, file.,Okay, file.,You might want this view if you expect,the user to upload some documents for verification, for example.,Or if it's a product, you might want them to upload their own,graphics, so you can use them in the products that they want to create.,All right, so as you can see, it's pretty versatile in that way.,And then you can also amend the header.,This is mainly to edit this part, create account, complete the form.,You can change this to include any title that you want,,and then here to add any instructions that you may have about this,form or just some more information about the form.,So complete the form to sign up.,Okay,,your account, SEO, anything you want.,Basically, this is quite,a good place for you to put any information that you want.,You can even add links, bold the text,,bold the italics, whatever that you need here.,Or even change this to a header.,It depends on what you want to do here.,So there are a lot of YCW jig options here, all right?,The same goes to the footer here.,You can add some privacy policy,information, for example, or you can add other disclaimers.,This information will be shared with your marketing department, for example.,And then you can even change the button, the text on the button.,Instead of submit, you can say register, for instance.,So what we can see here is that the Global Custom Form,app allows you to create very, very custom forms without touching a line of code.,All right? SEO, once you're happy with how your form,looks and functions, it's time to go to the next step.,Choose the settings.,All right, so here you can say who to mail this form to in case there's a response.,You can change the admin.,So it usually adds the store admin to this,email, but you can change it in case different forms go to different people,in your company, so you can edit the message that they'll get.,Obviously, this will be quite useful for,some individuals who may not be looking out for those submissions.,So you want to make it quite clear. Okay?,So, for example, if it's a,bulk order submission, you want to say bulk order from,,so you can use all of these dynamic information to put it in.,So, for example, we have a new submission,from you can add the customer name here into this section, and it will dynamically,display the form title based on the name of the person who submitted it.,Okay, so it will take this field,,whatever is input in this field, and then put it into the title.,The same goes to the body of the email.,So you can put any of these dynamic fields in, and then it will show up accordingly.,Right?,So this is regarding the email, the appearance, okay?,So you can just stick with whatever is,here, or you can always change it to something else.,So main color.,It seems to be changing the button.,So you can just explore this.,You can use it to style this form to fit whatever theme you're going for.,Okay? SEO heading color can be changed as well.,So right now the default is black.,So you can change it to any color you want, et cetera.,So you can do all of these changes to the form appearance in this page.,Google Recapture as we've seen before,on the integrations page, you need to set that up first,,and then once that's set up, then you can enable it on any form that you choose.,Error message.,So if there's someone filling in invalid information,,what's the message you want to show up for your users?,Okay, so you can stick with this, or if you have something more creative or,useful, more information that you want to share with your potential users,,you can always add them here after submission.,This part will determine what happens after the user clicks this button.,Whether it's a submit button, the register button, whatever it is.,What happens next.,Okay, so what you're going to do are you,going to clear form redirect to page hide form?,Okay, so it depends what you want to do.,What will happen?,Most of the time, sticking with the default is fine.,Clear the form and then show this message,,thanks for getting in touch, blah blah blah.,You can edit this to fit whatever message,you want to show your customers or whoever submits that form.,Okay?,Again, you can also use these dynamic information inside the message.,So for example, if you want to give it a personal touch, you can say,,thanks for getting in touch, comma and then the customer name.,Okay?,Then if the customer submits, then they'll see the name there.,Okay?,And the integration.,So it really depends.,If you have some integrations, you can configure them here,,but for this form, I don't have any, so I'll skip that.,So once you have all the settings ready, then it's time to publish your form.,All right? SEO here.,You can see there are a few options here as well.,So you can also allow this form to be only accessible for users who have logged in.,If not, make sure to leave it unchecked.,All right, so the publication type, there are a few different kinds.,You can embed the code,,you can use a short code, and you can use a popup and a light box.,Okay? So usually the embed code works the best.,So what you need to do is copy this code,to any page that you want to display this on.,Alright?,So to demonstrate, let's say we want to display on a new registration page.,I've created the page here.,So all you have to do is go into the admin,of your shopify store, go to this page, okay?,Click on it to edit, and then what you want to do is to click on this.,All right, so show HTML.,You need to go to the HTML editor and not,the YC one, jig one to enter any embed codes.,Okay, so you want to put it here.,Okay, so if you save, this form will show up on that page.,So let's take a look at the page.,You'll see that the exact form will show up.,Okay, so let's try to do a quick submission.,The rest of the not required,,I will fill it in for the time being, just for this demo.,All right, so as you can see,,this is the message that displays, and as we have,set up before, the form will clear and this information will show up.,Okay, so thanks for getting in touch, et cetera.,So if you want to make it a little bit,more personal, you can always amend this message.,Okay, so now let's go back to the back end to take a look.,Okay, so now let's go back to the app and the submission section.,All right, as you can see,,now the submission shows up, and you can get all the details here, okay?,You can even export this data.,Again, export features are on the advanced plan.,All right?,So if it's useful for you, make sure you use the advanced pay plan.,All right, so that's all for the tutorial today.,I hope that you have enjoyed yourself,,and most importantly, you've learned something new and useful,that you can use to build more features into your shopify store.,Thank you so much for taking the time,to look at this tutorial, and I hope that I'll see you again in my next tutorial.,So if you have enjoyed this video, make sure to give it a thumbs up.,And if you want more content like this, then make sure to subscribe to my channel.,I'll see you again in my next video. Thank you so much.,Bye.

Congratulation! You bave finally finished reading how to add form builder app on shopify website and believe you bave enougb understending how to add form builder app on shopify website

Come on and read the rest of the article!