Learn how to pre-fill fields in Advanced Forms in the video. We’ll run through a simple text field example then move onto complex fields using a repeater and a group field to illustrate how to work with ACF’s complex field data structures.
Video Transcript
Hey, it's Phil here from Hookturn and in this video I wanted to show you how you can pre-fill your form values using Advanced Forms Pro. So what you have in front of you right now if you're watching the screen you'll see that we're at the documentation page. And that's for the advanced forms field pre-filled value filter. Okay, so this is a filter you can use within your theme and this is what you can use to pre-populate your field values. So what I've got over here is a form that's got three fields, one's a text field, one's a group field, one's a repeater field. The reason I've got these three specific fields is because we're first gonna look at text field, which is really basic and really simple. And then we're gonna look at two fields that have more complex data structures, which can be a little bit trickier to pre-fill. So I'm gonna show you specifically how to work with complex fields. All right, so here we got the field group that you can see with the text group, our repeater field, we're gonna be using that shortly. Now what we're gonna do is we're gonna just, first thing, we're gonna do is we're gonna target this text field, okay. So we'll come over to our documentation, I'm gonna grab a snippet here, I'm gonna copy it, come over to the editor, I'm gonna paste it in there. All right, so I'm gonna say it's pre-fill. Let's replace that with pre-fill text field. Oops! We'll obviously wanna use prefixes on your implementation, so you don't have any conflicts. But what we'll do is we're gonna use a variation of this filter that allows us to target a specific field by name. So let's get the text field name. So text field name is text underscore field. Yep, text underscore field. And we're gonna leave the demo value there. All right, so I'm gonna save this, I'm gonna reload it. And we're gonna see that the text field is pre-filled. Okay, so this code snippet works really well for simple fields. But now when we move on to the group field, we're gonna run into a little bit of a hurdle in that ACF expects very specific data structures for it to know what to do with it when rendering and ACF form. So I'm gonna show you how to structure that data now. So first I'm gonna do, I'm just gonna copy this snippet again. All right, and I'm just gonna replace this with pre-fill group, field. Now, if I was to just, oh, sorry, we better also change your name here to group field. Let's double check that. Yes, group field. Awesome. All right, so if I would have reload, now, we're not gonna see any data in the group field. And that's because ACF doesn't have the data in the format that it needs. Now with a group field, ACF needs the data delivered to it in a key value array. So might look something like this. So specifically, though, it won't work with field names. This needs to be the actual field key. All right, so what we're gonna do is we're gonna find the keys of the sub fields in this field group. I'm gonna do that using ACF JSON. So I'm gonna copy the name of the field group, come to my JSON directory, gonna find the group we need, open it up, move it off to the side here. And here we go, we've got a group field, and in the sub fields, we've got a text field, which is the first field we wanna target, copying the key, okay, into here. And then the second field is the text area field. So we're gonna get the key for that. Copy that into there. And so what we'll do is we'll say text field value, what we've got, um text area field value, we're gonna save that, we're gonna come to our front end, reload it, and boom, we've got our group fields, pre-populated with the data, of our choice. Okay, so the group fields fairly straightforward. I know it's not entirely convenient to have to grab field keys, so there are ways, like you could write a function that basically takes the field and looks up the field key based on the field name. And I could actually put together a snippet for that, but I'm just gonna stick to this at the moment just so we know what we're talking about here. So, the final field we wanna pre-fill is the repeater field. So I'm gonna just gonna copy this snippet again. (coughs) Excuse me. Okay, so we're gonna replace this function name with repeater field. There we go. And we're gonna also change the name here to the name of the field we're targeting. In this case, it is repeater underscore field, which you can see there already, so it will say, repeater field, hit save. And if I would have reload this now, we're not gonna see anything. So, if I reload this, I will actually technically incorrect. We're gonna see two blank rows, okay. And the reason this is, is because ACF for repeater field, it wants to see an array of arrays, okay. So in this case, we want to grab the data, create a new array inside the array and populate the data, as per the example here. So, and then what you'll have is if you populate in multiple rows, you'll have something that looks like this. But, before we do that, we've gotta reload, we gotta change this field case. Okay, so we're gotta go find our repeater field in here. Here it is. And we're gonna get the sub field keys from that repeater field. So we've got the text field key here. And we've got the text area field key here. Paste those in. Now if I were to, well, let's just reload that now, save that. Reload. And we've got our first row populated. And if you go and create additional rows, okay, so I've got, I'll just say two on the end, and then I hit reload, we'll see that we've now got two rows pre-populated. So that's it, really, that's how you go about pre-populating fields in Advance Forms.
