Landing Pages & Forms

Video by the ConvertKit Team

Completed

Oops! Something went wrong while submitting the form.

This video is going to be all about the form builder with convert kit, you have the option to create both forms and landing pages to share with your audience so they can sign up to your email list. You can click on the landing pages and forms link at the top of the page to view yours as well as to create new ones.
When looking at this page forms are denoted by this icon, they're intended to be added to an existing page on your website, such as in the sidebar or the bottom of a blog post. Landing pages on the other hand are denoted by this icon and they are standalone pages on their own that are intended to replace an entire page on your site.
They include a up form on them, as well as placeholders for you to add additional information and imagery about your opt-in. You can also change how your forms and landing pages are sorted, as well as view them in a list format instead of a grid. If you prefer. As far as the actual builder goes and how you customize the appearance of your forms and landing pages.
It's essentially the same process for both. There are a couple of differences, which I'll go over later in this video, but just know that the steps are pretty much the same, regardless of whether you're working on a form or landing page to get started, find the create new button. If your account is brand new, this page will look a lot emptier than the one on screen right now, but there will still be an option to create a new form.
Next is where you select, whether you're creating a form or a landing page, I'm going to select form. And now I get to choose the display format of this forum. In line is for a form that gets embedded within the pages content such as in the sidebar footer or at the bottom of a blog post. So the form itself actually sits within the pages.
Content modal is another word for pop-up. So this type of form will show up over top of your site's content. Modals can be triggered by a link, click, scroll percentage, exit intent, or a certain amount of time spent on the page. Slide in is similar to modal in that it will show up over top of your site's content, but instead of popping up, it will slide in from the side of the page.
Finally a sticky bar is a thin bar that sits at the very top of your website for this demonstration. I'm going to select inline. Now we get to pick the template for this form. These are the available form templates at the time that I'm recording this video, but we're always working on adding more options here for forms.
You do have the option to change the template and display format after it's created. However, just note that if you're making a landing page, you won't be able to change the template after it's been selected. I'm going to go ahead and select this one. Once our forms, display format and template have been selected.
We end up here on the form builder. This is where the true customization happens. And although we tend to refer to this page as the form builder or form editor for convenience sake, it again, looks and functions pretty much the same for landing pages. The first thing I'm going to do is give this form a name.
I'm going to set this form up as if it's an opt-in for a Vancouver travel guide. Next I'm going to switch out this image for something that's a little more Vancouver themed. To do. So I'm just going to click the replace button in the background section of the right sidebar. You can of course upload an image from your own computer or select from one of your recently uploaded images, but I'm going to use our Unsplash integration, which is one of the coolest features of our form builder.
I can search through Unsplash splashes collection of beautiful stock images and choose one to add to my form, right from here within ConvertKit. From the general style section of the right sidebar, you can also change the forms, template, background, color, and border radius, as well as add any custom CSS.
The options available on the general styles tab will vary a bit between form and landing page templates, depending on how they're designed at this point. I'll go ahead and save my changes so far using the save button at the top right of the page. My next step is going to be updating the copy on the form.
Once you click on any of the editable form fields, the sidebar will automatically populate with any formatting options available for your selection. For example, if I click on this header here, I can now type directly into this field. And then from the sidebar, I can change the font, color, size, and weight, and you can get back to the general style section at any time, just by clicking it from the top of the sidebar.
You can even modify the form fields themselves, again, just click on it. And then from the sidebar, you can adjust the placeholder text as well as its visual styles. You can also add additional form fields, such as for collecting first names or other custom fields. And we have a separate tutorial all about that in our knowledge base, the same also goes for this button, click directly on it, modify its text and then update its visual cells from the sidebar.
If you're on a page convert kit plan, you also have the option to hide the built with convert kit, badge by clicking directly on it, and then unchecking this box. As you can see, it gets faded out on the preview, but on the final version of your form, it won't be visible at all. Once you're happy with how your form is looking.
It's time to get it on your website. Click on the embedded link from the top of the page. And from here you have a few options. The first is our JavaScript embed, which is our recommended method. The benefit of this method is that any changes you make to your form and convert kit will be automatically reflected on your site without you having to recopy and paste over the code.
We also offer the raw HTML code for this method. If you make any changes to the form in convert kit, you will have to re copy and paste the code over to your site. But if you're somebody who is comfortable working with code, having the raw HTML available can be handy. If you want to make any code adjustments on your own.
We also have the share link, which is a URL that will lead to this form on a page of its own. This option works best for inline forms. Next we have the press shortcode, which can be used if you're using the ConvertKit plugin on your WordPress site. And finally, if you're using our integration with Unbounce here is where you'll find the URL that you need for your web hook settings.
Again, we recommend using our JavaScript option first, unless there's a reason for you to use one of the others, you can easily copy the code using this copy link here. Before we move on. I also wanted to go over the options available underneath these three dots. First, you can archive your form, which will not remove it from your site or make it an active, it'll just hide it from the forms page in your convert kit account.
This can be useful if you have a lot of forms and that page is starting to get cluttered. You can also delete your form or make a duplicate of it, duplicating your form, make a copy of it. That looks the same and has all of the same settings, but it won't bring over any of its subscribers. This can be handy if you want to use one of your existing forms as a sort of base template that you can modify instead of starting from scratch with one of our templates.
I'm going to save all of my changes once more. And then I'm going to go back to the forms page again and make a new one. But this time I'm going to select landing page instead of form, just to show you the similarities and differences in the process builder. So you can see right away that the landing page preview itself fills up more of the builder, which makes sense, because it is an entire page on it it's own.
However, the process is pretty similar. You can give it a name, click on the different fields and placeholders to modify them. And upload images or use one of our integrations. And again, options available in this general styles tab will vary based on the template you chose. You'll also notice some different options available for landing pages, like the ability to choose custom fonts.
And don't forget that most editable areas can be clicked on to reveal additional formatting options in the sidebar. We also have an integration with hero patterns, which allows you to use customized seamless patterns as your background imagery. If there are any placeholders in your lending page template that you don't want to use, you can just leave them blank and they won't show up in your final design.
What is probably the main difference between forms and landing pages is the sharing options available for landing pages. Instead of embed codes, we have this share option which will provide the URL that will take visitors directly to this page. If you use our WordPress plugin, you can easily select a landing page to replace a page on your site.
And in that case, it would use your site's domain rather than the URL we provide here. That being said, you can still use your custom domain for your landing page links. Even if you don't use WordPress, you just have to add some values to your domains, DNS settings. That's a bit more of an advanced topic that I won't cover in this video, but we do have a separate tutorial on that in our knowledge base.
What I will mention here though, is that the prefix of this dot C K dot paged domain can be modified without the need to change any of your domains. DNS settings. You can customize this from your account settings in convert kit. And similarly, you can customize this last part of the link from the domain name, section of the settings menu.
That about covers the basics of the form builder in terms of how to create and customize the appearance of your forms and landing pages. In the next video, we're going to dig into some of the more advanced settings available and how you can customize them for your opt-ins.