{"id":36853,"date":"2023-02-28T14:48:39","date_gmt":"2023-02-28T14:48:39","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=36853"},"modified":"2024-12-13T11:28:31","modified_gmt":"2024-12-13T11:28:31","slug":"how-to-insert-update-cct-via-form","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-insert-update-cct-via-form\/","title":{"rendered":"How to Insert and Edit Custom Content Type Items via Form"},"content":{"rendered":"\n

Add Custom Content Type<\/h2>\n\n\n\n
\n

Let\u2019s begin by creating a Custom Content Item<\/strong> (CCT<\/strong>). Head to WordPress Dashboard > JetEngine > Custom Content Types <\/em><\/strong>and press the \u201cAdd New<\/strong>\u201d button. Create a CCT<\/strong><\/a> with all the fields you need.\u00a0<\/p>\n\n\n\n

For instance, we create a \u201cSome Info\u201d CCT<\/strong> with three meta fields<\/a>: \u201cName,\u201d \u201cAddress,\u201d and \u201cMessage.\u201d <\/p>\n\n\n\n

When the \u201cAdd Content Type<\/strong>\u201d button is clicked, the Forms<\/strong> section will appear on the right panel with the \u201cCreate new form<\/strong>\u201d button. <\/p>\n\n\n\n

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

Generate the Form<\/h2>\n\n\n\n
\n

After clicking the \u201cCreate new form<\/strong>\u201d button, the JetFormBuilder<\/em> form will be created automatically with all the form fields corresponding to the CCT<\/strong>‘s meta fields.<\/p>\n\n\n\n

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

Edit CCT Status or Fields Mapping<\/h2>\n\n\n\n
\n

If you open the JetForm<\/strong> tab on the right panel of the form editor, you will see that the \u201cInsert\/Update Custom Content Type Item<\/strong>\u201d post-submit action<\/a> has been added automatically, with the fields already mapped to the corresponding CCT<\/strong>\u2019s meta fields.\u00a0<\/p>\n\n\n\n

You can edit field mapping, CCT<\/strong> status, and the fallback values for the meta fields by hovering on the \u201cInsert\/Update Custom Content Type Item<\/strong>\u201d post-submit action and clicking on the \u201cpencil<\/strong>\u201d icon.\u00a0<\/p>\n\n\n\n

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

The popup with all the settings will appear. <\/p>\n\n\n\n

Adjust them if needed and press the \u201cUpdate<\/strong>\u201d button.<\/p>\n\n\n\n

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

You can add more post-submit actions if needed by clicking on the \u201c+New Action<\/strong>\u201d button on the right panel of the form editor. <\/p>\n\n\n\n

Press the \u201cSave<\/strong>\u201d button to save the form.<\/p>\n<\/div><\/div>\n\n\n\n

Insert the Form Into Website Pages<\/h2>\n\n\n\n
\n

Go to WordPress Dashboard > Pages, <\/em><\/strong>press “Add New,” <\/strong>or use an existing page. There, add a form using the JetForm<\/strong><\/a> block\/widget\/element<\/strong> for Elementor<\/a> or Bricks<\/a>.\u00a0<\/p>\n\n\n\n

Select the form from the list in the Form Settings <\/strong>section. Then, add styling for the form fields, if required, by proceeding to the Styling <\/strong>tab. <\/p>\n\n\n\n

To save changes, click \u201cPublish<\/strong>.\u201d<\/p>\n\n\n\n

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

If you use Block Editor, Divi, or other form builders except Elementor and Bricks, you can insert the form using a shortcode and use a free JetStyleManage<\/em>r<\/em><\/strong><\/a> plugin for styling<\/a>.\u00a0<\/p>\n\n\n\n

Check the result on the front end, fill in the form fields, and click \u201cSubmit<\/strong>.\u201d <\/p>\n\n\n\n

\"front-end<\/a><\/div>\n\n\n\n

Then, proceed to the WordPress Dashboard > Your CCT name,<\/em><\/strong> and you will see the new CCT <\/strong>item added with the fields filled in the form. <\/p>\n\n\n\n

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

Edit \/ Update Existing CCT Items via Front-End Form<\/h2>\n\n\n\n

To update the existing CCT<\/strong> items via a front-end form, create a form with the same fields as the one for adding fields. The best way to do this is to duplicate<\/strong> the form to add fields, rename it, and change some settings. <\/p>\n\n\n\n

Field for items to be updated<\/h3>\n\n\n\n

First, set a Select Field<\/strong> to select a CCT<\/strong> item to be updated. This field should be generated dynamically following these instructions<\/a>. <\/p>\n\n\n\n

In short, you should create a custom query using the Query Builder<\/strong><\/a>.<\/p>\n\n\n\n

Go to WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>and press the \u201cAdd New\u201d button.<\/p>\n\n\n\n

Enter the Name<\/strong> and select the \u201cCustom Content Type Query<\/a>\u201d Query Type<\/strong>.
In the Content Type Query <\/strong>section, select the name of your CCT whose items are to be updated from the From Content Type<\/strong> dropdown menu. Then, press the \u201cAdd\/Update Query<\/strong>\u201d button.<\/p>\n\n\n\n

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

Go back to the form to update CCT<\/strong> and add the Select Field<\/strong><\/a>. Choose \u201cGenerate Dynamically\u201d in the FILL OPTIONS FROM <\/strong>drop-down, then the \u201cGet values list from JetEngine Query\u201d option from GENERATOR FUNCTION<\/strong>. <\/p>\n\n\n\n

In the FIELD NAME<\/strong>, write the macro for the items to be displayed. This is a format for the macro:<\/p>\n\n\n\n

query ID|_ID|field to be displayed as a label<\/p>\n\n\n\n