Simple Entry Editing With Caldera Forms

Caldera Forms Editable Entry Example Editing
Caldera Forms Editable Entry Example Error
This tutorial makes use of the “entry_token”. This token ensures no one can edit other people’s entries, unless they have the right permissions.

With our Connected Forms add-on, you can create sequences of forms, complete with partial submission tracking. For simple, one step forms, that allow for updating the saved values. Keep in mind, only the user who submitted the form will be able to edit their entry.

With Caldera Forms 1.5.8 or later, this is easy to setup from the form editor. Let’s walk through how this works. If you want to see the end result in action, check it out on our demo site.

Add A Redirect Processor

Setting up a form redirect with Caldera FormsAfter the form is submitted, we’re going to want to reload the page with the form in “edit mode.” Let’s do the redirect first.

In your form, go to the Processors tab and click the Add Processor but. Select a Redirect Processor. Set the redirect URL to be the same as the URL of the form.

If you save your form now, you will see that it redirects to the same page, but it’s starting a fresh new entry, not acting as an editor for the entry. Let’s fix that in the next step.

Adding Passback Variables

Setting up passback variables in Caldera FormsCaldera Forms has three types of variables you can add in the Variables tab. Passback variables are added as query arguments to the URL when doing redirects. That’s useful here as we need to pass an entry token and entry ID as query arguments when the form is reloaded to make this work.

In the variables tab, click the Add Variable button. You will need to add to variables.

For the first variable  use “cf_et” as the name. For the value, use the magic tag {entry_token} and set the type to be “Passback”. This will pass the entry token to the next page.

For the second variable use “cf_ee” as the name. For the value, use the magic tag {entry_id} and set the type to be “Passback”. This will pass the entry ID that corresponds to the token.

Now save the form. Then go to the page with the form on it and submit the form. It should redirect to the same page, with the query variables “cf_et” and “cf_ee” added to the end of the URL and you should be able to edit the entry.

That’s It

That’s all you need for an editable form. But we can make it a bit cooler and easier to understand for your users.

Adding An Edit Message

Caldera Forms Editable Form Entry HTML Field Setup
Step 1: Add an HTML field with your edit message.

I think to improve the user experience, it’s helpful to add a message when the entry is being edited. For this we can add an HTML field that is hidden using conditional logic based on the query arguments set with the passback variables.

First, add a message that the form is being editted an HTML field. I used the HTML for a Bootstrap info alert, as I knew that it would look right in the front-end since Caldera Forms, by default, adds styles for that.

Step 2: Add a hidden field to capture cf_ee query var

Then add a new hidden field to the form. For it’s value, use the magic tag {get:cf_ee} this will set the ID of the entry being edited in the field. Then we can do conditional logic based on if that field is empty or not.



Caldera Forms Editable Form Entry Conditional Logic Setup
Step 3: Create a conditional rule to hide message if hidden field is empty

See The Demo

Edit Token Example