Peachtree Fence Part 11: Projects Carousel & Linking Forms Together

0:00:00
Alright guys, what we’re going to try to tackle in this episode is, let me make sure the mic is pointed at my mouth. This are recent installs. I think we want this to be a carousel and I didn’t really have a plan for this. Originally on the old site it was going to be, if I can look at it, it was going to be like tabs like this. But I really think, especially for SEO purposes, we wanted to make it like almost a project kind of center where we can add new projects and say like fence installation in blah, blah, blah, blah, Georgia. And then we actually detail the process of the fence installation. I think that’s going to be a lot better for SEO. So it’s different than just like a gallery. It’s more of like a case study almost. So let’s go ahead and tackle that. So I’m going to go into the back end and I don’t think we’ve made, oh, we did make a project CPT already.

0:00:53
I don’t think we’ve done anything with it though. So let me just go ahead and add somewhat of a sample project here and I’m just going to call this fence installation in Buford, Georgia. Like that fence installation at residential, others do, how about this residential fence installation in Buford, Georgia. And then what I will do is this is going to almost be like a blog post. So I’m going to go to Lorum Ipsum and this is going to have to, we’re going to have to create a template for this as well. Yeah, yeah, we are. Okay, so it’s going to require a little extra work. So I’m going to paste that Lorum Ipsum in and then we can just add an image here. We don’t want to upload though. We want to go media library. And then we want to grab, I’m thinking like one of these series of photos, there’s one where there’s like multiple photos of the same project.

0:02:04
Wanted to grab that like this one. It’s like this. Are those like two? Okay. All right, we’re going to insert this select and then down here, we’ll do another one. Media library. And what I’ll have him do is this will be like one where we can do a little write up. Yeah, those are two different angles. And then we’ll do this as well. Image, media library and show this little privacy fence thing. Okay. All right, so that’s good. And then what I like to do is just break these up because that Lorum Ipsum site always makes these paragraphs like way too long. Okay, that’s good.

0:02:54
That’s good. I’m not, I’m probably not going to make the template in this, but I definitely want to get the carousel made. And then we’ll see what else we can accomplish if we have time. Okay. And then we also want to throw some headings in there. So there’s the intro. We’re going to do a heading here. So this will be an H2. This is a subheading. And then probably like right here, this is a much longer subheading to see what those look like. These help when we actually do the styling of this section. And we will also do a list in here. And we’ll do an H3.

0:03:52
This is an H3 heading. And then we’ll do a list. And we’ll make it a numbered list item. This is a list item. Something like that. All right, we can go ahead and publish this. And let’s take a look at the slug. So we have residential fence insulation and view for Georgia. And it’s going to be under projects. Yeah. So that’s good. I like that. All right. We also need some custom fields. Because we’re going to make project cards for this.

0:04:28
So I’m going to go to Metabox, Custom Fields, and Add New. This is going to be projects. I’m going to go to Settings. This type is going to be Project. For fields, we’re going to have Text. This is going to be Project. OK, we need to make a group for this, I think. So let’s delete this. So Add Group. And this is going to be called Project Card. And I’m going to add a field. And this is going to be called Project Card Heading. Oh no. Text. It’s a text.

0:05:10
And the label is Project Card Heading. Text. I’ll do a text area for this. And we’ll do Project Card Lead. Which I don’t even know if we’re going to have one yet. I don’t really have a design for this. We’re going to figure it out as we go. In fact, actually, we’re not going to do that. We’re not going to do a lead. We’re literally just going to do a Heading. So we’ll do Project Card Featured Image. So we’re going to need an image field. And I believe this has to be an image advanced. So this is going to be called Project Card Featured Image. And the link will go to the normal link.

0:05:53
How about Project Card, geez, Text, Project Card? Now, this is not just going to be on the card. So we need another group, I believe. So Add, Feel, Group, Project Info. And then this is going to be Text. And this will be Project City. Text again, Project State Code. Project, we’ll do Project State. And Text again, Project State Code, which is like the two letter code. And I can actually default value can be Georgia, because most of their stuff is in Georgia. And label description, input description, probably EGGA. I can actually just because it has a default value, I guess we don’t need to.

0:07:02
Everybody’s going to know what it means. All right, Project City, Project State, Project State Code. Wonder if we are going to use the address at all? It’s kind of helpful, I think, for how about neighborhood? We’ll do Text and Project Neighborhood. We’re not going to use all these on the card. But we may use them on the single project detail page. OK, let’s just use those for now. And now, when we go to Projects and open this up, come down to this section. There’s Project Card and Project Info. OK. All right, what I also want to do is go to Oxygen Settings. I want to go to Client Control. And I want to turn off Oxygen Builder on Projects.

0:07:57
So we can get this big giant oxygen box out of the way. So we should just have Gutenberg and Custom Fields. So this is going to be the same as this for now. But if we wanted to make it different, we now have the power to make it different. The featured image is going to be this one, probably. All right, it shows two. So we’re going to delete that one out. All right. And then we don’t need any of these custom fields yet, because we’re not going to use them. All right, that’s good. I don’t believe I have a duplicator plug in. And so I can’t duplicate that. OK, let’s just add that real quick, because I need to make two copies of that.

0:08:45
Duplicate Post. And unfortunately, some of these don’t duplicate the custom fields. I need one that duplicates the custom fields. I’m hoping this one does the trick. Come on. No, thank you. OK, OK. Which element shall be copied? Uh-huh. Wow. Other options. All right. OK, well, let’s see what happens. Projects. Copy.

0:09:27
OK, let’s go down to here. See if it did it. And Trash. You are trash. All right. Well, I guess what we’re only doing two fields. So at the save time, even though this plug in is trash, I will use it. And we’ll just change those two fields and the title. Residential and the Cuella, Georgia. Let’s get rid of the number four. Let’s copy that. Let’s come down and paste it. Let’s grab another photo. We can grab any photo we want and publish that.

0:10:10
Go back. OK, that was the Cuella. Now we need to open this one. Take away the number three. John’s Creek. Copy. Come down. Paste. Add Media. Let’s grab this one. I just want some variety in our photos here. I think that we’re only going to have three cards in the carousel on the front page. So there’s three projects that we can use to do our magic. I’m going to close that out.

0:10:42
Oxygen. Where do I need to go? Home page. OK, so edit with oxygen. I’ve got to get that plugin out of here, too. OK, go back. Plugins. And copy, copy, delete posts. No, no, no, no, don’t do settings. Don’t do settings. Deactivate. All right, delete. Builders up. Did you delete it? OK.

0:11:13
OK. Recent installs. All right, let’s click in. Let’s do a carousel. This is going to be called a project carousel. And we want to put a repeater in there. Let’s get our structure panel open. Open this section. Wow, it’d be nice if we named all these things, wouldn’t it? All right, let’s go rename. Here. Gosh, oxygen. Come on, man. Like I hit select all. And look, I can’t triple click in there.

0:11:47
I can’t drag and drag. What is going on, dude? Hero. Trying to move quick. And once again, we have oxygen slowing us down. All right, this is what we want to call this section. We’ll do CTA. Services. Services. Rename. For projects. Rename testimonials. And rename. No, hold on. What just happened?

0:12:33
What is this? What? What is this? Why is there a section that’s like not there? It’s not hidden in the builder. Look, if I delete that, it’s like nothing there. OK, fun. Testimonials. OK. Now, let’s add a repeater. Let’s go to query, advanced, edit, add, post type is. I don’t know if it’s project or projects. I mean, it’s projects. If I set it upright as projects, so that’s going to be projects. Posts per page is going to be 6.

0:13:25
Should we do like 6? Relay to 6 projects, add parameter, no found rows true. OK, let’s jump out of there. Apply. Should have 3 boxes we do. Here’s our repeater inside. This is going to be the projects carousel. I don’t think that needs a class because the carousel actually controls the repeater now. So what we need to do is inside this div, the div does need a div inside the div because it needs to be clickable. So I’m going to add a div in there. This will be called a projects carousel double underscore card, like that. I can add an image to that. We’re going to be calling this projects carousel card image.

0:14:30
There’s a lot of ways to do this. I could have done a single dash. In fact, just to make it cleaner projects carousel card, I’ll do it like this. And then double underscore image, which means that I have to go to that div again. And I have to change that to projects carousel card by itself. And then I also have to go to selectors and delete that selector that I won’t be using. Actually, there’s two selectors there that I won’t be using. OK, so let’s go back to the structure panel. So on our image, I am using that one. OK, does that still exist? Oh gosh, all right, hopefully it does. All right, before we get too far, let’s make this a link wrapper because it has a tendency to break things when you make it a link wrapper to wait in life. Data is going to be the permalink for the post. This image data is going to be the metabox custom field of project info, no project card, metabox field project card project card featured image size is going to be medium large of it’s saying these are going to be rather large.

0:15:47
All right, we’re off to a good start. After the image, we’re going to need the heading. And OK, that’s all good. This image, let’s think about this. I think this is going to be kind of controlled. The width of that image is going to be controlled by the repeater. I’m sorry, by the carousel builder. So if I go to cells and I do number of visible cells is three, why didn’t it make the number of invisible cells three set width value 33. OK, that works. Cell height. This is where we need to get into our image because we have set a height on the image to make all these the same height. There’s 40 RAM looks pretty good. Let’s go to custom CSS object fit cover.

0:16:50
OK, we’re getting somewhere there. I don’t know why. Why is the repeater so gigantic when the carousel, oh, the carousel is gigantic too. OK, I’m not sure why that’s doing that. All right, let’s look at our other options. We have 33. I actually wanted to go, OK, I actually want this to go off the screen too. So carousel, I forgot where that is. I think it’s in here somewhere overflow visible. But I’m never trustworthy of like when you’re doing these things on the class, sometimes it doesn’t work. Like you can see I can’t even like click the button. You have to go to the ID and then do overflow visible. And then sometimes it does not work in the actual builder. So if I go to the front end and let’s see what we’ve got on the front end.

0:17:51
And it’s not breaking out on the front end either. There’s my carousel. All right, cells. Cell height auto. Space between cells. Var space s. M. All yes. Cell transition. Don’t need to worry about that. Previous and next cells. Selected cells. Don’t need to worry about any of that. Oh, they can’t they can’t go off the screen because there aren’t any others to go. There aren’t any there are any more projects. So if I add another project, we may see it go off start to go out of the bounds of that.

0:18:49
And then we’re just going to have to adjust the width of the cells. Okay, so let’s go back to the dashboard. We can’t copy another project. I’m just going to grab copy here. It actually doesn’t matter. I don’t even need the internal stuff. All right, let’s do residential fence installation in. Lore instill Georgia. Okay, I want to kind of a long one to see if we can we have to deal with that. Lore instill I spelled that right. Okay. Grab that. Let’s do. Let’s do this. Okay.

0:19:39
Publish publish refresh. All right, we are going off the screen. That’s good. So we need to adjust the width of our cells. Where was I? Right here. Okay. Cells. 40, 550. That should give us like three to the edge of the screen. Hopefully depending on your screen size. All right, that’s getting pretty good. Yeah, there we go. Okay. I think that’s pretty good.

0:20:21
Let’s do one more because it’s. We need to be able to kind of see the whole scroll. All right, this is going to be. Alphoretta. Grab a completely different image. Nope. Credit cards commercial fences. Here we go. I think these are mostly the same. Now we’ll do this one. All right. Really, these will have the detail of the fence type. It’ll be like a picket fence insulation or a rot iron fence insulation in yada yada yada. All right. That one chose two images by the way.

0:21:05
Let’s see how that gets handled. Oh god, of course. Okay. All right. So let’s take out that. That’s why they got to fix this and make this work with not just the advanced image field, but a single image field would be, you know, really nice. All right. Why are there giant gaps between? So it’s like the gap doesn’t work. The space between cells is not a factor when I’m just going to do a set number of visible cells. Let’s try it that way. It’s frozen like it won’t do anything. It’s glitching.

0:21:50
It’s glitching out. I guess we’re just going to sit here. There we go. Time is money, oxygen. Thank you. Save. So if I put three now, okay, it’s showing me one, two, three in there in this area. So I really need to change that to two. It’s basically two visible cells in the target area. And then I probably need to increase the height of it. Okay. There we go. There’s two cells in the target area. But now the space between cells, once again, is like doing its own thing. I want it to be S.

0:22:42
And I bet that’s not going to change anything. Yeah, it’s not. Okay. Let’s go back to set with value. How about 60 percent? Oh, the image is not… Okay, I know what the problem is. The image is not stretching to fill the whole thing. It’s being limited by the height. There we go. All right. That actually gets me to where I want to go. But I think it’s easier to… I think it’s easier to just choose the number of cells. And just say…

0:23:51
Because I think this is going to do better depending on the screen size. So let’s say save there. And I think I’m going to have to make them a little taller. Now we’re rocking and rolling. Okay. Let’s go to image and let’s go to 50 rim. And then we need to get this background. We actually need to make this a gradient. And this is going to be var base. But this is going to be just nothing. And then we’re actually going to make this 50 and 50. I don’t actually know what the numbers need to be yet. Oh, sorry. This needs to be white. There we go.

0:24:42
The same color of the thing below it. So how about 40% and 40%? No wrong direction. 60% and 60%. There we go. All right. So inside this project card, project carousel card, we need to go vertical. We need to grab this heading, which for some reason I can’t really see a border around. This is going to be project carousel. Oh, projects, projects carousel card. Heading. Okay. We’re going to be typography left aligned. It is going to be font size. First of all, these are going to be H2s.

0:25:41
I do want them a little bit bigger than that, though. But I don’t think I want them bigger as big as H1s. So let’s do calc var text xl times 1.2. There you go. It’s about 20% bigger. Margin on the top is going to go far space ms. Okay. We are going to inject the card title. I don’t know why I can’t select it properly and then it’s wonderful. Okay. Nope. Can’t insert from there. All right. Let’s do this and that. Well, you can’t do it.

0:26:38
All right. We’re going to save and refresh the builder and see if that little glitch fixes itself. All right. Come down. Get all that load. This is so much fun. All right. Metabox fields. Project card. Project card heading. What’s going wrong now? Okay. That’s a little. Yeah. Never mind.

0:27:28
We’re a little too big. Actually way too big on this bar text. We actually just we don’t need to change that. Okay. Save. Now I don’t think I want to distract all the way across the width of the card. Actually, I’m a fan of like almost making this smaller. That would be text L. And then what we can probably do is limit its width to 20 characters. Yeah. Something like that. Now all of this is clickable. Trying to think of how I want to maybe kind of design this. First of all, we need to say first of all, we’re like 30 minutes in. I don’t even know if we are.

0:28:49
But I need to get rid of those arrows. Is there bugging me? So navigation arrows is just going to be none. Actually, it’s going to be used custom elements. And we’re going to go we’re going to set this right here. So the previous selector class is going to be previous project like that. This will be next project. Apply. And then we need to go to the noun project and find some good looking arrows. Okay. What do we want to do here? Do we want to go spend? We want to go fat. Let me do arrow right so we can kind of isolate this better. I don’t like these like curvy ones.

0:29:47
Something like this might be a little modern. I don’t know. Hmm. There’s a little too much right here. I don’t really like the way these brackets look for this kind of stuff. Typically. These little dotted ones are kind of cool. I don’t know if they’re going to stand out enough. Hmm. Load next 200 icons. Wow. This is a complete waste of time. All right. This might work, but I don’t know if that’s going to throw me off with the way it’s like cut like that. I don’t want to be too simple, but I want to be too fancy.

0:31:13
You know what I’m saying? I don’t really want to do hand drawn. You’re like Kevin just pick one. Any of them will work. That’s kind of cool. It’s a little thin though. It’s a little small. Okay. Let’s maybe pick a simple one. At least something to get us started, right? We can always swap it out later. Let’s try this one. I’ll take a couple with us. What does that look like? That’s still a longer one like this.

0:32:12
Okay. It already has its color in there, which is cool. All right. Let’s download the SVG here. Downloads. Let’s download this SVG. Downloads. Okay. Let’s go in. Where are we going to put this? Probably right here. I would imagine. Let’s actually get rid of this get a quote button. We’ll put our icons in. We’re going to do image, browse, and we’re going to make a…

0:32:49
Oh, look at that. We already have icons in here. That one’s kind of rounded. All right. Let’s do downloads. Here’s our two icons. I’m going to start with this one right here. We’ll select. Man. Okay. This is going to be projects. Carousel. Nav icon. Projects. Carousel.

0:33:17
Nav icon. And then we’re going to do that again. Double-dash. Left. And duplicate. Take off. Left. Double-dash. Right. Grab the wrapper. Featured gallery top right. Needs to be. Corazonal flex. Needs to be middle. We need to grab the project’s carousel.

0:33:51
Nav icon. Set its width to 10. Wait too big. Five, four, five, four, four. Projects carousel. Nav icon. Margin to the right. 1m. Last of type. 0. The left version of this arrow gets an effect of transform. Rotate. Y. 180. Align to the right.

0:34:36
Align to the right. Thank you. We didn’t do any of that on the class, did we? Okay. Okay. Horizontal. Align to the right. Middle. Good, good. These also need. Previous project. Previous project. Previous project. Previous project. Prev project.

0:35:13
Prev project. That’s how the carousel will pick up these and use them for actual navigation. Nice. All right. Icon. Custom CSS. Curse, sir. Pointer. That’ll give us a little hand when we hover over. Icon. See? See? Like that? Okay. Looking good.

0:35:49
Looking good, my friends. Okay. These cards need image. No, it’s these images right here. First thing that they need probably is a box shadow. And we’re going to go var, base, ultra, dark, trans, 20. Why is that forcing that to be? It’s. Cowly. Okay. 2, 2. No, we want to do horizontal 2. Let’s do 4, 8. 40. Minus 2.

0:36:33
If you want to know how I arrived at that, I’m just making shit up. That’s all I’m doing. So there’s your box shadow. Oh, and that is going to be a problem, isn’t it? The box shadow can’t break out of the cell. Inspects. See that little cell right there? Okay. That is solvable. We’re going to grab the div. I don’t know if it’s this div or the other div, though. So we’re going to go to layout overflow visible. It’s still not breaking out. It may be the div above it. Layout overflow visible here as well.

0:37:23
It may also be something to do with the carousel because this does not normally happen on normal cards. There you go. That’s working. Okay. That’s working. All right. And then we need to round our corners on our image. So we’re going to go to borders. Var radius. M. And then we probably need to do something related to like hover effects on these images to help people understand that these are clickable cards. So I’m going to suggest that we go to the actual card wrapper, the link wrapper. We’re going to go to hover state and we’re going to transform translate. Why minus one. And then we’re going to transition that point five seconds timing function ease.

0:38:42
Transform. Save. Let’s see it snap back. So we also have to go to the original state and do basically the same thing. So five. Timing function ease transform. So slow. I put five seconds. All right. There we go. So now you get that nice little whew hover effect. I think that’s pretty dope. And so it’s actually very tracksGood look. How do we get our stoppage heading behind the heading comes with the image when it when it translates Okay, um, these dots. I’m not thinking we need those really.

0:40:00
But maybe we do maybe I should keep them when they definitely aren’t hurting anybody are they. Repeater, div, div, what am I thinking? Probably this carousel builder. Minimum height on this carousel builder needs to be a 50 rim. That’s about the height of the image. That’s not really going to mess with anything. Okay. And then what we want to do because we switched this up is we’ll just take away the top margin on that section. And that’ll get rid of our little gap issue there. There you go. All right. Perfecto. Do we really need to do anything else there? Pretty slick, you know?

0:41:04
Okay. I click on it, it’s going to go to the page, but there’s no template for those. So we’re not going to really see anything. But it does work. All right. How much time we got? I took 40 minutes. Now, just to give you an idea, it took me 40 minutes to build that carousel. And I actually need to do a margin top here. Let me go to our carousel, projects carousel. Okay. Top, bar, space, M, none. Okay. Save. All right.

0:41:42
So if we look at our page now, let me close our inspector. Let’s see what else we’ve got going on that we might need to address here. That really like spices up that section of the homepage. I’m thinking we should tackle this real quick. I know that was kind of a, I would say that’s kind of a major thing, but this will be kind of a small thing. So I’m going to go to templates. Let’s get rid of the homepage. Now, let’s get rid of this. We don’t need that anymore. Let’s go to the primary template. And we’re also going to need to open WS form. Contact us. So I have start quote, and I’ll do, I’m going to edit this and say that this is start quote vertical.

0:42:30
And then let’s publish that. I’m also going to have a start quote horizontal. And then what did I say? Did I say we’re going to, we’re not going to grab the email at this stage. We’re only going to grab first name phone for starting the quote. Actually, because we’re not going to, okay, never mind. Sorry. I wish I could take that back. All right, I’m going to add the email back and we’ll make it required. Okay, easy fix. Yeah, because we’re making two separate forms, that’s what I was thinking when we were going to try to make it one form, but we’re not. So start quote, this is going to be horizontal, which it already is. You see I was starting to work on it. This one only has first name and phone.

0:43:22
Okay. So now what I’m going to do is I don’t even need to grab a short code or anything. We’re going to open the primary template and just swap these forms out. Okay. I just choose horizontal here and apply parameters. And there you go. So this is form on primary. And so form on primary, we need to make these buttons black. So I’m going to go to style sheets, forms. And I’m going to look at what are on. If we have any on primary, okay, we don’t have any on primaries yet. So that’s, oh wait, maybe we do. Form on primary? No, we don’t. Okay.

0:44:17
So let’s come down. Now we have tabs, payment form. Okay. On white. Let’s go to there. Let me zoom in for you guys. Okay. So right before form with map, we’re going to do form on primary. And then all we need to do here is, oh, okay. I need the front end again. We’re going to inspect this button, button primary, button full, button primary. So it has a styling attached to it in WS form. And I’m going to have to clear that out first. So we’re going to grab this advanced type is default. They even close, publish.

0:45:14
And then let’s refresh. And then let’s inspect. Still says button primary. Did I not publish? No, I did publish my changes. Okay. Okay. Let’s just grab this anyway in any case. It also says button. Oh, wait, hold on. Why we’re not seeing the horizontal version. That’s one problem. Did I not save this page? That would help. You actually saved the page you’re editing.

0:45:47
Okay. Inspect. So I’m just going to grab this. And we’ll bring this down to here. Okay. So here we are. Form on primary. And then this stuff. And we’re going to go background color, black, important. Doesn’t appear to be doing anything. Colors going to stay white. Let’s just see if we can get that to work. No. And it may be because we’re already using important somewhere. Yeah, I am var primary important for this.

0:46:35
But I just made it more specific. So. WSF button primary. But it’s not a primary button anymore. I switched it to default unless default is also primary. So let’s do secondary, save and close. Then here we can go form on primary. WSF button secondary is black. All right. We’re getting somewhere. That’s not black. Inspect. Yeah. It’s got this background color right here. Okay.

0:47:26
Just make sure we’re going to put this in and paste. WSF. Let’s just see if we can. There we go. Let’s just target button WSF button. Background color, black. Why does it look like it’s got some opacity going on with it? Okay. It doesn’t. But it does have a ugly border. All right. So that’s going to be border. None. What did we do with these have a height, I think? That’s going to be one problem.

0:48:09
High, high, high, high, high, high, high, high, high, high, high, high, high, five or M. Okay. Save. Perfect. Now that matches up. Now we’re going to do a hover version. So I’m going to copy all that. Over, close bracket, background color. I don’t know, honestly. Actually what I’m going to do is just opacity trick. Let’s go 90% opacity on hover. Well, that’s not what’s going to happen, but you’ll see. It’s doing it, but I can’t tell that it’s doing it. Let’s actually do like a gray.

0:49:13
Let’s see like background color, var, shade, dark. Okay. It needs to be important. There we go. That’s better. All right. Now we got a little hover effect there. So we have first name, best phone, and start quote. Ooh, that’s ugly, isn’t it? It breaks when they need to do that. Why does it do that? Now don’t do that. No, no, no, baby. What is you doing? I don’t even know what that meme is.

0:50:05
It’s got to be telling what the way that this is flexed. Align. Oh, God. Is this going to be justify or a line? Align items. Center. justify content center, justify item center. I don’t think it’s going to be any of these things. Align content center? No. Oh, gosh. Okay. It would be row line items center. Okay, justify does that. It should be a line item center.

0:51:07
I’m going to turn it off. I was just seeing, yeah, it should be a line item center that would work for that. But clearly it’s not. Flex wrap is set to wrap. What about this field set? That doesn’t really control the flex on any of that. How it does? It does have some flex set. What is this telling me? Align items. This is telling me that a flex container, nor a grid container. Okay. Okay. None of those are working.

0:52:09
This is effectively making the height of these cells taller. This is acting like it’s aligned to the bottom. I don’t know if it’s self aligned to the bottom. It’s vertical line, and it’s at the middle. Wow. I don’t even think that does anything. Okay. I don’t know. We’re going to have to mark this as like. I’m going to go on a base camp real quick. Command J to peach refunds and website rebuild here. We’re going to go under functionality. I’m going to do fixed form, fixed horizontal input alignment issue on fixed input alignment issue on horizontal form. See how my dyslexia makes me write certain things like way early.

0:53:22
I already thinking backwards. Use input alignment issue on horizontal form when submitted without info error state. Something like that. Kevin add this to do. So that won’t get forgotten, hopefully. All right. Because we got to move on. All right. Do we have an inquiry page yet? I think we do, right? Let me go out of here. Okay. Save this. Save my work. Let’s zoom out.

0:53:53
Back to admin. Pages inquiry view. How far do we get on this? Pretty far. What we have to do is we have to pre-populate these. What I’m going to do is I keep saying that. What I’m going to do. What I’m going to do. I got to do a lot of things. It’s not what I’m trying to tell you. I got to do a lot of things. Start quote vertical. Let’s mess with this first. Settings. There’s going to be a setting in here somewhere for pass variables in URL tracking.

0:54:40
Google Analytics event tracking tracking agent browser. Path name query string. Okay. Sign basic. Okay. So we’re going to go WS form pass query string, something like that. Populate a field with query string data. Okay. Okay. Yeah. Query var parameter. Okay. Job ID. All right. Job ID.

0:55:12
All right. Text field. Hidden field. Query query string. Query string. I know how to populate the field with query string data, but how do you get the data into the query string? Oh, it’s dinner time, by the way. And my kids are super hungry. So they’re going to start melting down. You probably already hear them in the background. Okay. First name, email phone. Is it part of this? Ask them, input, mass, pattern, user status, any, no submission duplicates.

0:56:02
Data lists, basic default value, autocomplete prefix, exclude from emails. I don’t know why I’m missing the setting. All right. Let’s go to P3 Fencing Gates. First question would be, we’ve got to fix that email field again. Here we are right here. So we’re going to not show the label. And we’re just going to do placeholder. It’s going to be email address, save and close. Publish. All right. Let’s see where this takes you after you submit. So we need to add an action. The action needs to be redirect. And the redirect URL is going to be, oh, here’s how you do it right here.

0:56:46
Here’s how you do it right here. I just remembered as we’re doing this. You do it manually right here. So you do query. And then I believe you do something like this where you choose what you want to pass. So we’re going to pass the first name and we’re going to pass email and we’re going to pass phone. I believe that’s exactly how you do it. Okay. Save and close. Let’s test it. So now we go to the homepage. So we fill out our first name, Kevin. Kevin at digitalgrevy.co. And then we put in our phone number, 2507-613.

0:57:29
Okay. Don’t call me. I’ll bill you. I’m going to send you an invoice. If you call me. All right. Start quote. Let’s see what happens. Do we redirect? Ericiting email. Okay. Well, all right. Because probably I’m not set up to send emails yet. So it’s just not send emails yet. All right.

0:57:50
Can I publish now? Please? Version track wait. Oh, what just happened? Where did my redirect go? Oh, okay. Redirect. Redirect. When form submitted. Okay. Inquiry. Question mark. First name and email and phone. Why is that so hard? Save and close.

0:58:22
We should not be set to send an email. Because that’ll cause an error. Okay. Refresh. Kevin digitalgrr.co. There’s my number. Start quote. Okay. It said thank you for your submission, which I don’t want it to do. But it did. Look at this. Look at this. Friends. Look at this. It did put the stuff in the query string, but not the right format.

0:58:51
Oh, yay. Okay. I’ve got to think about this. I’ve got to think about this. It’s got to be done better. So you can’t just do this. You have to give it labels. So we’re going to say name equals. And I think you put this in quotes. All right. How to format a query string. URL query string. Okay. No, no, no, no. You don’t use quotes.

0:59:28
You do use an ampersand. Okay. Email email phone. Okay. Let’s go here. So name equals field one. And email equals. And then after this ampersand, we’re going to do what is that? That’s the phone, right? Four and phone equals. Save. I don’t think I think this phone number is going to be screwing it up though. Okay. Refresh. So this is going to be Kevin.

1:00:10
Kevin and digital gravy.co. 770-250-761-3. Start quote. What has happened? What had happened was inquiry. Why is it not liking that? All right. I’m going to put a close bracket there. Let’s also find out why. Okay. Show message needs to be deleted. That’s one problem. Save submission is fine. Why can’t I republish that? Let’s re-save this. Yeah.

1:00:56
Show message. Delete. It’s not recognizing that as a that I did something to the form. Now it does. Okay. All right. Let’s try this again. Refresh. Kevin. Kevin at digital gravy.co. 770-250-761-3. Start quote. Why is it taking me to reviews? Reviews Kevin Geary. Oh.

1:01:35
Because WordPress is trying to parse the you are. WordPress is not recognizing this as a valid URL. That’s what I’m that’s what I’m gathering. Inquiry name equals. See page name equals. It’s fine. It should be fine. I don’t think it’s escaping the characters properly. Like if I just did this name equals Kevin and email equals. All right. Let me think about this. Placeholder, email address, prefix, label, hit in, advance, pattern, user status, method. Okay. Data list. Off.

1:02:29
The field name and value are separated by an equal sign. The series of pairs is separated by the ampersand or semicolon for URLs embedded in HTML and not generated by a form form. Okay. The query string is composed of a series of field value pairs. Field one equals value and field one equals value two and field two equals value three. That’s exactly what I’m doing. URL encoding. Some characters cannot be part of a URL. For example, the space and some other characters have a special meaning in a URL. Okay. That’s I knew that. The character pound. That’s my subsection or fragment. This is encoded as plus or percent 20.

1:03:32
So if we look at this URL string that we’re going to get here, close that. This should have no problem at all. This will likely have a problem, especially the dot. I’m guessing the dot needs to be escaped and the and the at symbol needs to be escaped. For this, 7, 6, 1, 3, these parentheses need to be escaped. The space needs to be escaped and the dash. The dash does not need to be escaped. But I don’t know how to program WS form to escape those things. Which is why I thought there was a setting for passing variables to a URL. So what I’m going to do is we’re going to ask Mark because I’m not seeing it query string here. So I’m going to grab this. We are going to simplify this for now. Let’s get part of it working. So I’m going to go here redirect and it’s just going to say field 1.

1:04:54
We’re passing field 1 as the name, save and close. Let’s refresh and try that. Why is it still going to review? That makes no sense whatsoever. It’s supposed to take me to, okay, let’s just super simplify this. Can it, here’s the question for our scientific experiment. Can it take me to the inquiry page upon submission? Yes or no? Okay, thank you. Now can it pass a simple string? And I’m going to use a different first name. But actually, no, I have to be able to use any name, right? So I have to be able to use any name, all right. Kevin, Kevin at 77025, oh 72613. At least I’ll really know my phone number after this.

1:06:24
It’s still taking me to review his Kevin Geary. That’s WordPress detecting the word Kevin in the URL and trying to take me here instead of taking me to where I’m asking it to take me. Because I don’t see any other, unless I’m just missing something super obvious, I don’t see any other reason why this should try to redirect. I’m guessing if, let me just take this URL, let me just paste it in and buy itself. So Dev Inquiry name equals Kevin. We’re just going to go straight to that URL and there you go right there. It redirects. Now if I put Tom, it’s not going to redirect. But it also doesn’t take me to the Inquiry page. There’s the Inquiry page right there. This is not making sense. I’ve actually never run into this error before and I don’t think I don’t personally think it’s because I’m doing anything wrong.

1:08:00
Maybe it’s the word name. Hmm, okay, we’re getting somewhere. Maybe name is not allowed. So let’s do first name, let’s field one. Okay, let’s try again. You just got to kind of like, what happens when I do this? What happens when I do this? What happens when I do this? Perfect. Okay, now let’s go here, grab this. Now what I want to do is edit my other form, my Inquiry form, and this first name field I want the default value to be first name from the query variable. And I’m going to save and close, publish. And now what’s going to happen is if it works. I do this and it’s going to put my first name, it’s going to put Kevin in the next form.

1:09:22
Because remember we’re starting a quote, they were starting a quote, right? So now it’s going to take me to the form where I can finish my quote and there’s my name already pre-populated for me. Okay, woo, man oh man oh man. All right, so. Now, question, I did a form with a map and all that, right? New form Inquiry contact us. Which form was that that I did with the map and everything? Oh, it’s right here. Oh, it’s taking me to the, is it just because it’s remembering the tab I was on? Oh, this is going to be a problem. Okay, because of the way we structured this. Because I ended up changing this whole format. Oh, that’s cool. Actually, it’ll take them here and then when they get to the next tab, this stuff will be somewhat prefilled.

1:10:30
But it’ll take them here to just enter their address and they’ll think, okay, but they’re not going to lose the information that they put in. So that’s okay. That’s all fine and dandy. And actually, I was thinking about hiding the city, state, and zip because they’re not needed. It’s going to fill those automatically when they do their address properly. So I’m actually going to say that this is going to be hidden, save, hidden, save, hidden, save. All right, publish. So really this is what they’ll be taken to. And I can also shorten this and pop this button in right there. And now it’s going to be like a one line form. Yeah, buddy. Okay.

1:11:22
Enter your address. So it’s on that tab. Let me go back to my homepage. So this is the flow. They put in their first name. They put in their email address. They put in this 250713. They start their quote. It says, hey, what’s your address? Okay. So I put in my address. We’ll just do this old one that I had. Primrose, drive, coming Georgia. Okay, that’s cool. It shows me my place.

1:11:54
I can zoom in. I can see. And Mark said he added by the way, the auto zoom feature. So I need to update and see if that’s good to go. But all I have to do now is sit next. When I get there, my stuff will be pre-populated. Now let’s see if I can do the email. So we’re going to do the first name. I’m going to copy that. We’re going to change this to email. I’m going to save that field. And then we’re going to copy the phone. Default value is going to be phone. Regardless of whether this works or not, those are never going to change.

1:12:35
I’m going to go to forms, vertical, redirect URL, and email equals. And then I’m going to pop in the email field. And then I’m going to hit save. Now I don’t think this is going to work because of the at symbol and such. But we are going to try it just to see. And I’m almost positive the phone number is not going to work when we try to add that. 2507613. All right, start quote. Oh, it did. It did. OK, that worked. That’s fine and dandy.

1:13:18
OK, good. Phone number, I don’t think it’s going to work. That’s going to break it. But we’ll give it a shot. OK, so we’ll go back here, redirect, and after email we’ll say, and phone equals, and then phone. Save and close, publish, go back, refresh. Here’s where I’m expecting to get the error. Almost 100% confidence. Oh my gosh, it worked. But that is an invalid URL format. As far as I’m concerned, if I put anything after that, I’m pretty sure it would break. I’m going to ask Mark about this to clarify. But we are working here.

1:14:11
Now on that inquiry page, I don’t like the fact if we go previous that it says, let’s get started. Because they already got started. They come from there. So let’s go to forms inquiry. OK, it’s right here. So I’m going to take out show label. Let’s get started. And then I’m also trying to figure out why this needs to be a full width button. There we go. Enter your address, hit next. OK, one, two, three, Primrose. Drive. Next.

1:15:08
OK, and all I have to fill in is my last name. And then I fill in my project. This is going to be residential, fence, gate. Yeah, tell me about your project. I heard about you on Google. And then I can request a quote. So that flow all looks good. Now what we have to do is we have to grab this whole, no. Wrong form. We need to go back to the horizontal form. No. We have to go to the vertical form. And we have to grab that URL string in redirect. And then we have to go to the horizontal form. And we have to do the same thing.

1:15:49
Start quote horizontal. Except this is not going to have the phone. So take out some email for right now. Take out show message. We’re going to redirect to this URL, except we’re not passing an email. And then I don’t think that this is field 4 anymore. It’s just, yeah, it’s field 30. And this is not field 1. It’s field 28. Save and close. Publish. Home page. Scroll to the footer. Kevin.

1:16:28
7702507613. We’ll do another one just to be safe. 71615. Start quote. We’re taking there. Tom, phone number, all good. I’m only seeing this slide because personally for me I’m cookie, and it remembers that I was on this tab. But any new user would be taken to this tab to get started, to do the next step, basically. Yeah, I think we are good. Get a quote for your Fencer gate project. I might want it to say, like, tell us about your project right there. And in that case, I would want to edit this inquiry page.

1:17:19
All right, we’re an hour and 18 minutes into this. So I’m just going to finish this up and call it a day. And then we’ll see what we need to do tomorrow. All right, so I’m going to add a heading, drag it, accent, line. And this is going to be an H3. Doesn’t really matter because this is all set anyway. Tell us about your project. OK. And here we’re going to go auto-auto. And then I’m going to go margin bottom. Oh, it’s already got a margin bottom on it. Save. Let’s just see how that looks. I think it needs more.

1:18:14
So we’re actually going to go form. I’ll just add a margin top glass to this, give it a little breathing room. You know? There we go. OK. And now when I do this, 1, 2, 3, prim rows, and hit next, it’s still saying, tell us about your project, because that’s not attached to any specific slide on the form. All right. I think that flow is pretty good. All right. Excellent, excellent, excellent. I’m calling it a day. Be back again tomorrow.