Help Center
How to Allow Users to Add Portfolio With the Front-End Form

How to Allow Users to Add Portfolio With the Front-End Form

This tutorial describes how to allow users to add their portfolio via the JetFormBuilder front-end form on the Account page and display it on the user’s Profile page using the JetEngine WordPress plugin.

Before you start, check the tutorial requirements:

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.

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.

Create a Portfolio Custom Content Type

For portfolios, we recommend creating a separate Custom Content Type. When you create a new CCT, you also create a new SQL table where the items are stored. It’s useful when you want to allow multiple users to upload their portfolios. If portfolio items are in a separate database table, the website won’t slow down.

Proceed to the JetEngine > JetEngine tab and enable the Custom Content Types toggle in the Default Modules tab.

Then, go to the JetEngine > Custom Content Types tab and hit the “Add New button.

In the General Settings, the Name field must be filled in. After entering the name, the Slug and DB Table Name will be generated automatically. 

The other options can be set according to your needs.

portfolio custom content type

You can add custom meta fields to your CCT in the Fields tab.

For example, we added four fields: Work name text field, Media media field for a picture, Work link text field, and Work description textarea field.

CCT custom meta fields

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 tab.

CCT admin columns

After customizing the CCT, hit the “Add/Update” button.

Create a Form for Adding CCT Items

After creating the Custom Content Type, you can click the “Create new form” button. This feature generates a front-end form that allows users to create CCT items.

create a new front-end form for CCT items

After clicking the button, you will be redirected to the editing page of the created form.

The form contains fields with the same labels, names, and types as the CCT custom meta fields.

form fields

To make a field mandatory, hit the asterisk icon next to it. After that, if a user doesn’t fill in the field, the form cannot be submitted. More about the form settings you can read here.

making form field required

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

media field insert attachment

In the JetForm > Post Submit Actions tab, the “Insert/Update Custom Content Type Item” action is set by default.

Click on the pencil icon to open the settings pop-up.

Insert Update Custom Content Type Item Post Submit Action

The Edit Action pop-up contains such settings:

  • CONTENT TYPE. The recently created “Portfolio” CCT is set here by default;
  • ITEM STATUS. Here, you can decide whether an item will obtain “Draft” or “Publish” status after a user submits the form;
  • FIELDS MAP. These settings show the connection of the form fields with the CCT meta fields. After a user fills in the form fields and clicks the “Submit” button, the CCT item will be created with the corresponding values in the meta fields;
  • DEFAULT SETTINGS. Here, you can define values for the CCT default fields.

If you changed any Post Submit Action settings, hit the “Update” button.

post-submit action settings

To redirect users to the Account page after submitting the form, click the “+ New Action” button, pick the “Redirect to PagePost Submit Action, and push the pencil icon.

redirect to page post submit action

In the Edit Action pop-up, set the “Static Page” option for the Redirect to field, and from the Select page drop-down menu, pick “Account.” Then, hit the “Update” button.

redirect to the page action settings

You may edit the form according to your preferences. For example, you can add a custom text with the Heading block. After that, push the “Update” button to save the changes for the form.

adding custom text with the heading block to the form

Create a Form for Editing CCT Items

Proceed to the JetFormBuilder > Forms tab and click the form’s “Duplicate” button to add items.

duplicate the jetformbuilder form

Rename the form and insert the Hidden Field. Change the Form field name and set the “Manual Input” Field Value.

hidden field name and value

In the Block section, click the coin-stack icon above the DEFAULT VALUE field.

dynamic value for the hidden field

In the Edit Preset pop-up, pick the “Custom Content Type” Source, Get Item ID from “Current post,” and “Item ID” CCT value. Then, press the “Update” button.

preset with the CCT item ID

Other fields in the form that replicate the CCT meta fields don’t need to be changed.

Head to the JetForm > Post Submit Actions tab and click the pencil icon under the “Insert/Update Custom Content Type Item” action.

In the Edit Action tab, set the “Item ID (will update the item)” option for the Hidden Field with the CCT item ID. Then, hit the “Update button.

editing post submit action for updating CCT items

Then, unfold the Preset Settings tab and hit the Enable toggle. Select the “Custom Content Type” SOURCE and GET ITEM ID FROM “Current Post.” Under that, you will see the list of the fields that you added to the form. Each has a select field underneath, where you can choose a CCT meta field to connect to a form field. When users edit the item with the form, the preset will put the meta field data from the current CCT item into the form fields, so users won’t need to fill in fields again to change the item content.

preset settings for the editing form

Press the “Update” button to save the form settings.

Place the Forms in Pop-Ups

With the JetPopup plugin, you can create two pop-ups that can be attached to the buttons.

We will create one pop-up for adding and another for editing CCT items.

Head to the JetPopup > Create New Popup tab. In the Create a Popup window, select the Content Type (Elementor or Block editor), enter the pop-up Name, and Choose Preset. Then, hit the “Create button.

new pop-up creation

Place the JetForm widget or Form block on the editing page. Open the Choose Form drop-down menu and pick a form you created for adding the CCT items (portfolios).

pop-up editing

Customize the form and pop-up settings as preferred and hit the “Update button.

To learn more about pop-up settings, check the How to Create a New Popup Template in Elementor and How to Create Popup in Gutenberg tutorials.

Return to the JetPopup > Create New Popup tab and create another pop-up.

edit portfolio pop-up

Place the JetForm widget or Form block and set the form for editing CCT items (portfolios). 

edit portfolio pop-up with the form

Click the gear icon to open the pop-up settings and enable the Loading content with Ajax and Force Loading toggles. The form preset won’t work in the pop-up without those enabled options.

pop-up force loading option

Customize the pop-up and press the “Update” button.

Create a CCT Query

To display only portfolios of the queried user on the Profile page, we need to create a custom query. Head to the JetEngine > Query Builder tab and push the “Add New” button.

Enter the query Name and select the “Custom Content Type Query” option from the Query Type drop-down menu.

In the Content Types Query settings tab, select the needed CCT from the From Content Type drop-down list (“Portfolio” in our case). You can set the Number of the displayed items in the Listing Grid (we will create a Listing template for it later). Also, you can select the “Publish” Status to show only those items that are published.

custom query to display portfolios for queried user

In the Query tab, hit the “Add New”button. Set the “Item Author” Field and “Equal (=)” Compare. Click the coin-stack icon near the Value field and pick the “Queried user ID” from the drop-down menu. Finally, pick the “Numeric” Type.

custom content type query settings

The query is ready, and you can hit the “Add/Update Query”button.

Create a Listing Template

To display portfolios in the listing grid on the user’s Account and Profile pages, it’s necessary to create a listing template.

Go to the JetEngine > Listings tab and press the “Add New button.

In the Setup Listing Item pop-up, select the “Custom Content Type” Listing Source, choose the needed CCT in the From content type field (e.g., “Portfolio”), enter the Listing Item name, pick the “Elementor” Listing view, and click the “Create Listing Item button.

listing template for portfolio

On the Elementor editing page, place the Dynamic Image widget to display the portfolio picture. As the Source, pick the Media meta field from the “Portfolio” CCT.

dynamic image widget for displaying portfolio

To display the portfolio name, drag-n-drop the Dynamic Field widget. We chose the “Post/Term/User/Object Data” option as the Source and selected the “Work name” CCT Text meta field.

dynamic field widget for displaying portfolio name

We placed another Dynamic Field widget, chose the “Post/Term/User/Object Data” option as the Source, and selected the “Work description” CCT Text meta field to display portfolio description. 

dynamic field widget for displaying portfolio description

To hide part of the description text, we enabled the Filter field output toggle and selected the “Trim string by charts or words” Callback. Be aware that the callback is available only after you enable the Trim string callback toggle in the JetEngine > JetEngine > Modules > External Modules tab. With this callback, you can set the number of words or charts displayed in the Dynamic Field.

dynamic field widget for displaying portfolio description with callback

We added the Dynamic Link widget and picked the “Work link” CCT Text meta field to display the link to the portfolio.

dynamic link widget for displaying portfolio link

We drag-n-dropped another Dynamic Link button by clicking on which user can delete the portfolio. As the Source, we picked the “Delete current post link” option and filled in the Confirm deletion message field. 

In the Redirect after delete field, you can enter the Account page URL, so the user will be redirected to the Account page after deleting the portfolio.

You can change the Label text. We wanted to display the icon only, so we deleted it.

Enable the Add Query Arguments toggle and enter the “_cct_id=%current_id%” macro.

dynamic link widget for deleting the current post

Also, we set the “Trash” Field Icon and “End” Alignment.

dynamic link icon settings

Proceed to the Advanced settings tab of the widget, unfold the Dynamic Visibility tab, and hit the Enable toggle. Set the “Show element if condition met” Visibility condition type and “Is Profile Page” (from the JetEngine specific section) Condition. In the Profile Page field, pick the Account subpage that shows the user’s info and where you will place the listing grid with portfolios.

Such dynamic visibility settings show the Dynamic Link for deleting a portfolio only on the user Account page. On the Profile page, it will be invisible. 

dynamic link dynamic visibility settings

Now, you can add a button for triggering the pop-up with the editing portfolio form.

You can add the Elementor or the JetElements Button widget. To learn more about the latter, you can read the How to Add a Button Widget with Custom Text and Links tutorial.

Add the Button to the editing page and customize its Content and Style settings according to your needs.

button widget from the JetElements plugin

Then, go to the Advanced settings tab and open the JetPopup tab. Set the pop-up with the editing portfolio form in the Attached Popup field, pick the “Click On Widget” Trigger Type, and enable the Jet Engine Listing popup toggle. 

attached pop-up to the button

Unfold the Dynamic Visibility tab and hit the Enable the toggle. Set the “Show element if condition met” Visibility condition type and “Is Profile Page” (from the JetEngine specific section) Condition. In the Profile Page field, pick the Account subpage that shows the user’s info.

button widget visibility settings

Finish customizing the Listing item and hit the “Update”button.

Place the Listing Grid on the Account Page

Click to edit the Account subpage template with the user information.

On the editing page, we placed the Heading widget with the “Portfolio” text.

Then, we added a button for triggering the pop-up with the adding portfolio form.

To add the button, drag-n-drop the Elementor Button widget or the JetElements Button widget and customize its Content and Style settings according to your needs.

jetelements button widget on the account page

Then, go to the Advanced settings tab and open the JetPopup tab. Set the pop-up with the adding portfolio form in the Attached Popup field and pick the “Click On Widget” Trigger Type.

attached pop-up with the adding portfolio form to the button

Place the Listing Grid widget and select the recently created Listing item. According to the Dynamic Visibility settings, the Listing Grid doesn’t show the “Edit” and “Delete”buttons yet, but they will be visible on the Account page on the front end.

listing grid widget to display portfolios

Unfold the Custom Query tab and enable the toggle. From the drop-down menu, select the previously created CCT query. Since we haven’t added portfolios yet, the listing grid is empty.

custom query for the Listing Grid

Finish customizing the template and hit the “Update” button.

Place the Listing Grid on the Single User Profile Page

Click to edit the Single User subpage template with the user information.

On the editing page, we placed the Heading widget into the Column of Inner Section with the “Portfolio” text.

Drag-n-drop the Listing Grid widget and select the recently created Listing item.

listing grid widget with portfolio items on the profile page

Unfold the Custom Query tab and enable the toggle. From the drop-down menu, select the previously created CCT query.

custom CCT query for the Listing Grid

Also, we opened the Advanced settings tab of the Inner Section widget, unfolded the Dynamic Visibility tab, and enabled the toggle. We selected the “Show element if condition met” Visibility condition type, “Query Has Items” Condition, and set the same CCT query in the Query to check field. Such settings enable the section display only if a user adds at least one portfolio.

query has items dynamic visibility condition

Finally, hit the “Update” button.

Check the Results

Open the Account page on the front end.

account page of the user with the employee role

To test a pop-up with the adding portfolio form, we hit the button, and the form appeared. 

adding portfolio with the front-end form

Let’s fill in the fields and click the “Submit” button.

publishing a portfolio with the form

After that, a newly created portfolio item appears in the listing grid.

created portfolio item in the listing grid

If we click the “Edit” button in the listing item, the pop-up with the editing portfolio form shows up. Due to the form preset settings, the form fields are auto-filled with the values from the CCT item meta fields.

pop-up with editing portfolio form on the front end

We changed the portfolio name and hit the “Submit button. The change was saved and displayed in the listing grid.

If we hit the “Delete button, the notification appears with the confirm deletion message. We can click the “Ok button to delete the item or “Cancel to save it.

deleting portfolio

We deleted the portfolio, so the listing grid is empty again. 

deleted item

Now, let’s check the Profile page.

hidden section with the dynamic visibility

When we added a new item from the Account page, the section with a portfolio appeared on the User Profile page. The page doesn’t show the“Add,” “Edit,” and “Delete”buttons according to the dynamic visibility settings.

portfolio on the user profile page

That’s all. Now you know how to allow users to add their portfolio via the front-end JetFormBuilder form on the Account page and how to display it on the user’s Profile page using the JetEngine WordPress plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.