Sigma Hosting
Menu
In this Wix tutorial, learn how to add a contact form to your website.
MY TUTORIAL CHANNELS //
• Main Channel – http://bit.ly/PixelAndBracketYT
• Illustrator – http://bit.ly/PBIllustrator
• Photoshop – http://bit.ly/PBPhotoshop
• InDesign – http://bit.ly/PBInDesign
• Premiere Pro – http://bit.ly/PBPremierePro
• After Effects – http://bit.ly/PBAfterEffects
TAKE MY CLASSES //
• Illustrator for Beginners: https://bit.ly/Illustrator5Essentials
• Photoshop for Beginners: https://bit.ly/Photoshop5Essentials
Download project files and other resources from the Pixel & Bracket Vault on my website: https://pxlbrckt.com/vault
Get Skillshare Premium for free and learn from myself and thousands of other creators: https://pxlbrckt.com/skillshare
My favorite place to get music for my YouTube videos: https://pxlbrckt.com/epidemic
I love using StreamYard for my livestreams, video recording, and podcasts with guests. You can try it for free and get $10 off when you sign up with my link: https://pxlbrcket.com/streamyard
My two favorite YouTube browser plugins and keyword research tools are VidIQ (https://pxlbrcket.com/vidiq) and TubeBuddy (https://pxlbrcket.com/tubebuddy). I use each and HIGHLY recommend them if you want to grow a successful YouTube channel! (btw just pick one, having both is probably overkill… 😅)
MY YOUTUBE GEAR //
• Work Camera – https://geni.us/Dg20
• Work Camera Lens – https://geni.us/A06gBf
• Personal Camera – https://geni.us/lAgB
• Personal Camera Lens – https://geni.us/JkCngL
• Webcam – https://geni.us/6BVc
• My Favorite Tripod – https://geni.us/hwfntp
• Camera Mic – https://geni.us/mobx
• Desk Mic Bundle – https://geni.us/5mv8s4o
• Mic Arm – https://geni.us/TB8zg
• SD Card – https://geni.us/nURBUAp
• Card Reader – https://geni.us/CtuA
• Desk Lights – https://geni.us/KV3yb
• Studio Lights – https://geni.us/rFZK5
• RGB Lightstrip – https://geni.us/WLdfn
• RGB Bar Light – https://geni.us/U1hNTJm
Some of the links above may help support this channel through a small affiliate commission at no extra cost to you!
COME SAY HI //
• http://www.twitter.com/pixelandbracket
• http://www.instagram.com/pixelandbracket
• http://www.facebook.com/pixelandbracket
• http://www.pixelandbracket.com
SPONSORED BY //
RFclipart: https://rfclipart.com/
Use the promo-code PIXELBRACKET to get a 10% discount. Discount is valid until December 31, 2019.
hey guys this is Spencer from pixel & bracket in this video we’re gonna look at how to add a contact form to your Wix website so I’m on a sample portfolio page and what I can do since this page has a contact page so if you already have a contact page and you want to add a contact form to it I’m gonna navigate to that page with the page drop down down to contact so you see here we have a little bit of information entered but how about a
form that people can actually reach you at they can input data and send it to your email we’re going to go over to the plus button in the tool panel the add button and if we scroll down here we’ll find contact now the contact section has a ton of different pre themed contact forms in different different ways that people can get ahold of you let’s just select one of the very basic ones here at the top I’m going to click and drag it to place it on
to my site once I have it there we can do a couple things for instance we can manage the fields we can manage what input information there is now email is one that is required no matter what email is always mandatory so you cannot even delete this section you can rename it but be careful make sure that people know that they have to input their email into this field the next input field we have on this default form is name and then we have subject
and message name is another one that you can rename you can make it optional it doesn’t have to be required you can also delete that piece so anything except for email you can do any of these three things by clicking on the little ellipses out to the right of it you can also click and drag to move these around for instance it might make sense to have name first up then email then maybe a subject line and the message now you can add a new field
with this button here at the bottom and they have a few preset fields and then also a custom field and the custom one if you just simply rename it that’s what shows up so for instance if I type in phone number even though they already have this I’m just going to put that in as an example we can hit done and now it looks like I need to input but potentially my phone number into this spot so that’s it for managing fields that’s how to add delete
rename them we’re gonna exit out of that next up would be settings now the settings is where we adjust what email address this contact information gets sent to we can also add a second email address as well and then our button there at the bottom says send but it could say anything like for instance we could make it say submit that’s where you might change that piece of information and then as people actually submit their messages we can decide
what happens when they submit that form does it show a message or does it open a link for instance you could take them to a Thank You page if it just shows a message what is that message well thanks message sent or maybe a submission confirmed something like that you can have anything you want there if they forget any required info there’s gonna be a little piece that pops up if you’ve ever used a contact form you know when you when you forget
that required piece those red letters pop up and they say please add required info likely it will highlight the section as well letting them know which is required it already does put a little asterisk by each and lastly we can actually name the contact form if we want to we can just name it contact form or something along those lines now let’s get into the design and layout of our form first up we if we have our form clicked we can move it up
and down the page by using this little button right here and adjusting that we can also adjust the width of it by clicking on the side and dragging that out and then we can move it around until it locks into place so we know it’s right in the center of our page we can also click on the layouts tab which is going to let us align the text either left or to the right and to actually adjust the text and the buttons we can go to the design tab this is
where most of our design attributes are going to be we can select a pre themed contact form any of these different ones whichever one gets you closest to what you want it to look like I’m gonna start with this one here and then we can customize that design by clicking the blue customized design button so we have a lot of different layouts so if I cycle to the left we’re going to start at the top here there’s a lot of different styles to this
theme that we could use you know we got a little bit of a shadow behind the buttons we have the names out to the left we have lots of different formats that we can utilize here I kind of like this one I’m gonna stick with that one there now we can adjust from top to bottom here the fill color and opacity so right now the field background is white we can’t really see that let’s change that to something like a very light teal it’s that a teal a
turquoise and then we could adjust the opacity of that to pull that back a little bit so there’s just a little bit of a color behind that we can adjust what our button color is so maybe I want that to be more of that darker teal color and then we can adjust of course that the transparency there but since this layout is on top of that box I don’t actually want to adjust that I want to keep that as a solid color then we can move on to the border so
right now there is a border we could make no border or we can make abhorrent a lot of a border right very wide but I’d rather keep it smaller we can adjust the color and the opacity of it I’ll bring that down just a touch and we can also adjust the button border width as well finally we have shadow so we can enable or disable the shadow just by one click right there we can adjust the angle the distance the size and the blur so if we did have a
shadow we could put it in there and we could adjust the color of that shadow as well and finally we have the text now the text might be the one thing you really do want to adjust we can start with the font down here so we can get the font set to be what we want I’m going to select masayo here kind of like that font and then we can adjust two things here we can adjust the label color so this is what they see so for instance we could select
something maybe it’s more of that turquoise color and then we can also select what the user input color is so maybe that’s a little bit different maybe we that as a black color so when they click into this and input their name it’s going to show up in black so they know they’re actually inputting data into that form now we have the theme set as custom for now if we were to select a theme it would change it to be the theme we’re currently
customizing that theme we can also adjust the font size depending on how large or small we want that notice how it’s adjusting the entire size of our contact form a little bit as well we can select simple things such as bold and italic and also our success message color and our error message color remember that red color we were talking about before now a couple of quick hit things here the email that you inputted where messages are going to be
sent is not visible to your site visitors so they they cannot see the email when they actually send it when it gets sent through and you reply to contact form emails the sender is no reply at your site com so it’s not actually going to be through your email you’ll also receive notifications of new messages through your site’s dashboard and last we hit on this earlier but the email field and the contact form is always a required field but it’s
also possible to change the name of the field it’s just not possible remove it or mark it as optional so if you decide to change the name make sure you signify that a valid email address should be entered because if a valid email is not entered you’re going to get an error message it’s it’s definitely best to leave it just maybe as email to prevent any confusion that’s it for this one we’ve added a contact form to this website there’s lots of
different themes and options for you to customize so you can create a contact form that looks however you want it however it fits best with your site thanks for watching and subscribe for more tips and tutorials I’ll see you next time