In this tutorial you will learn how to create front-end forms for content editing.

We will build a form for editing ads. Once created, the form will be available for use on a single ad page, and you can access it by clicking on the Edit button.

We will build a form for editing ads. Once created, the form will be available for use on a single ad page, and you can access it by clicking on the Edit link.

Your form will be available in single Ad pages after the Edit link
Your form will be available in single Ad pages after the Edit link

Form for editing Ad posts
Form for editing Ad posts

Step 1: Creating a CRED form for editing

Firstly, we will create a CRED form for editing ads. Ads are posts based on the Ads Custom Post Type.

Drawing a full-width cell
Drawing a full-width cell

In your training site:

  1. Go to Layouts -> Add new.
  2. Give it a name, e.g., Edit ad.
  3. Draw a full-width cell.

Selecting the CRED Post Form cell
Selecting the CRED Post Form cell

  1. In the dialog that opens, choose CRED Post Form and insert the cell.

Setting up the CRED Post Form cell
Setting up the CRED Post Form cell

  1. On the “Create new CRED Post Form cell” screen:
    • Make sure the Create a new CRED Post Form option is selected.
    • In the This form will field, select Edit content.
    • In the Content type field, select Ads.
    • Click Create Cell.

Creating the Post Form
Creating the Post Form

The Edit CRED Post Form screen opens.

  1. Give your form a name, e.g., Edit ad
  2. In the Settings section:
    • For Status of content created or edited by this form, select Keep original status.
    • For After visitors submit this form, select Display the post.

Form content
Form content

  1. Scroll the screen down to the Content section.

The default markup for rendering the form has already been created.

Hint: You can always delete the entire content and auto-generate it again, using the Auto-Generate Form button.

For the time being, let’s save our form as it is. We will make some edits later.

  1. Click Save and Close this form and return to the layout.

CRED Post Form cell in the layout
CRED Post Form cell in the layout

  1. Click Save to save your layout.

Your layout now includes the CRED form cell.

Step 2: Previewing the layout with the edit form

You cannot preview a layout until it’s assigned to at least one post. Because our form will be available as an Edit link, it will never be assigned to any posts.

To test your form in the layout preview mode, you need to create a test ad and assign our Edit ad layout to this test post only.

Assigning a layout
Assigning a layout

  1. In your Edit ad layout, click on the “Change how this layout is used” button.

Assigning a layouts- selecting a post
Assigning a layouts- selecting a post

The “Assign to content” dialog opens.

  1. In the Individual pages section:
    1. Click Show all content types.
    2. Switch to the Search tab.
    3. In the Search field, start typing the title of the post that you want to use for testing.
    4. Press Update to save your changes.

Now any edits you make in your form content can be previewed by using the Preview layout button.

Customizing the form content
Customizing the form content

Feel free to customize your form content. For example:

Delete the [cred_field field=’ad-category_add_new’ taxonomy=’ad-category’ type=’add_new’] shortcode for adding new categories.
Change the label of the form button from Submit (default) to Save.

Hint: Check the Part 2 – customizing the form tutorial to see which other changes can make your form for editing ads consistent with the form for adding ads.

Your form for editing ads is ready.

To reach the content-editing forms, users need to click on “edit” links. Clicking that link should open your form for editing ads.

A single ad page with the Edit link
A single ad page with the Edit link

You need to insert the edit link wherever it is actually needed by users. In our case, these are single ad pages (see an example above). These pages are rendered by a template layout called Single Ad. That’s why we will add the edit link to the Single Ad layout.

Single ad layout into which we will add the Edit link
Single ad layout into which we will add the Edit link

Inserting the edit form link
Inserting the edit form link

To insert the Edit link:

  1. Go to Toolset -> Layouts.
  2. Locate the Single Ad layout and open it for editing.
  3. Click on the plus icon to add a new row.
  4. Choose the Visual Editor cell.
  5. Click Fields and Views.
  6. Locate the CRED edit-post link button and click on it to insert the Edit link.

Selecting a layout
Selecting a layout

The CRED edit-post link screen opens

  1. Click on the Using this layout – required dropdown.

Here you see all layouts that include CRED forms for editing posts.

  1. Choose the Edit ad layout. That’s the layout we created in Step 1.

Customizing the edit link
Customizing the edit link

  1. Scroll the screen down to reach the Link text field.
  2. Edit the Link text field to remove the %%POST_TITLE%% attribute that displays the full name of the post that will be edited. We just want to display “Edit” and nothing else.
  3. Click Insert shortcode.

Edit link shortcode
Edit link shortcode

Your Edit link has been added as the following shortcode:

[toolset-edit-post-link layout_slug=”edit-ad”]Edit[/toolset-edit-post-link]

  1. Click Create.

Grab the upper edge of the row and drag it up to become the first row in your layout.
Grab the upper edge of the row and drag it up to become the first row in your layout.

A cell with the Edit link has been added. Now, let’s move that row up to make it appear first.

  1. Grab the upper edge of the row and drag it up to become the first row in your layout.
  2. Click Preview Layout.

You should see the Edit link now.

  1. Save your layout.

Similarly, you can add editing links to lists of items that you create with Views. Check Part 9 for details.

Step 4: Adding a message that displays after successful submission

If you click your Edit link and test your form, you will notice that no message displays after your changes have been successfully applied.

Let’s add a shortcode to our layout that displays a message indicating successful operation.

Adding a message that displays after successful submission
Adding a message that displays after successful submission

On the Single Ad layout edit screen:

  1. Click on the plus icon below your first row to add a new row.
  2. Draw a full-width cell.
  3. Choose the Visual Editor cell and insert it.
  4. Click Fields and Views.
  5. Locate the Create Form Message and click on it to insert it

Inserting a message as a shortcode
Inserting a message as a shortcode

The CRED form message dialog opens.

  1. Click Insert shortcode.

The [cred-form-message] shortcode has been inserted into your cell.

On success, the shortcode will display “Post Saved”.

Cusomizing the message
Cusomizing the message

Hint

You can customize this message in the Messages section in your form for editing ads (the Edit Ad form you created in Step 1). Refer to the screenshot.

In our case, we changed the message to “Your changes have been saved”.

Cell with the message
Cell with the message

Your Single Ad layout should now include a new row with the [cred-form-message] shortcode.

Move it up to make it the first row of your layout.

Pick an ad and edit it on the front-end. Saving changes should result in the following message:

Message on the front-end
Message on the front-end

Your form for editing Ads is ready.

Who can edit your forms

Please note that you can access and edit your form because you are able to login as the site administrator. Can random visitors perform editing functions?

Often, you will need to limit access to the editing functionality to specific users only, for example

  • Users who are logged in
  • Users who are logged in and have a specific role
  • Only logged-in users who created the post to be edited (post authors)

To make this happen, firstly you need to provide your users with a possibility to sign up at your site. Then you will need to establish who can access what.

In the next parts of our training, you will learn how Toolset plugins can help you handle user registration, profile editing, and how to set up correct privileges.

Summary

To create forms for editing posts:

  1. Create a layout with the CRED Edit Form cell.
  2. Insert the Edit link into a layout that is used for displaying single pages.
  3. To show a success message, add the shortcode to the layout that displays single pages.
  4. You will also need to restrict access to that form to hide the Edit link and the page with the from users without the correct privileges. Check Part 9 for details.

——-

In the next parts of our training, you will learn how Toolset plugins can help you.

Need help? Questions?

Go to the CRED Course Support page and leave your comment. Agnes, the tutorial’s author, will reply to you.

What’s next

In the next tutorial, you will learn how to create front-end forms for creating user accounts.

Part 6 – Building forms for creating user accounts