Podcast

Freeform 5 is a complete redesign from the ground up. It's practically a brand new plugin. In this podcast episode we talk about all the great new capabilities and improvements you will find in our flagship product.

Full Transcript

[Music] Welcome to the Solspace Podcast. Thanks for listening.

Mitchell: Hi everybody, welcome back to the Solspace Podcast. This episode and the next one we're going to be talking about Freeform 5. So Freeform is our, basically our flagship plug in for the craft CMS marketplace. And Freeform handles the creation of and management of forms on a craft website. And it's, you know, it's reasonably popular in the marketplace. It's kind of up there in the, in the plug in store, in the craft plug in store. And so on the podcast today, I have Kelsey and Gustavs from the software team at Solspace to talk about Freeform 5.

It's gonna be coming out hopefully in January, it looks like. Finishing up some QA work on that and there'll be a brand new Freeform a left of dot release. So I'm pretty excited. I'm not faking it. I'm not saying I'm excited for sales reasons or anything, I actually am. Like these guys have done some of their best work in their career on this product.

So we're going to get into it. Kelsey, Gustavs, welcome to the podcast. Not your first time here, so thanks for coming back. So the first question I want to ask about Freeform 5 is the obvious stuff. Like what's different between Freeform 4 and Freeform 5? What are the major things that have changed?

Gustavs: So first of all, we took care of all of the pain points that we had previously in Freeform 4 and before. And so we pretty much refactored everything. And the first and most important thing we did was refactoring how you add fields to forms. Before, we had global fields which were shared across all forms but that prevented you from rapidly creating new forms. So now, instead of having people create each field separately, they can now just throw in fields in forms based on their field types. So we have field types for like text fields, dropdowns, checkboxes, and et cetera, and you can add them to forms indefinitely. And you don't have to create any fields before. So you just decide what kind of fields you want, you throw them in, and start editing those fields. And then when you click save, it creates all the columns in the databases and everything. So it allows for quicker and easier form creation, but if somebody did like creating fields beforehand, we retained that functionality in the form of storing favorite fields, so you can, you add a field, you edit it, you, and you like that field and you want to use it in all of your other forms, you can store it as a favorite, and then it's going to be there with all of the configuration that you had at that moment, and you can reuse it in all of your forms.

Mitchell: Kelsey, what are the numbers on average, how many forms a craft website has using Freeform? Like, this, this matters if there's a lot of forms, right? Obviously. Or if there's a lot of forms that are going to be created. But if there's just a couple, cool, the favorites functionality is swell, but it's not that needed.

Is, is it common for people to have a lot of forms in a Freeform install?

Kelsey: I think that there's a wide range of use cases here. I think I've seen people that have one form, I've seen people that have a few, and I've seen people that have hundreds. So definitely as you get more forms, the original way in Freeform 4 of having the global fields would get pretty messy.

This way, as Gustavs mentioned, it's going to be a lot cleaner because you can just keep the common fields as favorites. Something else you can do is search across your other forms directly in the builder for existing fields that you might want to reuse as well without having to save them as a favorite.

Mitchell: I remember years ago, you and I, Kelsey, arguing about whether we should have a form builder. It wasn't part of Freeform in the beginning. And by beginning, I mean back in the ExpressionEngine days. But this is the bulk of the work that you guys spend time on with, with Freeform. This idea that a developer, who's perfectly capable of building a form in Twig templates or HTML, they choose to do it inside Freeform's form builder.

Do you have any insight as to why? Like, why are developers who are capable of doing it, why are they just moving into this drag and drop interface?

Kelsey: I think at the end of the day, it just comes down to convenience. I think a lot of developers might have a lot more complicated things to address and why reinvent the wheel every website when you can just install a plugin and, and let it do the thinking for you. So yeah, we try to include as much convenience features as possible without getting in the way. And yeah, I think it just really comes down to developers not wanting to waste their precious time on something that can already be addressed by Freeform.

Gustavs: I wanted to mention that it's also easy for non-developers to make slight adjustments to forms. Or adding a single field, like if a marketing team wants to have one more field, they don't have to wait on the development team when they have time to do it and so on. It really helps everybody do whatever they want.

Mitchell: Yeah, right. This is a consistent request we saw over the years on the client side of the company. You know, clients are accustomed to being able to update their own content, but touching the form was not something they could normally do. They can with a tool like this. So if they've been given permissions on the site, they can come in and just do exactly what you just said, G.

They can add a field, move a field around, that sort of thing. And that's, they like that convenience. That kind of power user capability is good. So you're going through some, some changes between Freeform 4 and 5 and the, the field handling was one. What's, what, what are some other things?

Gustavs: The user interface, that's the biggest overhaul we did. It's completely redesigned from the ground up. In Freeform 4, the user interface was written in the early React days. We used class components there and the code got very clunky, very fast. And as we gained more experience with React, and with the newest versions of React, completely changing the way React code was written, we couldn't really use the latest and greatest that React had to offer.

So by completely rewriting it, we now have more tools at our disposal to write better React code. And so the user interface also got way better because of that. Also, we learned from our past mistakes and could right them in this version. The new interface is, is way easier to use. It requires you to do less clicking. Everything's at your disposal. We optimize the usage of the space more. So now you have way more space to, to see the data that you're entering. Because previously when we first designed Freeform, we didn't have really any tools for managing like table data and so on.

So later when we added that, we had the constraints of small spaces. But now in Freeform 5, you get easily navigatable pop ups. You don't have to lift your hands from your keyboard when you write sets of data. And all the settings are, are distributed in their own whole views, like for instance, the rules editing previously it was in this little property builders side navigation panel, which was really small.

So it was really hard to have a good overview of what you were doing, but in Freeform 5, you have a separate tab, which opens the whole page for editing rules. And we have some very cool convenience things like a mini map of your whole form. So you see when you're editing some few, some rules for a specific field, you can see which other fields it's affecting. And there's lots and lots of convenience in this new form builder. Maybe Kelsey has some points on this.

Kelsey: Yeah, I mean, I think a lot of it was sort of, Gustavs mentioned, a lot of it Freeform was first designed many years ago, and as we added features to it it was just getting harder to work them in and have it be a nice fluid experience. And we basically were able to reorganize everything.

So taking a full look at what we had for settings and options. And we were able to just rebuild it and, and reorganize things into tabs and different setting areas and categories. And I think it's just a lot more seamless and it's more intuitive, I think, too. It's familiar, but it's intuitive as well. And I think that a lot of customers will really appreciate how organized and clean it is.

Mitchell: Yeah, I went, when I went into test, I found the same thing found it just kind of, it was much more intuitive. I think you guys adopted some UX standards that are more widely known now. And there's, there's a lot of consistency in the interface now, which is it wasn't bad before, but it's just, there's just a sense of more polish now. And it's also, I think the, the new React code base, it just moves really smoothly. You know, like the, the browser being able to create the interactions and everything. It's, it's really nice and smooth now.

We come into another question. So the use of React here you were using React in Freeform 4, and you were saying it kind of, the approach you took, the old version older version of React that you were using, it kind of got clunky. Is there some reason why you continue to standardize the user interface in Freeform on React as opposed to Vue or some other JavaScript library?

Like, why React and what about it, what's changed that's made it even more compelling to use?

Gustavs: Personally it comes down to my personal preference, because I like React the most but it's also the most popular library. So even if I didn't like it it would still make sense to use it, because if, for instance, if you were to grow our development team, we would be able to hire developers more easily because it's more widespread.

So also technically speaking, React is more JavaScript-based. So you write JavaScript and then from the JavaScript, you generate the HTML, whereas view, for instance kind of has the HTML first ideology. So you create the HTML and you write in all the loops and everything inside the HTML, which will then generate the components. And I find React to be way more flexible in terms of when you want to write business logic, but I'm sure there are people who like Vue better. So this is just personal preference.

Mitchell: Yeah. I don't get that as close to the code as you do, so I didn't, I didn't know that detail. So one of the things that one of our other developers was talking to me about when he was sort of explaining Freeform 5 and why he was excited about a particular aspect of it was he was working on helping you guys with the interface and some of the backend capabilities and so forth.

And he was telling me that the new architecture has everything about a component, that's going to turn into a React component is declared at the PHP level. So you just have this way of declaring the, the attributes and information about a given part of the page at the PHP level.

And then your React code, like, consumes that and turns that into an interactive piece. First of all, is that an accurate representation of what you've done? Like, have you abstracted it out that way, and, and why, why would you have done that, G?

Gustavs: Yeah, it's it's pretty spot on. So the biggest issue in Freeform 4 and before, it was adding new properties to like, for instance, field types when you want to add a single property and a control for it in the builder for let's say a checkbox field. I would have to edit the PHP files, the PHP service files, several other validation files.

Then I would have to open the builder part, go in there, add the control there, add the validations there. So it took me a lot of time and sweat to do small changes like that. It also prevented people from writing their own extensions of Freeform field types and integrations and stuff because they couldn't really access the builder part because that's locked in. We have to compile files, so we can't, we weren't able to allow people to extend Freeform that way. But for Freeform 5 since it's requirement is Craft 4 point, I don't remember which one which has a requirement of PHP 8.0, which added the attribute functionality. I decided to use those PHP attributes to let the developer describe each of the properties of the field or the integration or whatever, in a way that will generate controls for it in React. And we have those attributes for each field type. So you can generate a number of field text input, a dropdown, a dynamic dropdown, which will look up the values outside. You can interlink different properties that way. And you can write validations. You can also change the visibility of the property based on other properties. So for instance, if you want one property to be shown only if you, if another property has some, some certain value or not, you can do that easily with these attributes. This way I wrote an example in the documentation about how you can, for instance, create a google maps field in form, and it was extremely easy to add a new field type to Freeform, which has the correct properties and immediately renders the preview in the layout as well. Now instead of me writing the preview manually, we are using EJS templates, so you can write your own template, which is very similar to a Twig template, except it's for JavaScript.

And it will automatically render it with the properties that the client is defining in the builder, like filling out. So it's gonna have a live preview. So all of this lets us easily manage our code base because now there's a single point of truth. We don't have to search in 50 fields to see if we missed a spot. Everything's in one place, and it's easy for the developer to see the description of each property. It also describes code and so in general, that's just a really, really nice way to write code.

Mitchell: I'm noticing in the, in the web development industry that there's, you know, every, every day that goes by, there's more and more specialization by necessity. So it's, it's a lot more likely nowadays that you would find someone who is just a React developer and you'd say, “Can you do some PHP?” “Kinda, not really. I mean, I've dabbled a little bit, but yeah, I'm hardcore React and, and that's what I do all day, every day.” Because there's demand, you know, for that level of specialization, and this architecture you're describing kind of taps into that. It allows that, it basically gives permission to the developers who might augment and extend Freeform.

Says it's alright, you know, it's okay that you're only PHP, it's okay that you're only React, like we get it. So that's a, that's a nice response to how the market's evolved over time.

Gustavs: Yeah. Separates the concerns.

Mitchell: Yeah, separates the concerns, exactly. Kelsey, do you have any insight as to how often a developer will create their own field types for a specific client engagement client website on Freeform? Is there any visibility to that? That'd probably be kind of hard to track down.

Kelsey: No, it would be, it's not something that we could track down. And As Gustavs mentioned, it wasn't currently possible until Freeform 5. So yeah, we expect that people will begin to use that because it's, from what I understand, it's relatively easy to add new field types in Freeform 5, but certainly wasn't possible before this.

Mitchell: Yeah. Well this makes me come to the next question, which is asking about how Freeform 5 matches up with Formie. I mention Formie because it's our primary competitor. Like if you just look at the, at the craft plugin marketplace, you'll see that Freeform and Formie are kind of right up there together with serving this particular market.

There's other form plugins, but it's these two. With respect to Formie, I'll ask questions about, broadly about how we compete and how we're different with Freeform 5, but on this particular question as a segue how how much can you augment, how much can you extend Formie versus Freeform 5 now?

Like, how do they compare on this point?

Kelsey: It's, I mean, from looking at it, it seems like there is a lot of ability to extend it. Formie that is, but I believe that Freeform 5 has especially with allowing custom field types now I believe that it's shored up any of those differences, and, yeah, that's about all I can say to that. I don't know, we haven't had much experience developing with Formie or anything.

Mitchell: On this topic of Formie versus Freeform 5, is there anything else you can say about the differences? Like where, where else do they where else do they match up and where else do they diverge?

Kelsey: Well Free, it seems that Free, Formie was made with the intention of solving several issues that previous versions of Freeform had and they did a good job of it. However, in the past couple of years we have tried to shore up those differences as well and there's only so much we could do without rewriting Freeform, and now that we have rewrote Freeform it's a huge refactoring that addresses all of the pain points. So, in terms of that I think any advantage, user friendly advantages that Formie had, those are those are all answered and exceeded in, in, I would say, in many cases. I would say that it probably takes around 75 percent less clicks and mouse movement to build forms in Freeform 5 compared to Formie.

There's a lot of modals and tabs and all that in Formie and our form building experience is very seamless and intuitive. And certainly saves you some mileage on your mouse. And then, of course, allowing your form building to be a lot faster. We also have a new express edition for Freeform 5. That'll be a free edition and includes 1 form. You can always upgrade to the lite or pro edition at any point if you need access to more forms and features. So that's another advantage that we have.

Mitchell: Oh, I didn't know about this. I like it. I'm always trying to get you guys to do something for free because it's such a good lead gen. Like it's such a good opportunity for anybody to come in and try out a product and start to engage in it. The freemium model’s, of course, a done deal now. It's just such a win.

So that's sweet. I'm glad to hear that. So how else, how else are we different, Kelsey? Or does that pretty much sum it up there?

Kelsey: I mean, I think a lot of features and approaches can be done with both Formie and Freeform. I guess I'd be a bit biased to say that I think that many of our ways are superior. But another advantage we have is the new Stripe integration. We have implemented the new Stripe payment element, and that basically allows over 40 different payment options. So it includes Apple Pay, Google Pay, PayPal within Europe, bank payments, deferred payments. It's a whole lot more powerful than what we had in Freeform 4. And it's a whole lot more powerful than what Formie currently has.

Mitchell: Well, why don't we wrap there, uh, we can wrap up our discussion of the new features available in Freeform 5. And in about two weeks time, let's have another episode, where we'll get into the new payments capabilities of Freeform 5. How's that sound?

Kelsey: Okay, sounds good.

[Music] You’ve been listening to the Solspace podcast.