PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How I've Built an Editing Form

  1. theslink2000

    I recently wanted to use Gravity Forms to load previously captured data and allow it to be edited and re-saved to the database. But after a lot of reading on the support forums I couldn't find any more than a few clues and vague pointers so after a fair bit of work I've got it working (mostly, this is still a work in progress, but more on that as we go). So in response to my conversation with Admin Chris in this thread:

    Here is what I've done and how, step by step.

    If you just want the code, please see here:

    Shortcode to load form -
    Dynamically populate form field with existing data -
    Update database with new value -

    Firstly to set the scene I'm implementing this in quite a particular way but the basics should work with anything. I'm using the Types and Views plugins along with the Custom Post Fields plugin for Gravity Forms. I've used Types to create a custom post type (the one featured here is called Surgery) and it is displayed with a View, if you want to understand more about this please look them up but it is irrelevant to the rest of this post.

    The first thing I did was dynamically populate the "editing" form with the data to edit. On my site the information is displayed and there is a button next to it which is clicked to load the edit form and this was done using a manually written shortcode: You should also note there is a part of this code that adds "bar=no" to the url, this is part of another function by Yoast that prevents the Wordpress admin bar from loading on this page. The main bits we're interested in are:

    1. The Wordpress function "add_shortcode" which the first parameter names the shortcode and the second is the function name. So this code produces the shortcode [editphone].

    2. Create the function corresponding to the add_shortcode

    3. Set the page url of the editing form to the variable $edit_address

    4. Pass the dynamically populating parameter the current post id to the $surgery_parent variable. If you are not using the "bar=no" bit you need to start this parameter with a ? not an &. This is because the ? denotes the end of the url and start of parameters and the & shows the break between parameters. So "original_post_id" is the parameter and "get_the_ID()" is a Wordpress function that returns the current item id, in this case the post we're viewing.

    5. The next line just stitches together the first few variables to form the complete url.

    6. Next I outline some classes that the link will have. "iframefancybox2" is not a CSS class a such but is seen by the Fancybox for Wordpress plugin and defines the correct Fancybox to load the form in. This is not important, I simply chose to use an iframe, you don't have to. "small-button" is simply styling for the link.

    7. Finally put it all together into a complete link and return it and there we go, one working shortcode that passes the post id to a form.

    Now I know I've prattled on for while and got no where near editing, however I have found these forums don't often go into enough detail as most of the users are very familiar with GForms, Wordpress and PHP so I want to break this down for those who, like me a few months ago, felt totally lost.

    Posted 10 years ago on Wednesday August 15, 2012 | Permalink
  2. theslink2000

    Right, now we have the link to load the form, make one in Gravity Forms. In this example we are updating the phone number, a single field so we need two fields on our form, and for arguments sake field one will be "Original Post ID" and field two "Phone Number". Field one should have "Allow Field to be Dynamically Populated" ticked and "original_post_id" entered as the parameter, as this was the name of the parameter we passed in the url from the shortcode. I also give this field a style that sets it to "display: none;" so it hides it from the user.

    Now the next thing we need to do is load the phone number currently stored for our post. I did this with this code here: This is a bit more complicated and the three functions enclosed here are separated so the first one can be duplicated for each new field we want to populate, the other two work dynamically.

    1. "add_filter" to create the hook. It's not too clear here but the "gform_field_value_original_phone_number" is setting the parameter you need to enter into the "Allow Field to be Dynamically Populated" of field two, phone number, which would be "original_phone_number". The second parameter of "original_phone_number" is the function name, and doesn't need to be the same, it's just me keeping it simple for myself here so sorry if it confuses.

    2. The function "original_phone_number" is the one we just hooked and is called by our form when it loads. This is where we start.

    3. Store the post id in a variable. Using "$_GET['original_post_id']" we can pull the value passed to the "original_post_id" parameter in the query string.

    4. Now this is the part of the database field that holds our value. Because I am using Types I have named my field "wpcf-surgery-phone-number" for the surgery phone number. Because I will also have patient phone numbers etc they will be stored as "wpcf-patient-phone-number", so here I've set the constant part of that name to make the code as reusable as possible.

    5. Pass these variables to the next function and then set the result to the return variable.

    6. The second function takes the variables and then passes the post id to "get_post_type" Wordpress function, which returns the type of post, in this case "surgery". The reason I've done this is because the second part of my field name will always be the post type, so I need it to dynamically build a complete field name. You may well not so pick this apart as you need it!

    7. This line adds the prefix to the collected data to form a complete field name "wpcf-surgery-phone-number".

    8. Now we know the post id and the name of the field we can see what's stored in it. The "find_post_data" function does just this. The parameters it needs should be fairly obvious but just in case they're the post id, the name of the database field, and the "true" means return a specific string, not a general array so this is important.

    9. This function takes all the information we just assembled and compares it to what is stored in the global $post variable via the "get_post_meta" Wordpress function.

    This will all return the current value stored in the database field "wpcf-surgery-phone-number" for our current post.

    Posted 10 years ago on Wednesday August 15, 2012 | Permalink
  3. theslink2000

    Now we just return the new value via this code: This is much simpler code but still requires a little explanation.

    1. "add_action" uses the "gform_after_submission_9" hook, not the specified form number at the end, this needs to be the editing form otherwise it will run on every form submitted and obviously won't work most times. The second bit, as always is the function name and I honestly don't know what the 10, 2 bit is about but they seem to be required for some hooks so there we go.

    2. It's important the this function be passed the global $entry variable as it stores all submitted data so we can access what we need.

    3. Using the "update_post_meta" Wordpress function we can change the value stored in a specific database field. Here we pass it it's three parameters, first the post id, which you will remember we dynamically populated into field one on the form via the query string from the shortcode at the very beginning. So as we are working from the $entry variable we can specify the value stored in a field by saying "$entry[field number]" and here we tell it to look at field one for the post id. The second parameter is the field to update, nothing dynamic this time just manually setting the field name. Third we direct it to the data to store so the UPDATED information that the user will have entered on the form and seeing as our form only had two fields it will be field two.

    That should do it! This should take the value you entered and update it.

    There's a little more to my setup to make it work. Firstly the editing form must be saved on it's own page so the shortcode link will work.

    If you want the iframe to load that will require setting up too, but I'm not going into that here. Also if you want the iframe to confirm or close then that's also extra stuff not covered here.

    So there we go, a lot of information I know and apologies to those of you that find this and would have just understood the code but I want to try to help everyone.

    The quick version:

    Pass post id to form via shortcode,
    Populate form from post data based on shortcode,
    Update post meta based on new entry.

    Please note this is still a work in progress and is far from perfect but it is working for plain text fields.

    If you've got any ideas, suggestions or questions, I'll be monitoring this thread and I'd love to hear what you've got to say.

    I hope it helps people!

    Posted 10 years ago on Wednesday August 15, 2012 | Permalink