How to pre-fill complex fields in Advanced Forms

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.