 Carrie Sletton. Carrie currently works for Iceberg Web Design in Minneapolis, Minnesota, building custom WordPress websites. She loves using her creativity and diverse background to solve all kinds of problems. A noted extrovert, Carrie owes me a big kick. Give it up, Carrie Sletton. Thanks, everybody. Can you guys can all hear me OK? I hope you're ready to have fun. We're going to have so much fun. Performance are really fun. But I do want to get you guys a little bit to see where we're at here. How many of you have been developing custom themes and WordPress for more than five years? All right, you're not in the right room. I probably want to go out there. How many of you guys are kind of more new to WordPress? Just kind of more getting started. It might be your first word camp. Raise your hands. All right, so this talk is really aimed at beginners. I really wanted to give you guys things that you could go home and use immediately. When I first started attending word camps, I was very overwhelmed by some of the level of technical difficulty at the presentations and felt like I didn't belong, and then felt like I had to go home and do a lot of research to implement some of the things that I had learned. And I wanted to give you guys some wins early on and teach you guys some things that you can go home and use right away. Raise your hand if you filled out a form ever in your life. OK, every website has a form. They're all over the place. But forms can do so much more than just collecting a name and an email address. I'm going to show you some of the things that I've done with forms. There, we're going to talk about using conditional logic. We're going to talk about passing variables from one form to another. We're going to talk about creating dynamic surveys in ways that you can display the results. And we're going to talk about generating custom PDFs. So my slides, I do have small writing and a lot of detail. So I would say, don't try to read it. Don't try to take notes. I will have a link at the end, and I'll tweet out a link. So maybe just follow me on Twitter if you want to see my slides. There are examples kind of step by step, and there are links to the actual websites that I've built with these actual forms. OK, why should you listen to me? Because I love forms. We already had an introduction. I'm not going to go through my whole history. I work in Minneapolis. I do custom word press development. Used to be a freelance website developer, and I've also been a stay-at-home mom, an information technology director, and worked in geographic information systems. So this is kind of like my third career. So a lot of what I talk about uses the plug-in gravity forms. There are 1 million different plug-in, different form plug-ins, and I'm not really here to have a debate on which one is the best. They all are pretty similar, and I'll do a lot of similar things. I personally use gravity forms in every website that I built. I'm very familiar with it, and it has really good documentation. There's a really big community of users if there's something that you want to do, and you think maybe you could do it with a form. Chances are somebody else has done it. They've written some code for it, and they've posted it in a knowledge base. So OK, so now we're just going to get started. Conditional logic is something that sounds complicated, but it's a really very simple concept. If you tell somebody that you're going to build them a form with conditional logic, they will instantly hand you twice as much money. So it's a good thing to know. So basically, like I said, I'm going to start at the very beginning. Conditional logic basically means that you want different things to happen under different circumstances. So we are at a word camp. Everybody loves swag at work camp. So here's my example. If I wanted to give you some swag from icebergs, of course, we put a penguin on everything. How am I going to know what to give you? If you're a beer drinker, I might give you a bottle opener. But if you're not a beer drinker, I'm not going to give you a bottle opener. So if you happen to be addicted to LaCroix, I'm going to give you a canned koozie. So I would need to know what your favorite drink is, and then I would respond differently, depending on what that answer is. So that's kind of how to think about it when you're working with forms. When you use conditional logic, it just means that you want something different to happen depending on what information they're giving you in the form. So I actually made a form for this. So here is my first question. What is your preferred beverage? So it has a radio checkbox for I like to drink beer from a bottle or I like to drink LaCroix. So how would we actually go into gravity forms and make something different happen depending on which answer they select here? In gravity forms, after the general tap, there is an appearance and advanced. So in advanced, you can check the box to enable the conditional logic. And then it's just kind of plain English, so it will walk you through the steps. So I want to show my field, so I made my question field, and now I have whatever information I want to display. And so I want to show the field if the following condition is met. So what is your preferred beverage, beer from a bottle? That's the first answer that they could select. So if they select that, then show the contents of this HTML block. Let's see an example. So this information down here is in my HTML block. And so I'm telling gravity forms to show this HTML block if this is the thing that's selected. So let's talk about a real life example of when we did this. So we always have consultations with our customers and talk about their processes and maybe ways that we could improve things for them. And so this is a customer that we had that is like a shipping broker. So they match truck drivers with people who have loads that need to be delivered. And so they originally came to us and they just, hey, we're new business. We need a website to prove that we exist. But we sat down and started talking to them about how they work and their processes and found out that they were having a problem where they have a registration form that's a PDF-based form and they want to make all of the fields required, but not necessarily all the time. But the times when they do need to be required, they really need to be required. So for example, if you're applying to work with them and you use a factoring company, they need to know the name and address of your factoring company. So that needs to be a required field. But if you don't use a factoring company, you don't need to fill out that field, right? So they were having all kinds of problems with their fillable PDF of making fields required or if they didn't make them required, then they weren't getting information that they needed. And so I said, well, I can make you a conditional logic form for that. And they instantly handed us twice as much money. And so for this example, it's a similar kind of thing where you answer the question on factoring, does your company use a factoring company? And if you say yes, these fields show up and they're required. But if you say no, the fields don't even show up. So the fact that they're required doesn't matter. Another example of conditional logic is another form I built for a company who wanted kind of like a help contact us, like a help us kind of thing where they're really, really their customers would end up doing four different things. And they had a huge like, if they answer this, they had like a flow chart for me. If they answered this, then we want this to happen. You know, I kind of said, well, it seems like really you just have four different areas and you want four different forms to show up depending on the thing that they need help with. And so I made this form for them where it starts out with just a call to action. What can we help you with today? And then depending on which button they select, the rest of the form shows up. And so the beginning of this form is just regular radio buttons. And I just CSS the shit out of it and hid the little radios and threw in some awesome icons and made them turn colors when you select them. And it actually looks really cool and works really the way that they wanted to. So we're gonna talk about conditional logic a lot in some of the other examples, but I'm gonna move on to another thing that I do a lot in websites. And this is passing variables from one form to another. So with some of our websites designs, we may have a homepage that has a tiny little call to action or a tiny little form that says request a quote or for this case, this is a Montessori school. So this tiny little form says, oh hey, schedule your visit. And they see three simple fields, no problem, I do wanna schedule a visit. And so they fill that out and then we suck them into the longer form that they may not have filled out if they saw how long it was. But we don't want them to re-enter the things that they've already entered on the short form. So we're gonna pre-populate the second form with the data that they entered in the short form. So you can see this little penguin person that entered the form data. Their data automatically got populated into the second form. So how do you do that? You do that by passing variables. So typically when you would fill out a form, when you click submit, there's just text that returns that says thank you for filling out the form. Well with gravity forms, you can control what you want to happen when your form is submitted. And so in the settings, you can use different options for the confirmation. So the confirmation that they've successfully filled out the form, what do you want to happen? In this case, we don't wanna show them any text. We don't wanna thank them for filling out the form. We want to redirect them somewhere else. And we wanna bring some data with that redirection. So we click the option for redirect and then we have a URL. So the URL is where the longer form lives. And then we're gonna pass some data via a query stream. So first you would make your short form and then you're just gonna assign some variables. You can name the variables anything that you want. It's always a good practice to use self-documenting code and you do something that makes sense. So for this example, I have two fields. Name one, which is first name and name two, which is last name. So I'm calling these variables name one and name two. And then I'm gonna set the variable equal to a field from my short form. And so you can just select the field from the little dropdown. And this query string is gonna pass this data with it into the URL. In the longer form, what you would do is set up your fields that are gonna be able to accept data to them and then put in the name of the variable that you selected. So if you had called them first name or last name, in the second form, you're just saying allow the first name to be populated by any value that is set to name one. Here's another kind of little bit more complicated example of this. So this organization is the Minneapolis Police Activities League and they run sports programs for kids in the neighborhood. They run football, T-ball, basketball. They have a brain and body camp. But they only want one form for all of the different programs. But baseball doesn't go in the winter and hockey doesn't go in the summer. So they were getting all kinds of people that were registering for a program or saying that they wanted to do a program that wasn't in season. So they wanted kind of a simple way to open registration for some sports, close registration for other sports, but not have to have a different form or do a lot of work, switching out content on their website. So I made a little first form. It's just a one field form that selects the program that they're interested in and then there's some conditional logic that displays depending on what they select and then it brings them to the longer form. So if you select golf, it's gonna say registration is closed right now. If you select football, it's gonna say, oh, registration for that is open and here's your register button. And then when you click the register button, you lead to the second form and the program that you're interested in is already selected. On the registration form, if you just go to the registration form without following the short lead-in, if you select one of the sports that you can't register for, the submit button doesn't even show up and says this form, this sport isn't available right now. So this form was created the same way. This short form has a valuable called sport that they register to and then that variable is passed to the longer form. You can also pass a variable by just simply including the variable in your URL. This customer again had kind of a unique situation, always starts with sitting down and talking through their process and they are attorneys and they are gonna have profile for each of their attorneys online. Okay, great. Do you want contact information on your profile? Do you want direct telephone line email address? And they said, yes, we want email address listed. We want them to be able to email us. And then they said, no, we don't want email listed. We don't want them to be able to email us. What they didn't want is they didn't want people accessing their individual emails. They wanted to have control over whether or not they were gonna interact via email with our particular potential client. And so we created a simple just email button and then that is passing a variable into the form. So we created the form where you can select who it is that you wanna email and then there's conditional logic on the backside of the form, routing it to the right person. And then for the profile, when you select email Ellen, you don't see her email address. You're just brought to the form. Her name's already selected and then when you submit it, it routes to her. So how do we get the URL that says email Ellen to pass the information with it of who is gonna email? Well, you simply do that in the URL. So here's my WordPress content editor and normally for a URL, for a link, I would have an href and then just the address of the page I wanted to bring them to. Well, all I have to do is on the end of the URL, a question mark and then a variable and then a value for the variable. So I'm assigning a variable of send message to and then I want it to be Ellen. In my form that I'm passing this data to, when I have the radio button of the different or the dropdown of the different people they can select, I can also give a value to those. So with Gravity Forms, you can choose to enable values or not enable values. If you just have a form with some radio buttons and you don't necessarily need a value, you can always leave this off. But if you want to give a value to these different choices, you can give it a value. So in order to email Ellen, I need to pass this value of Ellen. So the URL that you're leading them to is the contact us URL where the form lives and then send message to and then this value is Ellen. This is an example or this is showing the conditional logic for the form once it's submitted. So these are form notifications. And so you can set conditional logic up in the form notifications, similar to how you can show or hide different fields based on what the answers are to questions with conditional logic. You can send messages to people and then have some parameters that they have to meet in order to send those message. So we're only gonna send messages to Jackie if the selection is selected Jackie. Dynamic surveys. Here's another example of ways to use forms to kind of display data. So for this form, what the customer wanted was a survey. Okay, so first I'm thinking, all right, okay, survey. Question, each question has points out of all the points when you're done, here's your results. Nope, that's not what they wanted. What they had were 30 questions on their survey that were measuring things over seven different domains. And each question might be weighted a little bit differently. And so once they fill out the survey and they have these weights for their questions, they're gonna get a score and then we wanna compare their score to an industry standard and tell them what their score was and then tell them how they compare to the industry standard. And if they don't match the industry standard, if they're below industry standards, then we wanna try to sell them our services because these are consulting services. So for each of the answers in the survey questions, we, instead of assigning maybe a text value like we did for the email addresses, we're assigning a number value. And so for these, the values are pretty small. That way we can double them and then do some math with them to kind of account for like the different, the weighting and then averaging over the domain. So each answer strongly agree, disagree, neither agree, agree, has a value over here, okay? So a point zero one, a point zero two, point zero three, point zero four, point zero five. So if we double them, it's point zero two, point zero four, point zero six, et cetera. Okay, so now we do the fun stuff. So now we do some math. So in order to add up these values, all we really need to do is, all we need is a place where we can do math and then somewhere where we can store this value. So one of the reasons I like gravity forms and one of the reasons their documentation is really nice is they have filter hooks that you can hook into. And so you can grab ahold of your data after it's been submitted to gravity forms and you can do stuff with it, manipulate it before it gets then submitted. So this is my functions file and this is my function that I wrote in order to calculate the results of the survey. So the filter hook that I'm using is the G form pre-submission. So that is an existing hook from gravity forms that, like I said, grabs the data before submission. And then we're gonna run this function. And the function is evaluate results, right? Self-documenting code. Okay, so we start with a total of zero and then we're gonna add the value from the input. So the input, the ID number corresponds with the ID number from gravity forms. So each field in gravity forms has an ID and you can see those up here. So this is field ID one. So the input for whatever they select, if they select strongly agree, that's gonna be input one, okay? So we're just starting at zero. We're adding whatever they said here with whatever they said for the next question, with whatever they said for the third question and whatever they said for the fourth question. So those are the four questions for my first domain. Then I'm gonna do some math because I need to account for the waiting. We're gonna round it because we might get some decimal points in there. And so this math was all done like an Excel spreadsheet first to set up the weights of how we're gonna actually measure the results. So I just had a formula that I could copy and paste in here. And then we do it again for the second domain and then on and on until we get to the seventh domain. Okay, so now we're gonna display the results of that data. So once somebody is done filling out this form, they've answered all 30 questions, they see this webpage and it says, these are your results of your survey. So for your rule-making domain, your score was 50. And then here is a graph of that result. So here's your 50, that's your score. And then here's the top performers, they get usually a score of 95. And then here's the median. So you can kind of see really quickly, visually how you measure up against industry standards. And then that was a pretty good lead magnet into then selling a consultation. In order to display the results, the results, we used gravity forms again and you get to say what you wanna happen after the form is submitted. So in this case, we just wanna show them some text. We just want some text to display on the website. And so we're still within gravity forms using the confirmation. And so we still have access to, with this little button here, all of the fields that live inside of our form. And so we can say, all right, their score was whatever I had as the answer for this score in the last one. And then we were able to use just like a plugin that does like a skill bar where you can just put the number in. And so again, for the number, we're just using the values from our form to display on that bar. Okay, so let's make our own survey. Maybe we'll kinda try to keep the math a little more simple. So I'm just gonna have a quick survey on what's your spirit animal, right? So if you're a morning person and you answer, yep, I'm a morning person, you get one point. If you are sometimes that would be two points, rarely three points, and don't talk to me before 11, that's my answer. That would be four points. So in gravity forms, we're gonna assign a value and then we're gonna add these values up. The other thing that we need to do in gravity forms, and I don't know if I have a screenshot of this, is you need a place to put this value, right? That where you've added them all up, you have to store it somewhere. And so the easiest way to do that is just to create another form field that's hidden to the user. So the user doesn't see it and that's just maybe your result would be a good thing to call it. So you just create a field that's a result field and then after you've added your data in the functions file, you put that answer into your results field. So that's this part right here where it says set the score value. The score value is equal to your total here. So when you created your variable to add up your total and you put your input numbers in, then you're just using the same filter hook to insert that total into your last field that the user didn't answer because they couldn't see it. And then here's the example of what maybe your results page would look like. So you have two choices. You could either have only one results page, like we had with the example for the healthcare company, and you could say, oh, if your answer is between zero and five, then your spirit animal is a penguin. If your answer is between five and 10, then your spirit animal is a giraffe. Or you can have conditional logic that says if their answer is between zero and five, I wanna show them this page with a picture of the penguin saying that's what your spirit animal is. Or if their answer was above five, I wanna show them a completely different website, different webpage. Okay, so this is kind of my last cool thing that I like to do with Gravity Forms. And this is an add-on for Gravity Forms. It's called Gravity Forms PDF. And I'm pretty sure it's free, but it allows you to take form data. So normally when you submit a form, whoever gets the confirmation for that form, they usually just get an email that says, oh, somebody filled out your contact form, and this is the information they provided. Well, oftentimes we want to take that information and put it into a different display, make it look really nice with the PDF. For long forms, especially forms that may have like a signature, you might want that all to be bundled up in a nice PDF with the signature field at the bottom that somebody could print or file into a folder. And so this lets you take your form data and put it into a PDF. So we use this for a customer who does an online course. And once you finish the course, you need a certificate. They didn't want to handwrite all the certificates for the people who are taking their course. They wanted this to be more of a thing that you could do on your own. And so what we ended up doing for them is give them a password protected page. And once you finish the course, you get a password for the page. And then it's a really simple form where you just put the name that you want to be on your certificate, and then your email address where the certificate gets mailed to or gets sent to, the course that you finished, and then the date that you finished it. And then when you submit the form, you get the little text message that says congratulations on completing your course. And then what you get emailed to you is a PDF that has their form data in it, but you can style it with CSS or with a background image to make it look like this great little certificate. So here's the same example with the form that we had for the transportation company. They get a PDF form with all of the data and then the signature so that they can file these. Okay, so that was kind of my quick run through. So I can do an online or I can do a live demo if we want to do that or I can just take questions and we can answer questions. Does anybody have any questions? Yeah, do you want to use a microphone so everybody can hear you? Sure. All right, better, yeah. In the form that you had input one, two, and so on, that's obviously that kind of indexing is convenient for the computer, but for a developer or human beings, that does make sense. Is it possible to label them instead of give them a variable name or no under forms? Yeah, so when you have, so let's go back and look at an example. Okay, so when you have a field where there's multiple choices, if you want to use values, you can use either number values or text-based values. So if you want to do something like pass the variable and you want it to have a name so that you can reference it easily, they can be text-based values, that's totally fine. The reason that their number of values is so that we can do math. Okay, so on the certificate, you said you send them a password protected site so that they, URL so that they could create their own certificate. Yes. What happens if they put somebody else's name on the certificate? Yeah, I mean we talked to them, we laid out a number of options and they understand that that is something that can happen. They wanted something that was easy that they didn't have to monitor that where the user could create their own certificate. Yeah, but I don't make business decisions for customers, I make implementation decisions and so if they tell me how they wanted to work, I'll make it work that way but I don't tell them if that's a good idea. You want me to go to the end? Yeah. Yeah, so these slides are at, if you can't read this, it's icebergwebdesign.com slash phonewithforms and that's just a link right to my Google slides. So I have a quick question. Yes. I've never actually seen somebody pass data from one form to another. Yes. So we don't do very complicated forms in our work. I know there's functionality and gravity forms to do step-by-step forms. Yes. Like in what case would you use that versus passing data from another form? Yep, so the reason that I would pass data from a short form to a small form is more of, you know, they're more for like emotional reasons because you want somebody to only answer a little bit of the information and not make such a big commitment at first and then take them to where they have to make the full commitment. Where I would use a multi-page form is something like the Destination Transport website where they're filling out their application to be a driver or a carrier. They've already committed. They know they're gonna work with Destination Transport. I've got them. So I would take a really long form and that one actually is a six-page form and break it up into functional sections. So first I'm gonna collect all the information about the actual driver. Then I'm gonna collect insurance information, upload your insurance certificate. Then we're gonna talk about, you know, the terms of service and use gravity forms to do a multi-step form. So you're going, you know, and then there's a little, I think I might have a picture. Like you can see how far you are in the process, which is really nice. Yep. I didn't grab the whole thing on this page just the top, but. Can you answer correctly? Yep. All right, I think we have about 10 minutes, probably eight now. Yes, what is your question? For your certificate back here. Have you ever worked with like the gift certificate? So you're gonna establish a gift certificate number that's gonna change each time and then include them with a checkout? Yep. So similar, but not exactly the same with the form for the ticket system for the help form. They wanted each form submission to have a unique ID. And so for that, I did have to write a function that assigns the unique ID, but again, I'm using a blank field at the top. That's my reference number. And then in my functions file, I'm writing just a little function that assigns a unique number and that I just grabbed from gravity forms documentation. I probably didn't write it. I'm sure I copied and pasted it. And then putting that in the empty form field so that when they, it's not something that they enter, but when they get their email that says thank you for filling out your form, they have a reference number and it's gonna be unique. So they can just call and say, my reference number is, you know, yep. Anybody have any other questions? So gravity forms takes file uploads? Yes. Since gravity forms takes file uploads, how do you restrict which file or form that you can take? Just type them in. There's a field that says restrict to what formats and you say .pdf.ping and that's it. I love gravity forms too. I noticed that you're loading in contact form seven as well. Is there a feature that you're using that for? Nope, by default, the theme that I use brings in contact form seven by default. And so I usually just kind of have that out of the box, but I hardly ever use it. Let's see, I think I have a picture. Yeah. Okay, cool, perfect. Yep, I use that one a lot. No, the times when I've used gravity PDF, I basically want an external snapshot of the data that's not living inside of an email message. And so if formatting is an issue, there's templates that you can use when gravity PDF comes with some templates and so you can use one of their templates or you can, you know, CSS magic. So it looks nice. For the certificate, it's just a background image and then you're just putting in, but I've never had an issue where the PDF isn't grabbing some of the data. Whatever I would say can go through, it would go through. Yeah, if they're doing like a file upload, yeah, actually that's a good question. In this format here, they're doing a file upload because they need a picture of their insurance certificate and so gravity PDF, it just gives you a URL link. And so the image lives on your WordPress site and in the PDF, you have a link to it. Not to hijack my wonderful coworker, Carrie, but I'm working with gravity PDF right now to pull in information that wasn't on my gravity form. You can override the template and it's just a PHP file and anything you can do in WordPress, you can do in that template file. So I'm pulling in advanced custom fields based on post IDs and my PDF is quite different than what the form was that was submitted and it's all based on a post ID. So once you get into it, it can do anything you can do in a PHP template. It's very cool. The only problem is the CSS styling for it is PDF styling, so it's not necessarily the same as your standard CSS, so you just have to keep that in mind. Hey guys, hope you have a great rest of your work camp.