Brizy WordPress 101

Lesson 23

Contact Forms & Integrations

In this lesson, we’re going to take a look at how to get started, working with forms in Brizy and Brizy Pro, and talk about some of the differences between the free version and the Pro version. So I’ve created my contact form page and now I’m ready to drop in the form element, let’s scroll down to where I want to insert this. Let’s click the plus and the search for the form, we’ll position that inside our section – and you can see that now inserts a basic placeholder form now, even if you’re, using Brizy Pro, you still have full access to the form element. There are some limitations in what you can do, though, and I’ll take a look at those in a moment. So, let’s take a look at what we have currently.

We’ve got three different field elements, an email field, a select field. We can choose from a range of options and we also have a paragraph or a text area field. Now you can format these customise them loads, different things and add extra fields in to your heart’s content. So let’s do that. We need to change this email one and let’s set this to be a name field, we’ll change the type.

Currently. This is set to email, we’ll just simply select and choose text from there. Now you see inside this pop-out, we have three different sections. We can work with each one gives us a range of different options to configure how we want this form element to work and look. First of all, we’ve got the field.

This is where we can choose the type and, as you can see, we have a range of different options available inside you to suit pretty much every need you should have. We’ve also got the option to set this as a required field. Now things like name and email are things: you’d want to set to be required, other fields may be optional, and then you can just simply disable this option. You can also adjust the spacing, and the nice thing with this is even though you’re editing this on one particular field. It makes the changes globally inside your form, so you don’t have to keep on doing this on.

Every single form element makes it so much quicker and easier. Next up, we’ve got the advanced option, and this is where we can choose to display labels and again. This is something that will show globally inside your form. So if we enable the label field, you can see, all of our form elements show the label for our example, though, let’s turn that off, we’ve also got the option for placeholder, and this is a nice clean, simple way of inserting some kind of placeholder text inside The form field element again, if we disable that we take that out globally across the entire form. Let’s just enable that again now, if you want to make changes to any of these, all you need to do is simply click inside the field and make whatever changes.

You want we’ll come back to that in a moment. Let’s go back to open our field up and let’s take a look at the last option, which is the background here. We can do a couple of different things. We can change the size globally of our actual form, elements between small, medium and large, we’ll set these back to medium. If you want to, you can also apply a corner to make them more rounded, pretty cool.

Let’s set that back to zero, though now Brizy also gives us options to control, typography background, colors and so on, but we’ve kind of already seen these in other lessons, I’m not going to bore you by going over those again. What we are going to do, though, is duplicate this first field. We select that option, and now we have a second field called name dash, one. Let’s select that and let’s change that this time to a email, type field required and everything else is perfectly fine. We’ll leave those as they are and we’ll simply come in and we’ll change the name of this to email, pretty cool, really easy.

Next up, we’ve got the select field and again this works in exactly the same way. We can select it. We can make any changes. We want to this. We can also go in and change the actual content of each of our select options.

So let’s just set this first one to be buyer and the second one to be renting. So now, we’ve created a select field with two different options. Inside there, let’s close that down and let’s configure our final field at the moment, paragraph doesn’t make a lot of sense, so we’re going to click inside there and we’re going to change the option and we’re simply going to drop in a message that makes a little bit more sense, now the final step for our form is to connect the button up and make everything just work to do that. We’re going to select the button, and now we have more options. We can go ahead and do things like change, styling, typography alignment and so on all those kinds of things we’re used to, but the final option that we want is this little plug icon, and this is where we can choose what happens and how the form works.

This is a pretty cool section, even if you’re working with the free version of Brizy, you still have the WordPress option to send your emails by the normal WordPress sending method. So you still have that available to you, no matter what version you’re using. We also have the ability to use a custom template if we enable this option. We can insert whatever information we want into this template and that will be used when you send your email. You can also use short codes to populate the information based upon your form, and Brizy also gives us a really quick and easy way of seeing exactly what short codes we can use.

If we hold our mouse over the little question mark, we get a link to all of the different short codes, and these relate to the different form fields. We have inside our form, for example, the name the email select and so on. You can easily come over and click on these and you can choose choose to copy it. Now we can go ahead and we can just paste that into our template and we can build our template that from here for this example, though, let’s just disable that for now okay, so we’ve seen, we’ve got the WordPress SMTP and gmail options. But what else do we have?

Well, we can also link this up to various different services, for example, Mailchimp, Sapien campaign, monitor and so on. All the options are available inside you and all we need to do is select the option. That applies to the form that we want to send, and then we just need to drop in the relevant information. In the example of melee light, we need the API key once we’ve done, that we can connect it up and our form will then link up to our mail. Lite account pretty cool.

Let’s cancel that for now and the final option we have is to apply a Recaptcha to our form. This helps just reduce the amount of potential spam that we have from it again. If we choose this option, we just need to drop in the side key and the secret key. Both of these are free and they’re available via google, so you can connect things up and you have recapture applied to your overall form. Let’s just quickly go back to the email options: let’s choose WordPress as our sending method.

Now we simply need to fill out any relevant information for our form and there we go. There’s all my form completed, I’m going to click continue and once we’re done, I’m going to click done now. We can update and test our new form and page out. So you have a page everything, looking pretty cool, let’s go ahead and fill this out and once we’re happy we can click the button to send it and there we go. Our email was sent successfully now, alongside the email being sent through to the recipient.

You also get a section inside the dashboard of Brizy that allows you to see all of the different emails that have been sent through your contact form. Let’s hop back over into the dashboard exit Brizy I’m going to come to the Brizy menu entry and inside there we’ve got a section called leads and inside there you can see. There’s the email that’s been sent through the name, email, the select result and also the message. Obviously, if you create additional fields, they’ll be listed inside you, so now you can go ahead. You can export this to CSV if you want to, but you have a record of all of the emails that are sent through, that specific form.