This SOP outlines the process of building and customizing forms using Ninja Forms on the Tent Apps platform. It covers steps from creating a new form to adding fields, configuring settings, and publishing the form to a webpage.
Hey guys. I'm going to record a quick video on how to build out forms within Ninja Forms. Um, so right now I'm logged into the back end of my website and you're going to go to a tab. It's either going to say Ninja Forms or Online Forms, something along those lines. And then I'm going to go to Dashboard. And once that is loaded, you will probably already have some forms in here. You'll have a Base Smart Form. You'll probably have a Contact Form. Um, and I am going to use this Contact Form. Um, you can also start one from scratch and click Add New right here, but it's the same process. So let me hit the Settings button, and I'm going to duplicate this one. And here we are. So now if I click on the title, it's going to open that form up for me so that I can edit Okay, it already has notes. I also want a phone number in here as well, and I don't want this little message field. So I can hit this, hover over the settings button, and you can see the trash can, and we're going to delete that. Thank that. Bye. Now I want to add the phone number section. So I'm going to hit this plus button down in the bottom corner where it says, add new field, and it has all of these kind of pre-made areas for me. So I'm going to click on this and I'm going to drag it and drop it right here. Oops. Wrong, wrong spot. Let's try that again. Okay, there we go. So in this area, I can see that it has name right here, but it doesn't have it on the bottom. Sorry, I mean it doesn't have phone number. So let me hit this section. You can see it's the placeholder. So let me hit display, placeholder, and we're just going to type in phone. There we go. We're going to hit the check mark, and that is added. Um, that's the main, uh, uh, stuff that I want to add, but I also want to drag this guy up here, just so that we have the name and email side by side, and then I'm going to add some checkboxes. So, let's go to multi-select. I'm going to drag and drop that right here. Actually, I lied. I'm going to delete that. I'm going to drag and drop this checkbox list right here. There you go. That's what I want to Uhm, now, let's update this title. There we go, and I'm going to make this a required field. But it's not showing that title for me, so let me copy this. Nope, that's not it. I believe there are some settings in my display settings, but they're not showing some areas. There we go. So the default label is hidden. I want it to show above the element, So let me go back. There we go. That's what we want to see. Now I can go in and update all of these options. So I'm just going to type in this first one, and then I'll pause while I add the rest. So, joining a group. There you go. So that's how you add an option. And then I need five total, so I'm going to hit this plus button a couple times. There you go. And I'm going to pause the while I add the rest. Okay. Now that I have all of those, I just need to hit that check button. And then I also want to make sure that the title of this form is correct. And I want to make sure that somebody gets an email when the form is submitted. So I'm going to email some actions. Actually, I'm going to advanced. I'm changing this to connect with us. And you can make the form title display on the front end, or you can hide it. And this can be just for your own organizational purposes. That's what I typically do. So I keep this toggle off, then we hit that check button. And then we want to go to emails and actions. We want to go to success message. Just make sure that's right. Here we go. We're done too. Hit right here. There we go. And we're going to paste email. There you go. So that automatically fill in the email that they put in that field. So I'm going to hit the check mark, and I'm going to turn on the email confirmation. I'm going to hit the settings button. And this is just going to go to their email. They can reply to, to this email. I'm going to type in Or, actually, let's try this again. Here we go. And then, this is already added in, but let's say I needed to know how to do it. You just hit this button right here, go to Form, and then you will put in All Fields Table, and it would look like it'll just show that name, and then they filled in their full name, and so on and so forth for the rest of the fields. But that's how you do that. You just click on it, and it auto-adds, but I don't want two of those. And then, the last thing, we want somebody on our team to be emailed when that form is submitted. So, here's the email, that's correct, but let's say I wanted two people to be notified, I would click comma, space, and then I would type in an email. So, I'll type in, for these purposes, there we go, and so it's just comma, space, and then you type in the email that you want notified when somebody sends in a submission. So, let's take this, I'm going to delete that because that doesn't have all the information that I want. I want the all fields table. There we go. Hit the delete check mark. Then we're good. We're going to publish it. And now I want this code. So, I hit the link and I'm going to copy this. And then I'm going to open the webpage where I want to put the form. Okay, now that I have, I'm on the page where I want my form to go, I'm going to enable the visual builder. And then one more. Once that's loaded, I want to replace, whoops, let's try that again, I want to replace this form right here. So I'm going to delete that. Then I'm going to hit the plus button, I'm going to type in code. And then I want to paste that Ninja form in. That's all you need to do, you hit the check mark, and it's going to show just a loading wheel for a bit. And then there you go. That's the form that you need. And once you're done, you hit save and we're going to exit the visual builder, and we are good to go.