To create front-end forms for editing content and users using Layouts, follow these steps:

  1. Create the form for editing
  2. Create a layout for displaying the editing form
  3. Insert link to the Content Template that displays the form

Here, we use an example of a form for editing content but the workflow is the same for forms for editing users.

1. Create the form for editing

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.

Creating a form for editing content
Creating a form for editing content

2. Create a layout for displaying the editing form

Go to the Toolset -> Layouts page and click the Add New button at the top.

Give a name to your layout and do not assign it to any content.

Insert a Post Form cell and select the Use an existing Post Form option. Select the editing form you created in the first step and click to create the cell.

A pop-up dialog appears, displaying an editor with your form’s content. Click the Save and Close this form and return to the layout button.

Your editing form is inserted into the layout.

Layout with an editing form inserted
Layout with an editing form inserted

Besides the form itself, you can optionally add any other cells and content this layout. For example, you might add some editing guidelines.

In the last step, you need to insert links to the Content Template that will display the form. There are two places you can insert this link into:

  1. Template layouts used for displaying single posts
  2. Views that list items, like posts or users

When designing templates for displaying single posts, you might want to display a link to edit the post that is being viewed.

Link to edit a single post that is being viewed
Link to edit a single post that is being viewed

Edit the layout for displaying single posts and insert a Visual Editor cell. Click the Fields and Views button.

In the dialog that appears, look under the Forms Editing section and click the Forms edit-post link button.

Inserting the link edit-post link into the layout that displays single posts
Inserting the link edit-post link into the layout that displays single posts

In the dialog that appears, select the layout that displays your editing form.

Selecting the Content Template that displays an editing form
Selecting the Content Template that displays an editing form

That’s it, a shortcode with a link to edit the current post is inserted into the Visual Editor cell. Click the Create button to finish creating the cell with the link to edit the post.

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 on the list.

The following image shows an example of a list of posts with an edit link next to each listed item.

List of custom posts with an editing link for each
List of custom posts with an editing link for each

If you are creating a new View, you can add the editing link using the Loop Wizard.

Using the Loop Wizard to add a post-edit link
Using the Loop Wizard to add a post-edit link

After selecting the post-edit link, click the Edit button next to it.

Editing the options for the selected post-edit link
Editing the options for the selected post-edit link

In the dialog that appears, select the layout that displays your editing form.

 

If you are editing an existing View, you can use the Fields and Views button. In the dialog that appears, look under the Forms Editing section and click the Forms edit-post link button.

In the dialog that appears, select the layout that displays your editing form.

Displaying the Toolset form messages

If an editing form is configured to redirect users back to the edited post, the success message needs to be added to the template layout displaying that post.

Displaying the Toolset form messages

Using Editing forms to “edit your profile”

You can create forms for editing the profile of the user that is currently logged in. These are the so-called “Edit your profile” forms.

Using Editing forms to “edit your profile”

Need help?

Go to the Getting Started support page, leave a comment and we will reply to you.