With Toolset, you can create front-end forms that allow users to edit existing posts directly from the front-end.
Creating and using front-end forms for editing content and users involves the following three steps:
- Create the form for editing
- Create a Content Template for displaying the editing form
- Insert link to the Content Template that displays the form
Let’s go over each of these steps one by one. On this page, we use an example of a form for editing content but the workflow is the same for forms that edit users.
For forms that edit users, Toolset Access must be active and the role that uses the form must have permissions to edit other users.
Create the form for editing
Creating the form for editing is exactly the same as for the forms for adding content (or registering users).
Go to the Toolset → Post Forms page and click the Add New button at the top. Follow the wizard to create your form.
In the third step, make sure to select that this form will Edit existing content.
Create a Content Template for displaying the editing form
Go to the Toolset → Content Templates page and click the Add New button at the top.
In a dialog that appears, give a name to your template. Don’t assign it to any content and click the Create Content Template button.
On the Content Template editing page, insert the Toolset Form block and select the editing form you created in the previous step.
Besides the form itself, you can optionally add any text and other content to this Content Template. For example, you might add some editing guidelines.
Insert link to the Content Template that displays the form
Finally, in this last step, you need to insert links to the Content Template that displays the editing form. This is the Content Template you created in the previous step.
There are two places you can insert this link into:
- Content Templates for displaying single posts
- Views that list items, like posts or users
Adding an edit link to templates that display single items
When designing templates for displaying single posts, you might want to display a link to edit the post that is being viewed.
Edit the Content Template for displaying single posts and insert the Toolset Fields and Text block.
The Fields and Text block editor will appear. Click the Forms button inside this editor.
In the dialog that appears, look under the Other Toolset Forms actionssection and click the Edit post link button.
In the dialog that appears, select the Content Template that displays your editing form. Click the Insert shortcode button.
That’s it, a link to edit the current post will now display on your single posts.
Adding an edit link to a list of items
When you have Views that list items, like posts, for example, you might want to allow users with the right permission to edit each of the items in the list.
The following image shows an example of a list of posts with an edit link next to each listed item.
To insert the link to edit listed posts, start by editing that View.
Insert the Fields and Text block in the place where you want to add the edit link.
The Fields and Text block editor will appear. Click the Forms button inside this editor.
In the dialog that appears, look under the Other Toolset Forms actions section and click the Edit post link button.
In the dialog that appears, select the Content Template that displays your editing form. Click the Insert shortcode button.
That’s it, a link to edit the post will now appear for each post listed by the View.
Display form elements side by side
You can arrange form elements in columns by drag and dropping them next to each other.
However, Bootstrap must be enabled on your website for this to work. This is because Toolset forms use Bootstrap’s responsive grid system.
Your site should have Bootstrap enabled by default. If you aren’t able to drag-and-drop form elements next to each other, go to the Toolset → Settings page and find the Bootstrap loading section. There, make sure that the Toolset should load Bootstrap option is selected. You can select between Bootstrap version 3 and 4.
Once your site is loading Bootstrap you will be able to arrange form elements next to each other.
Control Access to Front-End Forms
Your site’s users shouldn’t be able to edit other people’s posts but only their own. Toolset allows you to easily set which posts can different types of users edit using forms.
For more details and a video about this, visit the lesson about controlling access to forms.
Style the editing form
Toolset forms look good and are responsive out-of-the-box. However, you might want to adjust their style to fit your website design even more.
Check out the detailed lesson to learn how to style Toolset forms.
Formularios para el envío de contenido y edición en la interfaz de usuario
Related topics
- Using WooCommerce Fields in Product Forms
- Selecting Parent Posts when Using Forms to Create Child Items
- Displaying Form Data
- Allow users to manage their items
- Charge users for submitting content
- Extending Form Functionality with Hooks
- Styling Front-End Forms
- Setting up Automatic Post Expiration
- Controlling Access to Front-End Forms
- Adding Generic Fields to Forms
- Send Notifications when Someone Submits the Form
- Deleting Content from The Front-End
- Front-end Forms for Adding Content
- Using the Native Media Manager in Front-End Forms
- Protecting Forms from Spam
- Front-end Forms For Repeatable Field Groups
- Selecting allowed tags in front-end forms
- Letting Forms Edit Post and User Fields Created by Other Plugins
- Conditional Display for Form Inputs