Bricksforge Pro Forms – Frontend Forms

Step 1: Accessing the Dashboard and Understanding the Layout

1. Log into Your Dashboard: Start by logging into the dashboard of your content management system.
2. Review Your Pages: Identify the pages you have created. This example has two pages: a post list and an edit post page.

Step 2: Editing the Post List Page

1. Access the Post List Page: Go to the post list page, which you’ll edit.
2. Understand the Structure: Review the structure panel. Typically, it includes a section with a container, a card block set as a loop in a grid format, and elements like images, headings, text, and buttons.
3. Dynamic Data Setup: Ensure that your elements (like images and titles) pull in dynamic data (e.g., featured image, post title).
4. Configuring the Edit Button:
   • Select the button and change the link type to an external URL.
   • Create a custom URL like /edit-post/?ID= to pass the post ID. Use the dynamic data options to add the post ID.

Step 3: Building the Edit Post Page

1. Start with a Blank Page: Open your blank edit post page.
2. Adding Sections and Containers: Add a new section and a container within it.
3. Inserting ProForms Elements:
   • Remove default fields, keeping only the submit button.
   • Add custom fields like text for the post title, rich text for content, a file upload for the featured image, and a checkbox wrapper for categories.
   • Use dynamic data to prefill these fields based on the post ID passed in the URL.

Step 4: Configuring the Form

1. Set Up Actions for the Form:
   • Select the Pro Form and navigate to the actions section.
   • Choose “Update Post” as the action after submission.
   • Customize the success message and other action settings as needed.
2. Configuring Each Field:
   • Assign meaningful custom IDs to each field.
   • Use dynamic data to fill the fields based on URL parameters.
   • Use a query loop to display terms like categories for the checkbox wrapper.
   • Ensure the checkbox values reflect the post’s current categories.

Step 5: Finalizing and Testing the Form

1. Add a Hidden Field for Post ID: Insert a hidden form field to hold the post ID, ensuring it’s updated correctly upon submission.
2. Connect Form Elements to Post Attributes: In the Update Post action settings, link each form element (like post title, content, featured image) to the corresponding post attribute using their custom IDs.
3. Test the Form:
   • Save your changes and open a post to edit.
   • Make changes in the form and submit.
   • Verify if the post updates correctly and reflects the changes.

Conclusion

By following these steps, you can effectively create a dynamic post list and an edit post page in your content management system. This setup allows for easy editing and updating of posts, utilizing dynamic data and custom forms. Remember to test thoroughly to ensure all elements are working as expected.