How to Create a Free WordPress Contact Form – HappyForms

thank you so much for watching the press Avenue YouTube channel my name is John and I like to talk about WordPress tutorials plugins and themes today we're talking about a free contact form plug-in called happy forms absolutely love the name and actually I love using the plug-in as well over at happy forms where is it dot me they have more information about this it is a freemium plugin so they have a free and paid version and I'll be talking about the free version and how easy it is to create a form for your website if you like these kind of videos go ahead and hit that red subscribe button additionally if you like this video about happy forms I love a thumbs up and also a comment I love talking you guys I love answering questions and I'd love to hear from you lastly I have a Facebook group where you can ask more questions about this particular plug-in or other plugins and a link below to that thanks again for watching I've come over to wordpress.org just to show you the details about it as of right now I'm doing this April 30th 2020 it was updated ten hours ago I always look on this right-hand side to see how things have been updated if a plugin hasn't been updated in a while I get a little nervous 30,000 people are using it I'm tested at five point three for PHP and then it's got forced four to five stars and then they offer just some things that it does so it works with Guttenberg which is fantastic some other ones that have been out a long time don't actually do this they have a lot of form preview you can do unlimited forms parts emails and messages which is great there's no limit there spam prevention gdpr and 508 compliant and secure forms and then the free version does everything that's listed here and then they also have an upgraded version which does all the rest of this which is an absolute ton but for free you can do a short text which is probably a name long text can be comments questions getting a quote grab their email multiple choice checkboxes radio buttons drop down and a number so let's get into happy forms and build a simple form for your website and we'll also get into some other stuff alright so go over to this is basically just a testing site where I test plugins I'm going to go ahead and go to the dashboard of WordPress and I've already logged in I'll go to plugins and then add new and on the top right I'll type happy forms and all one word so no space between happy and forms next you'll see right here it's two hands grabbing each other in a kind of quote talk box here I'll go ahead and hit install give it one moment activate and then when you first activate you get this step here it says enter your email to agree to notifications and sharing some data with the theme foundry comm typically I skip this every time I am glad it has a skip this step so I hit continue but if you want that stuff you can go ahead and each hit your email in there and hit go and you can enter it now when I first get to the forms what I see on the side here is happy forms it has all forms add new activity settings and upgrade now I do realize freemium plugins where you get a little bit for free and then if you want the extra you do pay and a lot of them from gravity forms to WP forms they do the same kind of method happy form says the same thing if you need extra options you do pay for that but I have found that they are cheaper than some of the other big ones which we'll get into in a bit so when I first get here shows me my forms and it has a sample form and that has the shortcode here and then the author and the date was created what we're going to do is go to add new and jump into creating a basic form so here we are here our basic form will be a contact form so say contact us and you can see I filled it on the left hand side in the customizer and this gray bar here and on the right it shows a live preview of what I'm getting which I love next it says add a part here to appear in your form so the parts are each filled under the title so it could be a name phone number question etc so their terminology is to add a part so we'll click add a part and it shows all the parts that are available now you'll notice short text long text email these are all included in the free one then if it says upgrade that's in the paid one so we're going to stick to the free one for this video so you can see multiple choice drop down number but you get all these other fields signature compliance rating blanks placeholder MailChimp etc so I'm going to click short text and first we're gonna ask for their name so you could say your name you can put the label display either above the field below it to the left of it so that's to the left inside of it which actually really like so it's in the field itself or you can hide it depending on what you want you can also say above and then do a placeholder and say first last so then they see in gray here and then they click it and add John Doe or Jane Smith or whatever their name is additionally what you can do is I can go to more and under width here has a drop-down right now it's full width you can see it goes edge to edge let's do half so now it cuts it in half and then I can click duplicate now I have your name and your name copy and what I love about this is there's no CSS styles I don't have to figure out why need 50% over here and 50 over here I don't have to get into padding or anything like that I just click more and then half and that's what I appreciate about this now if you know a lot about CSS you can put custom styles in here but there is a way to style this and we'll get there just a moment so now we'll change this label to last name and then I'll come back here and hit this drop-down I'll change this to first name and then I can get rid of my placeholder next thing I would point out is the this is required I can turn this on or off instead of putting the little red star that you typically see it leaves it like this if I uncheck it it says optional and I kind of like that it's nice and different so close up this more and then last name I'll delete this as well and then other things that are in here logic if you click logic it does tell you need to upgrade which is fine but just to show you so now I'm first and last name and they're split if I wanted to add a middle initial I could come back to first name I can say whoops I go to more I can do 1/3 then it can come to lastname do a third spare with me I can duplicate the last name and I'll change this to middle name and I can actually make this optional find that I'll come down to last name and I'll delete the copy bit of it and there we have it so now we have three columns no code no dragging things around it just works straight out of the box now just like the customizer for other things like your header or your site down at the bottom here we can view this on a portrait version of a tablet or on a phone so it's taxed up really nicely and you can see it and view it right out of the gate without having to save it publish it to a page open the page drag the thing around and see if it works all right so there's the short text part I'm going to add another part we'll do long text and I'll say questions or comments I'm going to make this required and then under more you can make this you can limit the characters and it counts them for you so if you want them to leave about a tweets Worth you could leave it there if you want them to write a book you could say in a thousand words or less let us know why you know or how we can help so max words count minimum words maybe it's for school they have to turn in at least a thousand words or maybe it's for a grant application which I've seen a lot of with nonprofits which says tell us in so many paragraphs why you need this grant so this is a great thing here it's very easily done so you can do characters or words so we'll say let's say keep it short and sweet we'll keep it at a hundred max words and I really like that about this next we'll add another part we'll say email I'll go to label I'll say email above um you can say here we hate spam so we hate spam as much as you and I'll only use this to contact you I'm so there's email and then you can change the appearance for the description if it's on focus or it's on a tooltip so they can hover over this and it can say the same thing which i think is fantastic now what I like about this is we have everything stacked up here but maybe I want email under first name so I simply just drag this up and there it is and what I love about this is it's very fast there's no delay there's no loading bar it's very quick and nimble all right so we've added email now I'll add a single choice and we'll say favorite favorite animal and then the choices are down here so it says no choice is added I can add a single choice so I can say cat I can add another choice dog or bulk choices and you can copy and paste your choices here with each new choice on a separate line so if you had an excel sheet or Google sheets you can just paste it straight in here and have a huge list so I had one more choice bird and then we can also go down to more and then you can display vertically or horizontally this I absolutely love because instead of making this really really long form you can spread it out horizontally to each edge depending on how many things you have and shrink up that form so people aren't endlessly scrolling choice width you can pick you can spread them out and I'll just do Auto because I think it looks really good right and just like first middle and last I could do three columns so I could do favorite cat's favorite dogs favorite birds and I could say you know parrot chickadee woodpecker etc and it can be in three nice columns alright so this is required or I can uncheck it and it's optional so we'll leave it at optional and then I can shrink this down I can also move this above the questions next I'm gonna go to add a part hang in a multiple choice now let's say would you like to be contacted via phone or email was pretty simple I'll go here phone we can say text and then we can say email we can even say all of the above and then I'd like to display this so I'm gonna go to more I'm gonna do horizontal and you can see that and I'll actually do width as half and then I'll pull it up above the favorite animal so we'll go string this down pull it up here go here come back down under width under the animal say half and it just puts it up there and I just love that it's great if you get lost in this kind of left-hand side area we can click around on these pencils and it'll bring us straight to it so I've worked with other forms plugins where finding the field you just scroll Scroll scroll Scroll scroll forever this is great I'm here at email I want to fix it I click email and it opens it up for me so it's really thought through which I appreciate all right add a part I'll show you the drop-down favorite car and then it says choose which I appreciate other ones forms you would say you know click here or click below or but this one says choose which I actually really like snake truck van let's see and then next we'll do all right so there's favorite car and again I'm going to drag this above my questions and again I can make this third so if I'd like I'm gonna leave it as this we're gonna go to add part and the last thing I'll show you is the number field I'll say oh this isn't the phone number field we'll just say age above below placeholder minimum zero maximum I don't know the oldest person in the world but um if you had a minimum age of if the rules for something was minimum age was 18 you asked them for their age and you said 14 you could throw out all those entries so leave that there so that's the number field I'll actually split this up with this drop-down so go back down the drop-down and we will have this so it's 50/50 so go to more and then half and then age and then more half so yeah really nicely split up next we're gonna set up so we just go over in the next tab I really like how it's set up so success message do I want to send them a message when they fill this one out so I fill this whole thing out I hit Send next I see this message says thank you so much you're entered in for the giveaway or thank you so much for contacting us we'll get back to you the next 1 to 2 days or you can send them to a webpage so they fill this out hope the webpage is not the free one so you have to be paid for that so we'll do the message itself thank you so much for contacting us always check your spelling error message so if they didn't do something correctly maybe they didn't fill out the last name they only filled out the middle name this is the message they will receive optional part label so if you can chant you one can change where it says optional so it's just totally up to you actually like how it says optional so I'll leave it send you can say submit you can add your own classes here and then spam prevention I do like that they included this in the free version I do you think is very helpful because there's so many forms out there and then you can also just hide the whole form after they submit it next email so receive submission alerts to your email address you can blind copy either our coworker or another email address that you have as well the subject can be you received a new message typically I change this to the forms name from the contact us form this way when you get other forms maybe have a quote submission a giveaway etc you know what people are sending it from so I know it's from the contact us form additional confirmation emails so it's from me when I hit reply then the display name is press Avenue and the email subject is we received your message so this is a confirmation email sent to the person contacting us so if they put an email in here I can also turn this off and then include submitted values which is what I want or don't want next style now this I absolutely love there are plenty of forms plugins out there but you can't style them unless you dive into CSS and some of them you can't style them unless you know advanced CSS where you can dig down and really change it so this style really helps out so under general you can change the width and the padding so we can say we want it narrow we want it wide and it just shows you I like the defaults because I like edge to edge direction left to right I'm in the States so everyone reads left to right or you can do right to left so there it is right to left message location above or below and there's the change their primary colors maybe you want everything to be below and then the success message we want to be a little greener and then I always leave red for errors next we go back then on the title we can show or hide typically I hide the title because it's at the top of the page but if you're inserting this in other places you'd probably want to show it there's the alignment here so contact us in the middle but if I hide it it doesn't matter parts borders and spacing so the border is right here so I go to hide it'd be really hard to see unless I had a different colored background which I don't currently because it's white on white show so I leave it always leave that for accessibility excuse me so people can see it border location you can make it like one of those things called I'm going to space what it's called there's a game where you fill in the words um I just leave all of them you can do square I like rounded or pill which is pretty popular so I leave around outer spacing we can clean it up a little bit and bring it in I do like how wide it is you can make it super wide if you have an older population filling this out I would look at super wide and also darkening this because people might not see the contrast there and that's how we do it here so border um our logos red so I'll make that red border focus you can have a change when you're in it so it's like oh yeah I mean that looks great I mean it's hard to do this in other foreign plugins that's why I appreciate this one background a background focus I'll leave the same next there's tons to get through toggle the placeholder on focus so if you see it comes up when I'm on the placeholder and then it disappears when I'm not and that's up to you it's kind of just a nice subtle style these are all the labels you can that's the description we can make them bold normal so title font weight we made it disappear I'll go back drop down so you can put a background color in here then I leave it as white because I like white radio buttons you can style them here so actually I think that's pretty sharp as a default submit button now I love this one because it's hard to do in other forms plugins and this one makes it easy so border you can't really see but it's a subtle difference you can make it pill-shaped you can make it a square box just depends on your style full width I love making the buttons full width at the bottom just because it's easier to on a phone it's easier to click it in instead of going to the side you can change the font size and it's just a slider we can make it bold and then you can change the colors so it'll say red and then on focus blacks not bad I'll just do a darker red so you can see it there the border and so it's very subtle and then the text I think white on red looks great and then finally we hit save so now we're going to insert this into a contact page so we've built the form and happy forms now we're going to close and it takes us back to the wordpress dashboard so there's her form right there now I can copy this and they give a really nice copy to clipboard or within Guttenberg you can have the block straight in your page so go to pages and then add new and then I have Elementor installed but that's what that is up there but everything below that's just awkward press so let's say happy forms demo and then I maybe write a little bit of copy phone number email how to get a hold of us a map and then I click plus and then most-used if you haven't used it yet it wouldn't be in the most-used it's based on what you use so typically I just search so I say happy pretty easy and I click it now it says which form do you want to use because it comes with a sample form and then it has a form that I created so I'm going to create the contact us form then it says there are other more powerful features you can upgrade but we created this great forum without upgrading and then it shows a preview of how it looks in my page which I absolutely love again over here on the side if you can change the form here and then under advanced you could add additional classes like other Guttenberg blocks alright so I'm going to go ahead and hit publish and I'm sure and then view the page so now here we are I just have a simple header and just white as a theme but your header would be whatever you have at the top with a menu this is the page title this is not the title of the form if you remember I hid that and then I can go ahead and fill this out and then I like dogs and you can call me on the fronts put a phone field field age getting old questions nope if you see that it it's only got one it's counting the actual words it's not counting the letters and then I hit submit and then it says thank you so much for contacting us anyway absolutely love this it's very clean if you have any questions about happy forms the free version please let me know in the comments below if you like this video I love a thumbs up and also which parts you like about it and if you want to see more videos like this additionally go ahead and hit that red subscribe button to see more WordPress tutorials just like this thank you so much for joining me on the press Avenue YouTube channel