Hello,
I’m using a piklist shortcode in a plugin to add custom fields to WP comment form. For reasons I can’t figure out, this overrides the form’s style for the whole form (submit button, default fields outside of the piklist <div>, etc). Everything I’m doing (I think) is quite simple and most of the piklist stuff is taken from the site, so don’t understand the odd behaviour.

This is in my plugin to modify the comment form:

//Put my custom piklist fields into the WP comment form
function video_comment_form()
{
echo do_shortcode('[piklist_form form="comment_form-metabox" add_on="toggle360"] ');
}
add_action( 'comment_form_top','video_comment_form' );

HERE’S THE PROBLEM: When I use comment_form_top, the piklist block appears just under “Leave a Reply” and the rest of the form’s style changes. When I use comment_form, the form looks OK but piklist block appears underneath the submit button, which looks odd and may confuse people.

The piklist form file contains two fields, a radio button and an HTML:

piklist('field', array(
	'type' => 'html',
	'field' => 'video_recorder',
	'label' => 'Tell us what you think in a video...',
	'help' => 'This is help text.',
	'scope' => 'comment',
	'value' =>
	'<camera id="MyFirstCamera" data-app-id="a-aad8cd60-00c7-0134-af93-1217e1551dfd"></camera>
	<div id="MyFirstCamera-completed-screen" class="cameratag_checkmark">
		<span class="check">✔</span> 
		Video Saved!
		<br>Press Submit to add you comment.
	</div>'
));

Originally, I thought something in the HMTL could be causing problems, but commenting out this field didn't change anything. The checkbox field is pretty basic.

$response_setting = array(
   'type' => 'radio',
   'field' => 'response',
   'label' => 'Response',
   'scope' => 'comment_meta',
   'list' => false,
	'choices' => array(
		'Yes' => 'Yes',
		'No' => 'No'
  	),
   'required' => true
   );
piklist('field', $response_setting); //create the appropriate response field

I tried experimenting with using the theme’s attributes in the field descriptions (class, wrapper, field_wrapper). These didn’t seem to make any difference but I couldn’t tell from the help files if I was doing it correctly. I also wrapped the shortcode and other parts in <div> with class applied, but also didn’t make a difference.

So I’m trying to figure out:

Is this normal behaviour? If so, why?
How do I fix it so I can use my piklist forms without unexpected changes to style?