UPG (User Post Gallery) is a WordPress plugin, which collects data from users with the help of forms.
Forms are generated in two ways
1- Using built-in form layouts, which can be edited using ‘layout editor’ to create own ‘personal layout’ form. [upg-post] shortcode is used for this.
2- Using special shortcode form, which is very easy to generate without the knowledge of html tags. [upg-form]
(Works for UPG version 1.90 & later)
Shortcode Form
Here we will be primary focusing on generating UPG form with the help of ShortCode.
If you want to use advance level form, use ‘layout editor’. Click here for more info.
With this form you can get data from users and submit it into UPG, WordPress Post or almost any other custom post types.
There are lot’s of parameters for different proposes. All are case sensitive and should be written very carefully as currently there is not any drag & drop options available.
Difference between them
Layout Editor
- HMTL & PHP knowledge required
- Advance level form creation
- Submission only to UPG
- Ready form layouts
- Limited custom fields
- Tightly integrated with UPG
Shortcode Form
- Full of shortcodes only
- Complete ajax submission
- Form for UPG, wordpress, custom post types.
- Advance level input fields.
- Compatible with 3rd party plugins.
[upg-form] ... [/upg-form]
All the [upg-form-tag] should be between [upg-form] tag.
This will render to display desired input field.
Guide
First make a plan, what input field you wanted in your form and where that data need to get posted.
Shortcode should get started with [upg-form].
All the input fields will be generated with [upg-form-tag].
At the end close the form with submit button & [/upg-form]
Copy paste the shortcode into wordpress page ,post or widgets. This will display form.
Example:[upg-form class="pure-form" title="Upload your media" name="my_form"]
[upg-form-tag type="post_title" title="Main Title"]
[upg-form-tag type="category" title="Select category" taxonomy="upg_cate" filter="image"]
[upg-form-tag type="submit" name="submit" value="Submit Now"]
[/upg-form]
[upg-form] will render to html <form> </form> tag.
With the help of parameters the attributes are added inside form tag.
- title = Title of the form. Eg. Submit your pictures
- class = css class name of the form. Eg. pure-form
- name = name of the form. Eg. my_form
- post_type = This is a custom post_type name. Leave it blank if you want to get submitted to UPG.
* post_type=”video_url” : Requires for youtube/vimeo URL submission
* post_type=”wp_post” : Requires if data to be submitted as WordPress posts.
* post_type=”any_other_plugin_post_type_name” : To submit into other’s plugin. - taxonomy = Each post will get assigned to the album/categories. It is compulsary to specify it.
* taxonomy = “upg_cate” : If post_type is “video_url” or blank.
* taxonomy = “category” : If post get submitted into WordPress.
* taxonomy = “any_other_plugin_taxonomy_name” : To specify category of other post_type.
[upg-form class="pure-form pure-form-stacked" title="Upload your media" name="my_form" post_type="wp_post" taxonomy="category"]
[upg-form-tag type="post_title" title="Main Title" value="" placeholder="main title" required="true"]
[upg-form-tag type="submit" name="submit" value="Submit Now"]
[/upg-form]
[upg-form-tag type="post_title" title="Main Title" value="" placeholder="main title" required="true"]
required=”true” : This attribute specifies that the user must fill in a value before submitting a form.
placeholder = A hint to the user of what can be entered in the control.
This is special tag for video URL. Primary designed to get submitted into UPG only.
[upg-form-tag type="video_url" title="Submit youtube/vimeo URL" placeholder="http://" required="true"]
This is special tag to select file.
For single select file
[upg-form-tag type="file" title="Select file"]
For multiple drag & drop files[upg-form-tag type="file_multiple" title="Drag & Drop multiple files" class="upg_drag_file" multiple="true"]
This will render to display category/album select input box.
Example:
1- To display categories of WordPress post
[upg-form-tag type="category" title="Select category" taxonomy="category"]
2- To display albums of UPG for image type.
[upg-form-tag type="category" title="Select album" taxonomy="upg_cate" filter="image"]
filter: This is special parameter only for UPG. Where album can be filtered between all, image & youtube
Copy paste shortcode below to display tag input field. User can create tags from frontend.
[upg-form-tag type="tag" title="Insert tag"]
For WordPress:
For Woocommerce:
This will render the description/article textarea input field.
[upg-form-tag type="article" title="Main Desp" placeholder="Content Plz" editor="true"]
This is basic text input field.
[upg-form-tag type="text" name="upg_custom_field_1" title="My other Title" value="" placeholder=""]
If you are using it for UPG, use the name as “upg_custom_field_1” to “upg_custom_field_5”.
These extra fields may not have any use for other post_type.
This is basic textarea input field.
[upg-form-tag type="textarea" name="upg_custom_field_2" title="Description" placeholder="" rows="3" cols="20"]
rows & cols are used to specify the size of the textarea.
If you are using it for UPG, use the name as “upg_custom_field_1” to “upg_custom_field_5”.
These extra fields may not have any use for other post_type.
This tag will render element used to create a drop-down list
[upg-form-tag type="select" name="upg_custom_field_3" title="Select Month" value="jan:January,feb:February" placeholder="-Month-"]
Since, drop down list requires some values which can be passed using value attribute.
As on a example:
jan is the value and January is label.
feb is the value and Febuary is label.
value and the label should be divided by : (ratio) sign. Each extra list requires ,(comma) between them.
This tag will render element used to create a radio selection.
[upg-form-tag type="radio" name="upg_custom_field_4" title="Choose fruits" value="cherry:Cherry,banana:Banana"]
Since, radio list requires some values which can be passed using value attribute.
As on a example:
cherry is the value and Cherry is label.
value and the label should be divided by : (ratio) sign. Each extra list requires ,(comma) between them.
This tag will render element used to create a checkbox selection.
[upg-form-tag type="checkbox" title="Which colors you like ?" value="upg_custom_field_5:Blue,upg_custom_field_6:Black"]
Since, checkbox requires some values which can be passed using value attribute. User can select more then one value. No name attribute is required.
As on a example:
upg_custom_field_5 is the value and Blue is label.
upg_custom_field_6 is the value and Black is label.
value and the label should be divided by : (ratio) sign. Each extra list requires ,(comma) between them.
[upg-form-tag type="other" new_type="hidden" name="extra" value="blank"]
You must specify type=”other” and mention new_type=”hidden” and rest all as text input filed parameters.
[upg-form-tag type="captcha" title="Security"]
This is the compulsory input tag must be specified just before the closing of [/upg-form] tag.
This will generate the submit button with specified label as value.
[upg-form-tag type="submit" name="submit" value="Submit Now"]
Examples
Take a closer look, you can modify as your requirement. Note: Everything is case sensitive. Do not use special letters.
[upg-form class="pure-form" title="Submit to UPG" name="my_form" taxonomy="upg_cate" tag_taxonomy="upg_tag"]
[upg-form-tag type="post_title" title="Main Title" value="" placeholder="main title"]
[upg-form-tag type="category" title="Select category" taxonomy="upg_cate" ]
[upg-form-tag type="tag" title="Insert tag"]
[upg-form-tag type="article" title="Description" placeholder="Content Plz"]
[upg-form-tag type="file" title="Select file"]
[upg-form-tag type="submit" name="submit" value="Submit Now"]
[/upg-form]
[upg-form class="pure-form pure-form-stacked" title="Submit to WordPress" name="my_form" post_type="wp_post" taxonomy="category" tag_taxonomy="post_tag"]
[upg-form-tag type="post_title" title="Main Title" value="" placeholder="main title"]
[upg-form-tag type="category" title="Select category" taxonomy="category" ]
[upg-form-tag type="tag" title="Insert tag"]
[upg-form-tag type="article" title="Description" placeholder="Content Plz"]
[upg-form-tag type="file" title="Select file"]
[upg-form-tag type="submit" name="submit" value="Submit Now"]
[/upg-form]
[upg-form class="pure-form pure-form-stacked" title="Submit to WooCommerce" name="my_form" post_type="product" taxonomy="product_cat" tag_taxonomy="product_tag"]
[upg-form-tag type="post_title" title="Product Title" value="" placeholder="main title"]
[upg-form-tag type="category" title="Select category" taxonomy="product_cat" ]
[upg-form-tag type="tag" title="Insert tag"]
[upg-form-tag type="other" new_type="number" name="_price" title="Price" value="" placeholder="0.00"]
[upg-form-tag type="other" new_type="number" name="_sale_price" title="Sale Price" value="" placeholder="0.00"]
[upg-form-tag type="article" title="Description" placeholder="Long Description"]
[upg-form-tag type="file" title="Select file"]
[upg-form-tag type="submit" name="submit" value="Submit Now"]
[/upg-form]
[upg-form class="pure-form" title="Submit to UPG" name="my_form" taxonomy="upg_cate" tag_taxonomy="upg_tag"]
[upg-form-tag type="post_title" title="Main Title" value="" placeholder="main title"]
[upg-form-tag type="submit" name="submit" value="Submit Now"]
[/upg-form]