How To Build Forms with Avada – Transcribed
Hi everyone, in this video we’ll be looking at how to build forms with the bottom.
With the other form builder, you can easily create all manner of forms for your website using the power of Avada builder and then you form builder elements.
OK, let’s begin.
I’ve downloaded the.
Podcasts prebuilt website here and on the guests’ page I’m going to add a new form for potential guest contributors to fill out.
To get started building in about a form, head to Avada forms from the WordPress dashboard or forms form builder from the Avada dashboard.
From this page you can create your forms. I’ll call my new form guest contributor.
And click on create new form.
This takes me to the editor and in my case, as I have about a builder autoactivation turned on in the builder options, it opens another builder for me.
I’m going to head to about alive though to build this form, so I’ll click on Avada live here.
OK, so now I’m ready to build a form.
I could start with one of the prebuilt forms available right here.
But what I want is pretty custom, so I’ll just build it from scratch.
Instead, I’ll click on add container and I’ll just start with the container with two half columns.
Now I’ll click on the add element button to start adding my form elements. Note how it opens in the new form elements tab and here we can see all the new form builder elements.
I will start with the text field element.
I’ll give it a label of first name.
And when I tab away, the field name auto populates.
I’ll make this a required field.
But I don’t think I need any placeholder text or tooltip for this.
I’ll add an icon here.
I’ll just search for person.
And choose that.
The next option is minimum required characters, and I might just set this to two and the following option. The maximum allowed characters.
To be 50.
I don’t think anyone has a name outside those parameters.
OK, the next thing I need is a last name field.
I might just clone this one-half column and I’ll just change the field label and the field name to last name.
Otherwise, everything else can stay the same.
Now I have an empty half column underneath here and this one will be good for the email field element.
I’ll give you the field label and email address and again just tab away in the name auto populates.
I’ll make this required as well, and again, I won’t add placeholder or tooltip text.
I want an icon here, so I’ll search for email.
And I think I’ll choose this envelope here.
OK, that one’s good.
I’ll now add another half column.
And add a phone number field element.
I’ll set the label and name.
Make it required.
And I’ll just choose a different icon here.
I’ll search for fun.
And pick this one.
OK, now under these I’ll add another half column.
In this column I’m going to add a checkbox field element.
I’ll give it the label, podcast categories and tab away.
But then I’m going to come back and add a bit more text to the label.
This way the field name will be nice and short, and it won’t have any disallowed characters in it.
I’ll make it required as well.
And now I have to add my options.
I’ll make the first one business.
And then add a couple more.
They will be lifestyle.
And under this I will choose floated as the field layer.
Now I want to match the styling of the other fields.
So, I just have to make a few edits to the column.
And now I want to have a background colour, so I will just edit the column and go to the background tab and set that.
I’ll also go to the design tab and set 40 pixels, top margin and 30 pixels bottom margin.
And 15 pixels left and right padding.
Below this I’m going to add a border size of two pixels all around and set the border colour to this Gray.
And then a bit further down I’m going to add a border radius all round of 6 pixels to match the other fields.
OK, is another shortcut. I’m now going to clone this column as I want another checkbox field element next to this as well, and I want all the same styling.
So now I just need to edit the element.
First up, I need to change the label to. Where did you hear about us?
And this time I need to manually change the field name.
I’ll call it referral source.
I’m not going to have this one as required, so I’ll turn that off.
And I’ll change the options to website.
OK, so now I need a full width column.
I’ll add that.
And now I’m going to add an upload field element here.
I’ll give it a label of show us who you are.
Make it required.
And I’ll add some more to this placeholder text.
I’ll just paste it in at the end here.
And I’ll add a tooltip for this one.
I’m happy with the file size limit of two megabytes.
And I’m only going to allow the JPEG extension here, so I’ll write dot JPG here in the allowed extensions option.
OK, nearly done.
I want to allow users to send me a message as well, so under this I’ll add the text area field element.
I’ll give it a label of message.
Make it required.
And then add some placeholder text.
I’ll add, please tell us more about yourself.
I don’t need an icon for this field, but I do want it to be larger, so I will change the Textarea row value to 10.
Yeah, that looks good.
Under this I will add the submit button element.
I’ll go straight to the design tab and change the button span to yes and that’s all I really have to do with this one. It’s taking the default button style from the website and I’m happy with that.
The last element I need to add to my form is the notice element that’s becausw on submission. The confirmation option is going to be display message and when I choose that, this is where it gets those messages from.
As we can see, when I add the element there are default messages already there. I will just adjust these messages a bit.
OK, now as to their colours, they’re coming from the global options. If we go to global options of other builder elements alert, we can see the colours are actually coming from the error colours and the success colours.
So, if you want to change them in the form, change them here.
But these are fine for this site.
There are of course many elements we didn’t use for this form, but that’s the nature of forms. We have a range of elements for precisely the form you want to build.
For example, I could add the recaptcha element to this phone for more spam control, but for this example I will leave it as is.
OK, so now we have completed our form but we still need to configure it. It’s time to head to the form options which are like page options. But just for this form.
I’m going to go straight to the appearances tab here and make some changes. The defaults are OK, but I’m going to place this form on a purple background and so I want to make some changes here.
I will change the field background colour to this light Gray.
And the field label and field text colour to the purple from the side.
I’ll also increase the border size to two.
And change the form border colour on focus to that purple as well.
OK, that should be good.
Now to the submission tab.
This is where we configure what happens when someone submits a form.
So, this example I’m going to set it to send to email.
I’ll add an email for it to be sent to in the form submission email option.
Let’s say info ativadopodcast.com.
And I might change this email subject to potential guest contributor.
As these options only relate to this specific form.
I’ll change the email from name to the same thing.
And the sender email I was said as well.
As the description says, if you leave this empty, it will just use WordPress at sitename.com.
I don’t want this to be a member, only form, so it looks like I’m done here.
If I wanted to, I can connect to HubSpot account here to automatically add send us to my HubSpot Contacts list, but I will leave that for now.
For more info on that see the how to integrate HubSpot with Avada Formstack link here.
The next tab is confirmation and I’m going to leave this on display message.
As I’ve already added the notice element into the form, I’m good to go here.
There’s also a privacy tab, but for this form I don’t need any of these options.
OK, it’s time to save all this work.
And now I’m going back to my page and I will add the form.
To start off or change the link on this button to Scroll down the page to where my form will be.
I’ve also added a full width column directly under these half columns.
I’ve added a title element which the top button is linked to.
And the title has a 50 pixel bottom margin as well.
So now I’m ready to add the other form element.
I’ll just add it here.
And select my desired form from the dropdown list.
The form loads, and yes, that looks great.
I’ll just save that page.
And now let’s check It on the front end.
OK, I’ll just click my become a guest contributor button and it scrolls down to my new form.
And there it is. Custom functional awesome.
That’s the new about a phone builder.
This concludes a video on how to build phones with Avada. Make sure you subscribe to our YouTube channel to keep up with all the latest videos and if you have any questions or need assistance, please create a support ticket and our team will gladly assist you. As always, we want to thank you for choosing averted.
Transcribed by ZAAAX Design.
If you need audio transcribed, contact us here.