DAY 02 | EPISODE 04 | QUICK CLIP 02

FORMS TOUR

Paul Davenport

  Paul Davenport  |    04:03

Take a tour around the Fours area. It's important to understand, before Day 3, that your Forms can be styled on both Light and Dark Backgrounds.

   AI Website Transcript 

"So, here I am in the forms area and as you well know by now that you can get to the forms via the main menu and click forms. Well, here is a list of a whole bunch of forms that are pre-made for you as part of your Theme. So, we're going to have a look at some of these forms, but specifically immediately I'm going to be looking at the event form and the event light. I've got two variants of this form. So, to explain what's going on here, in the tabs at the top I've got a form here set up, which you can see my form is on a dark Colour background. And in the Editor we can see my form that's here. And if I click on the form, you can see the whole list of forms that appear. So, as we create and manage forms in the forms area, they appear in the dynamic list of forms in the Editor.

So, I'll just describe what's going on there. What I'll do is close this down. I'm just going to pop this into Design Mode so you can see. The form's actually living in this frame here, right? So, I'll just delete this and what I'm going to do is add a new form. So, you add a new form to a page using the components and I will embed now a new form. Now this particular form, I've made two variants of this form. I've made an event and an event light. So, event light has light Colour fields, an event has dark Colour fields. So, let's just have a look at this event light. I will save this now and we'll jump across to our tab. You can see that we have the light fields on top of this, but what I'll do is jump back in to the Editor.

I'm going to change this to my event form with the darker fields. So, what I mean by this, I'm just going to press save and I'll jump back into the tab and hit refresh. Let's scroll down. You can see that these have got dark fields. So, when we're creating forms, I like to create two versions for my content team because I don't know where they're going to place this form. Are they're going to place it on a dark background or are they going to place it on a light background? So, if it was the light background, let me just show you this. I'll come into here and I'll take out our gradient. I'll just pop in our neutral. I'll actually just change the text Colours in here as well. Let's just make sure that we can see this as I save this so we can see on the front end. So, I'll just save. Let's come back in here and hit refresh.

And now you can see our form on a light background. So, here we've got the form that's called event, and previously we were looking at the form with a light fields called event light. So, let's have a look at this. We've got event and event light, so keep that in mind. So, now we're going to do two things. We're going to go and edit this form that we've got here, and edit means we customize all of the fields that go within the form. And then the second thing we'll do then is go and look at the settings tab. Now the settings is where we control all of the stylings, like light and dark that we looked at there, but also as we mentioned in the introduction, where we go to set up the interaction that happens after a form is completed.

So, that is the landing page that they go to when they've completed a form, the email they get when they've completed a form, and whether you want to get notified yourself via an email and also whether you want to turn the person that submitted that form into one of your members."

More Quick Clips