Tips & Tricks to Optimize Your Web Forms

Speaker 1 (00:00):
Thanks everyone for joining us today on our webinar on tips and tricks to optimize your web forms. My name is Christina Danka and I am a CSM here at Omeda and I’m joined today by Kelly Brasher, our Webform Productions manager. Today Kelly will be sharing some clever tips and tricks you can use in Omeda’s form builder tool and best practices to help boost conversions and signups. Just a couple of housekeeping items before we get started. As always, this webinar will be recorded and will be available later this week. We only have a short webinar scheduled today, just about 15 minutes. So please place any questions you may have into the question box and your CSM will follow up. Don’t forget, OX6 is right around the corner, May 10th through 12th. Discounted pricing is still available through the 31st of this month, which is Friday, and we are still offering the buy three get one free registration. We’ve got a lot of great things planned this year including new interactive bootcamps that will be on Wednesday. So if you haven’t registered yet, go ahead and check out our website. And with that, I will pass it over to Kelly.

Speaker 2 (01:23):
Thanks, Christina. Okay, I’m gonna take my time here. I see there are still people jumping on, so I’ll just kind of slowly get my screen ready for you.

(01:43):
Okay, so as Christina mentioned, I’m showing some tips and trips tick trips, tips and trick to you today. So I have a couple few things I’m gonna show you related to you actually working in Form Builder. So I’m going to show you some things that will help you work a little more efficiently and streamline things and also have a couple of strategies to help when you’re presenting newsletter options to your users, encouraging them to sign up, just a way to balance brevity with information and encourage them to sign up. So I will get started by showing you now within Form Builder, I have a quick form I put together, nothing really fancy, but you can see it here. And this is the backend. So one thing I wanna start out with is not necessarily a tip, but just kind of a reminder of some of the streamlined functionality that our web development or our development team has put into Form Builder.

(02:41):
And that is the ability to actually edit content here from within Builder without leaving the form. So if I go into Form Elements just as an example or page elements, sorry, I’m going to open up one of these sub menus and then you can see all of the content below is actually going to have a little edit icon if this will stop spinning for me. What I’m going to show you first is at the top, you see I have this block of text, which is a little bit long for my likings, so I actually want to edit that down a little bit. So I’ll find this complex HTML, which is that block at, at the top, and I’m going to just maybe take off a couple of sentences so I can open that from right here within Builder without leaving this UI.

(03:29):
And you’ll see it actually kind of redirects me to manage content in the background. And then I’ll just take off maybe three, let’s take off three sentences, shorten that up a bit, a little more concise. And I save this, this is on three different forms, and so that’s going to affect all of those forms at the same time. So this is a great process for certain types of content like Complex HTML graphics, things that are updated automatically across the board. But you know, if you work in Form Builder, what about something like editing a static? So that is a very common thing to do. So let’s say I want to update this new subscription header. Right now this says new subscription information. Let’s make this a little more concise. Well, I would come here and I would click on edit and I could come here and make this this edit.

(04:22):
There’s nothing wrong with doing it this way, but if you’ve worked in Form Builder, you know what this next step is, right? So we come in here, we make this edit, we, we do want to update five forms, but when I click save, there’s that second step I actually have to say, yes, please update all five of these forms and then it sits here for a few minutes. Or if you close it out, you’re in managed content and you have to navigate back to your form. So let’s not do that. Let’s find a little quicker way. So I’ll cancel this and we’re going to do this a little differently. I’m still going to edit that piece of static, but what I’ll do, and this is taking its time, getting back. There we go. So I’m keeping this window open and you’ll see that I have this open to form builder within Chrome.

(05:08):
Okay? So what I’m doing is I’m dragging over another window. This is also Form Builder, but I have this open to manage content in Firefox. So we, we don’t want to encourage you to open a Form builder or the portal at all twice in one browser, but you’re welcome to do that in two different browsers as long as you’re opening up different content. So if you want to open a form builder to the, the actual form in one browser and then content in another, feel free to do that. The forms team here at Omeda does that all the time and it’s a great way to work more efficiently. So what I’ll do now is I’ll find that static. I’m already navigated here to where this is located, and I’ll open up this new subscription header and I’m going to click on my edit icon and just take off this word to shorten that a little bit.

(06:02):
And I’m going to save this. Now I have these five forms that I do want to update. So I’ll click save. Here’s my second step. I’m not taking up space in my in my builder UI. I am doing this here in managed content. Now I click update forms and now I can just drag this form out of the way or this content out of the way, and I’m back in my form here and I can continue to work without having to get out of this this view here and I can continue to make updates as needed. So that’s one suggestion I would make to you is feel free to work in two browsers again, as long as you’re not opening the same form twice or the same type of content twice, it’s a great way to work. Okay, so the next thing I want to show you is a couple of options that you might want to present to your users when you are offering newsletters.

(06:53):
We have here on this form a couple of different sections for newsletters. Obviously you wouldn’t include both of these on your form but it allows you to see these two strategies in one place. The first one I want to show you is the option to toggle descriptions on and off. This is functionality that is out of the box in Form Builder. So as a user, if I come to this form and I see this list of newsletters, that may be enough for me, but maybe it’s not. Maybe I want to know, you know, what really is involved in this before I commit to signing up. Well, here I can show these descriptions and now I see more about those newsletters, but I didn’t present all that to the user right away and have this form be that much longer. So now as a user, I can come in and say, yes, okay, I do want these, and then I can move on and fill out the rest of the form.

(07:47):
The good news about this is that you do not need to know HTML, CSS or JavaScript to do this. This is a tool we have built into Form Builder and it’s one that a lot of people forget about. So I’ll show you this. If I scroll down, this is my first newsletter section, and then this action item is the key under tools, I have action. And then this opens up to show me this toggle op long description. Now you drag this on and there’s nothing else you have to do with that particular item, okay? That includes all the functionality that you need to make this happen. Now, the newsletter sections all these newsletters. There is some minor adjustments you need to make, but they’re very simple. So I’ll open up the first one and show you what needs to be done.

(08:35):
Now, if you have edited newsletters on a form, you know that this is something you typically open up and make an edit to anyway, because typically it’s going to, or it always will just default to something like this. Just the name of your newsletter in the system, which is not really what you want to present to a user. So you’ll come here and you’ll edit your label and maybe you already have the name of the newsletter with a description, with maybe a hyphen or a colon or something in between. All you have to do is replace that hyphen or colon with the pipe symbol. So the pipe symbol, if you’re not sure what that is on my keyboard, and I think any standard keyboard, it’s the key underneath the backspace. And you hit that with shift. So shift plus the pipe character gives you this and that functionality is what allows that toggle to work.

(09:26):
So you literally come in here, type your newsletter name, pipe character, and your description and you’re done. So I’ll save that and I’ll click done and my first newsletter is ready. So then I’ll repeat that process with the other two. In this case I have newsletter and a couple of deployments. That’s fine. And that is all you have to do to make that happen. So now I have this toggle. These are the, you’ll see this is the newsletter description, or I’m sorry, the newsletter name. This is the description. Now I did add a little bit of CSS to indent these descriptions. If you do have the resources to write CSS you’ll see that there’s a class applied when you do use this functionality so that you can identify this description and write some styles around that, but it is not necessary at all.

(10:21):
So don’t feel like you have to know any kind of CSS to do this. So the next option I want to show you is the second one where you’re able to opt in a user to multiple newsletters or deployments with only one checkbox. So this is something that, you know, you wouldn’t wanna do with a dozen newsletters, but if you have three like this, instead of offering them you know, those individually, if you’re able to write a general description that kind of collects those, that content together in one and allow them to opt in with one box, that makes it a lot easier. So that’s what I’ve done here. I have one box when I check that, obviously you can’t see it behind, behind the scenes, the user is being opted into all three of these newsletters. So in order to do that, you’ll see here on the form I have just three elements on the page.

(11:14):
Now, if you have set this up before even guided by someone within Omeda, we may have suggested setting up a separate question that says, would you like to subscribe to this type of content? And then we conditionally display or activate these other newsletters. You don’t even have to do that. What I’ve done here is I’m just using the first newsletter to be that trigger. So I opened this up and I’ll show you what I’ve done here. This is just a newsletter, but I have replaced the web label instead of a description of the newsletter. I just have that phrase that describes what this, this collection of content is about. And that’s my description and I can close that out. I have that set the checkbox and that’s all I need to do with the first element. Now the next two elements we have set up so that they’re going to write an opt-in to the user in the background.

(12:10):
So in order to do that, we open this up, we’re going to set the control template too hidden because we don’t want to show it to the user. And then on the form options tab, we’re setting the default value to Yes, okay, so that’s going to automatically check that for them. Now we’re going to do that for any that we are triggering by that first element. And then let me scroll down here. And then obviously we don’t want them to do that. For every submission, we only want that to be triggered when the first newsletter is selected. So that’s where this conditional display comes in. Now, if you’ve ever talked to me before about conditional display, you know, I like to refer to this as conditional activation because we’re not actually displaying this on the form. The user’s never going to see these, but we’re activating them behind the scenes.

(13:01):
So you’ll see here, if I click here, I have an expression applied. I wrote an expression that simply said, if this newsletter is not blank, then this expression is true. And these two, this will be activated where this expression is applied. So you’ll create that expression based on the newsletter and then apply that to any of those newsletters or deployments that you want to automatically opt in based on that response from the first newsletter. Now I’m gonna show you another quick tip while we’re here. This is something that kind of was quietly rolled out and you may not know about it yet. If you have multiple elements in a row that need to have the same expression applied, you can shift or you can click on the first one, then shift, click on the last one, hold, shift down and click on your control button or your conditional display button.

(13:52):
And then you can actually apply the same expression to all of those at once. So I’m gonna actually remove the expression from these by using select one and click done. And you’ll see that when the page refreshes, then both of those will have no expression applied. I can scroll down here and then I’ll just reapply that same expression that I had before by holding down shift and selecting that expression. So another little efficiency tip for you for just two elements. It’s not a huge time saver, but if you’re doing five or six or more, then it definitely will save some time. So the second option here, just to kind of recap, is having one checkbox that the user can can opt in to multiples that are actually behind the scenes and activated based on this one one opt-in right here. So that is what I have to show you today. I hope that you can these tips and tricks. And as Christina said, we’re not taking live q and a here since this is just a quick 15 minute webinar, but feel free to post your questions and we will answer them after the fact and I’ll pass it back to Christina.

Speaker 1 (15:08):
Thanks Kelly for taking the time to put that together. We hope you all found that useful. And so as I mentioned earlier, the recording will be available later this week. And as Kelly just mentioned, we will follow up on your questions and please feel free to reach out to your CSM with any additional questions. So this concludes our webinar for today, and we hope to see you all at OX6 in May. Thank you.