{"id":42719,"date":"2023-12-13T14:04:05","date_gmt":"2023-12-13T14:04:05","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=42719"},"modified":"2024-01-17T17:08:21","modified_gmt":"2024-01-17T17:08:21","slug":"how-to-allow-users-to-add-portfolio","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-allow-users-to-add-portfolio\/","title":{"rendered":"How to Allow Users to Add Portfolio With the Front-End Form"},"content":{"rendered":"\n

If you want to create a job board website to allow users to find suitable vacancies and publish their resumes, you can also allow them to publish their portfolios.<\/p>\n\n\n\n

In this tutorial, we will show how to allow users to add, edit, and delete portfolios on the Account page and how to display them on the Profile page.<\/p>\n\n\n\n

Create a Portfolio Custom Content Type<\/h2>\n\n\n\n

For portfolios, we recommend creating a separate Custom Content Type<\/strong><\/a>. When you create a new CCT, you also create a new SQL table where the items are stored. It\u2019s useful when you want to allow multiple users to upload their portfolios. If portfolio items are in a separate database table, the website won\u2019t slow down.<\/p>\n\n\n\n

Proceed to the JetEngine > JetEngine <\/em><\/strong>tab and enable the Custom Content Types <\/strong>toggle in the Default Modules <\/strong>tab.<\/p>\n\n\n\n

Then, go to the JetEngine > Custom Content Types <\/em><\/strong>tab and hit the \u201cAdd New<\/strong>\u201d <\/strong>button.<\/p>\n\n\n\n

In the General Settings<\/strong>, the Name <\/strong>field must be filled in. After entering the name, the Slug <\/strong>and DB Table Name <\/strong>will be generated automatically. <\/p>\n\n\n\n

The other options can be set according to your needs.<\/p>\n\n\n\n

\"portfolio<\/a><\/div>\n\n\n\n

You can add custom meta fields<\/strong><\/a> to your CCT in the Fields <\/strong>tab.<\/p>\n\n\n\n

For example, we added four fields: Work name<\/strong> text field, Media <\/strong>media field for a picture, Work link<\/strong> text field, and Work description<\/strong> textarea field.<\/p>\n\n\n\n

\"CCT<\/a><\/div>\n\n\n\n

Also, you can decide what values from the CCT fields can be shown in the CCT item list on the backend by enabling the dedicated toggles in the Admin Columns <\/strong>tab.<\/p>\n\n\n\n

\"CCT<\/a><\/div>\n\n\n\n

After customizing the CCT, hit the \u201cAdd\/Update<\/strong>\u201d button.<\/p>\n\n\n\n

Create a Form for Adding CCT Items<\/h2>\n\n\n\n

After creating the Custom Content Type, you can click the \u201cCreate new form<\/strong>\u201d button. This feature generates a front-end form that allows users to create CCT items.<\/p>\n\n\n\n

\"create<\/a><\/div>\n\n\n\n

After clicking the button, you will be redirected to the editing page of the created form<\/a><\/strong>.<\/p>\n\n\n\n

The form contains fields with the same labels, names, and types as the CCT custom meta fields.<\/p>\n\n\n\n

\"form<\/a><\/div>\n\n\n\n

To make a field mandatory, hit the asterisk<\/strong> icon next to it. After that, if a user doesn\u2019t fill in the field, the form cannot be submitted. More about the form settings you can read here<\/a><\/strong>. <\/p>\n\n\n\n

\"making<\/a><\/div>\n\n\n\n

If the form contains the Media Field<\/a> <\/strong>blocks, proceed to the Block <\/strong>settings tab and open the Field <\/strong>tab. Here, enable the Insert attachment<\/strong> toggle and set the FIELD VALUE<\/strong> according to the Media<\/strong> meta field settings. For example, we selected the “Media ID” Value format <\/strong>for the meta field, so we set the “Attachment ID” FIELD VALUE <\/strong>for the form field. Without these settings, users cannot add files via the form. Also, you can set the User access<\/strong>.<\/p>\n\n\n\n

\"media<\/a><\/div>\n\n\n\n

In the JetForm > Post Submit Actions<\/a> <\/em><\/strong>tab, the \u201cInsert\/Update Custom Content Type Item\u201d action is set by default.<\/p>\n\n\n\n

Click on the pencil icon to<\/strong> open the settings pop-up.<\/p>\n\n\n\n

\"Insert<\/a><\/div>\n\n\n\n

The Edit Action <\/strong>pop-up contains such settings:<\/p>\n\n\n\n