{"id":1612095,"date":"2020-05-13T14:23:03","date_gmt":"2020-05-13T14:23:03","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&#038;p=1612095"},"modified":"2021-05-19T06:32:00","modified_gmt":"2021-05-19T06:32:00","slug":"front-end-forms-for-editing-content","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/es\/course-lesson\/front-end-forms-for-editing-content\/","title":{"rendered":"Front-end Forms for Editing Content"},"content":{"rendered":"\n<p>Creating and using front-end forms for editing content and users involves the following three steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Create the form for editing<\/li><li>Create a <a href=\"https:\/\/toolset.com\/glossary\/template\/\">Content Template<\/a> for displaying the editing form<\/li><li>Insert link to the Content Template that displays the form<\/li><\/ol>\n\n\n\n<p>Let\u2019s 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.<\/p>\n\n\n\n<p>For forms that edit users, Toolset Access must be active and the role that uses the form must have permissions to edit other users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-create-the-form-for-editing\">Create the form for editing<\/h2>\n\n\n\n<p>Creating the form for editing is exactly the same as for the forms for adding content (or registering users).<\/p>\n\n\n\n<p>Go to the&nbsp;<strong>Toolset <\/strong>\u2192 <strong>Post Forms&nbsp;<\/strong>page and click the&nbsp;<strong>Add New&nbsp;<\/strong>button at the top. Follow the wizard to create your form.<\/p>\n\n\n\n<p>In the third step, make sure to select that this form will&nbsp;<strong>Edit existing content<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"62456f5d33f005c3e59e6d5757565317\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-forms-edit-content.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-forms-edit-content-500x252.png\" alt=\"Creating a form for editing content\" class=\"wp-image-1382297\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Creating a form for editing content<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"2-create-a-content-template-for-displaying-the-editing-form\">Create a Content Template for displaying the editing form<\/h2>\n\n\n\n<p>Go to the&nbsp;<strong>Toolset <\/strong>\u2192 <strong>Content Templates&nbsp;<\/strong>page and click the&nbsp;<strong>Add New&nbsp;<\/strong>button at the top.<\/p>\n\n\n\n<p>In a dialog that appears, give a name to your template. Don\u2019t assign it to any content and click the&nbsp;<strong>Create Content Template&nbsp;<\/strong>button.<\/p>\n\n\n\n<p>On the Content Template editing page, insert the&nbsp;<strong>Toolset Form<\/strong>&nbsp;block and select the editing form you created in the previous step.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"763eebf2a2bcb419c534a1eb80716b74\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-forms-edit-content-2-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-forms-edit-content-2-1-500x244.png\" alt=\"Inserting the editing form into the Content Template\" class=\"wp-image-1382325\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Inserting the editing form into the Content Template<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-insert-link-to-the-content-template-that-displays-the-form\">Insert link to the Content Template that displays the form<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>There are two places you can insert this link into:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Content Templates for displaying single posts<\/li><li>Views that list items, like posts or users<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"adding-an-edit-link-to-templates-that-display-single-items\">Adding an edit link to templates that display single items<\/h3>\n\n\n\n<p>When designing templates for displaying single posts, you might want to display a link to edit the post that is being viewed.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"6578f22ac09d30ccf80855afb8b4ace5\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-forms-edit-content-3.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-forms-edit-content-3-500x381.png\" alt=\"Link to edit a single post that is being viewed\" class=\"wp-image-1382813\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Link to edit a single post that is being viewed<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>Edit the Content Template for displaying single posts and insert the Toolset&nbsp;<strong>Fields and Text&nbsp;<\/strong>block.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"4d30517ff9a30c50293407f4a85c1fb6\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-fields-and-text.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-fields-and-text-500x295.png\" alt=\"Insert Fields and text block\" class=\"wp-image-1382959\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Insert the &#8220;Fields and Text&#8221; block<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>The&nbsp;<strong>Fields and Text&nbsp;<\/strong>block editor will appear. Click the&nbsp;<strong>Forms&nbsp;<\/strong>button inside this editor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"62354634c61ddad3c996555067384429\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/forms-button-4.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/forms-button-4-500x204.png\" alt=\"Forms button\" class=\"wp-image-1383041\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Forms button<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>In the dialog that appears, look under the&nbsp;<strong>Other Toolset Forms actions<\/strong>section and click the&nbsp;<strong>Edit post link<\/strong>&nbsp;button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"fa1285a3aa840f9fe9f5c0997f1295bc\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/forms-button-2.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/forms-button-2-500x194.png\" alt=\"Inserting the edit-post link into the Content Template that displays single posts\" class=\"wp-image-1382903\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Inserting the edit-post link into the Content Template that displays single posts<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>In the dialog that appears, select the Content Template that displays your editing form. Click the&nbsp;<strong>Insert shortcode&nbsp;<\/strong>button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"0de9dcc2f6932255d2d716dab7b74d6c\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-forms-editing-content-6-new.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-forms-editing-content-6-new-500x251.png\" alt=\"Selecting the Content Template that displays an editing form\" class=\"wp-image-1382503\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Selecting the Content Template that displays an editing form<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>That\u2019s it, a link to edit the current post will now display on your single posts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding an edit link to a list of items<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>The following image shows an example of a list of posts with an edit link next to each listed item.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"c8bfe89f3b5ff9b1562fd1c5e057238e\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-forms-edit-content-7.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/toolset-forms-edit-content-7-500x396.png\" alt=\"List of custom posts with an editing link for each\" class=\"wp-image-1382883\"\/><\/a><div class=\"tb-image-caption\"><figcaption>A list of custom posts with an editing link for each<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>To insert the link to edit listed posts, start by editing that View.<\/p>\n\n\n\n<p>Insert the <strong>Fields and Text <\/strong>block in the place where you want to add the edit link.<\/p>\n\n\n\n<p>The <strong>Fields and Text&nbsp;<\/strong>block editor will appear. Click the&nbsp;<strong>Forms&nbsp;<\/strong>button inside this editor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"935ce185a821a4e3537364e9ad32ce64\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/forms-button.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/forms-button-500x317.png\" alt=\"Forms button\" class=\"wp-image-1382865\"\/><\/a><div class=\"tb-image-caption\"><figcaption>The Forms button in the &#8220;Fields and Text&#8221; block<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>In the dialog that appears, look under the <strong>Other Toolset Forms actions<\/strong> section and click the <strong>Edit post link<\/strong> button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"ca2a70bb8b5b10a257ecbac1be8520a4\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/forms-button-2.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/forms-button-2-500x194.png\" alt=\"Inserting the edit-post link into the Content Template that displays single posts\" class=\"wp-image-1382903\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Inserting the edit-post link into the Content Template that displays single posts<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>In the dialog that appears, select the Content Template that displays your editing form. Click the&nbsp;<strong>Insert shortcode&nbsp;<\/strong>button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"dfda339c20f06e9d39f4039d0e4bfdc0\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2018\/12\/toolset-forms-editing-content-6-new.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2018\/12\/toolset-forms-editing-content-6-new-500x285.png\" alt=\"Selecting the Content Template that displays an editing form\" class=\"wp-image-1169664\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Selecting the Content Template that displays an editing form<br><\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>That\u2019s it, a link to edit the post will now appear for each post listed by the View.<\/p>\n","protected":false},"author":4341,"featured_media":1666959,"template":"","related-lesson":[8429],"class_list":["post-1612095","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-post-forms"],"_links":{"self":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1612095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/users\/4341"}],"version-history":[{"count":2,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1612095\/revisions"}],"predecessor-version":[{"id":2060885,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1612095\/revisions\/2060885"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media\/1666959"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media?parent=1612095"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/related-lesson?post=1612095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}