Academy: Create conversion sites

Hello, I’m Jakob from Greyd and today I’m going to take a look together with you at conversions. We’re gonna take a look at how to build a beautiful looking really well converting form. Now we’re gonna include that with a pop-up on your page. We’re gonna take a look at stats, how to send those forms to different interfaces like MailChimp for example. And last but not least we’re gonna take a look at how you can customize your website based on your user so you can display different elements for different users based on the data you actually know about them. So let’s dive right in.

In the last video I explained to you how you build a site like this. We built this site entirely with patterns and everything that was already there in just a couple of minutes. Now we’re gonna take a look at building a form, included into the website with a pop-up. For that I already prepared a form in here. We have these nice little image tiles over here where the user of my website can actually select what they want. Imagine you are an agency for example, and you have different types of offers based on what your client needs. I want to make sure I get all the information I need and I want to make sure to get it in a visual way. So I use my image tiles for these.

You can see image panels here. Image panels are a really good way to have an intuitive way of selecting options instead of having a drop-down for example. A drop-down needs an extra click for the user because they have to click on the drop-down, then the drop-down opens up, and then click on the option. Also not all the options are visible from the get-go. So we use image tiles for this. As you can see, we have a multi-step container in here set up to have a form that actually has a progress indicator down here. You can see that in the back-end preview as well. The progress indicator nicely gives our user a sense of progress, motivating them to finish the form.

Now I want to include a third option: a third image panel to include the runtime of the project that my client probably wants to have. Last but not least, I want to get the data that my client provides for me. So let’s just do that. First, I add a new step. There we go. We have this last step in here. Let’s copy those blocks from before, paste them into the paragraph, and now we have the same options here. I can remove the next button. Instead of asking for budget, I want to know the deadline. I rename this form field to “deadline”. Let’s make the first option “ASAP”. The second option is “two to six weeks” and the third option “six plus weeks”.

Now I select different icons. For the first icon, a little clock. For the second, a calendar type with a checkmark. For the last, another calendar. I make sure the options and values are correct. The fallback is always the label anyway. Now we have the values, the field named properly, and this step set up. Next, I need another step to collect user data. First an input field for first name. I name it “first name”, set autofill to first name, and make it required. Then I duplicate it for “last name”, rename the field properly. Afterwards, I include an email input field, type set to email, autofill email, and label it. I add placeholders like “Jane Doe” or “”.

Now I replace the next button with a submit button. I make it 100% wide and label it “Submit”. This looks fine for now. I update the form and check the steps: What do you need? How big is your company? How much is your budget? When is your deadline? Finally, the contact information. By collecting the contact information last, the user already feels progress and is more likely to finish the form. This increases conversions.

Now we need to include the form on our website. I go to pop-ups and create a new one. I select the slide-in preset. After it loads, I remove all default content, add a headline “Request an offer today”, and select the form we just created. The preview looks slightly different because it’s optimized for the website, but that’s fine. I style the pop-up layout: position bottom right, adjust padding, background white, and enable page overlay. I skip the blur effect for performance reasons but increase the overlay opacity. I add a smooth animation.

Now I configure triggers. We can trigger on page load, with delay, on scroll, on inactivity, on exit intent, or by button click. I choose on scroll (50%). Rules can also restrict display, e.g. only after visiting three pages, based on URL parameters (useful for campaigns), referrer, user groups, time, device, or browser. Extended options allow setting hashtags for tracking. For now, I publish the pop-up.

On the website, scrolling down triggers the pop-up at 50%. Steps automatically advance when an option is selected because in the multi-step container I enabled “go to next step automatically”. This fails if data is invalid, in which case a small warning pop-up appears. I test submission, adjust margins for layout, and update the form. The submit button looks better now. Filling different test data shows the form works, and submission is successful.

By default, form submission creates an entry and sends an email to the admin. But you can customize it: send emails to admin, send confirmation or double opt-in emails to users, and trigger admin emails only after double opt-in confirmation. Dynamic data can be used in emails. Data can also be sent to interfaces like MailChimp. For example, I map first name, last name, and email to MailChimp fields. On submission, data is transferred successfully and appears in MailChimp. Many other interfaces are available and can be activated in settings.

Forms also have statistics: you can see interactions, submitted forms, and per-field stats. Selecting our “get offer” form shows interactions and key figures for the last seven days.

Finally, I show how to display different content based on conditions. For example, I duplicate a cover block: one as default, the other for a campaign. Using “Conditional Content”, I set one to display if UTM campaign equals “test”, and the other if it does not. For the campaign version, I change the offer to “30% off” and style the button differently. Testing with ?utm_campaign=test in the URL shows the campaign version correctly. This way you can customize your website dynamically for campaigns, user groups, devices, and more.

I hope you learned something new and found it interesting. See you in the next one. For more videos and information, please visit our Helpcenter.