Is it possible to have a live preview for settings created within the register_settings_form() method? I tried but the settings only become active once the form is saved.
Yes, definitely! You should be able to add a preview array to the field’s config array. Is that not working? If not, can you post an example of the code you are trying?
I tested it again and still not work. I am testing it with the sample example plugin you provide and made a few changes to test the color. Here is some of the code.
I call the form with:
'form_field' => array(
'type' => 'form',
'label' => __('Form Field', 'fl-builder'),
'form' => 'example_settings_form', // ID from registered form below
'preview_text' => 'example' // Name of a field to use for the preview text
),
Then the form I added a color field:
/**
* Register a settings form to use in the "form" field type above.
*/
FLBuilder::register_settings_form('example_settings_form', array(
'title' => __('Example Form Settings', 'fl-builder'),
'tabs' => array(
'general' => array( // Tab
'title' => __('General', 'fl-builder'), // Tab title
'sections' => array( // Tab Sections
'general' => array( // Section
'title' => '', // Section Title
'fields' => array( // Section Fields
'example' => array( // fields
'type' => 'text',
'label' => __('Example', 'fl-builder'),
'default' => 'Some example text',
'preview' => array(
'type' => 'text',
'selector' => '.fl-example-text'
)
),
'color_field_2' => array(
'type' => 'color',
'label' => __('Color Picker', 'fl-builder'),
'default' => '333333',
'show_reset' => true,
'preview' => array(
'type' => 'css',
'selector' => '.fl-example-text',
'property' => 'color'
)
),
),
),
)
),
'another' => array( // Tab
'title' => __('Another Tab', 'fl-builder'), // Tab title
'sections' => array( // Tab Sections
'general' => array( // Section
'title' => '', // Section Title
'fields' => array( // Section Fields
'another_example' => array(
'type' => 'text',
'label' => __('Another Example', 'fl-builder')
)
)
)
)
),
)
));
I added a new field color_field_2 that targets the sample text for live preview. The same text color_field targets.
Thanks, David. Looking at this, it might be easier for me to figure it out if I could dive into the code. Could you provide temporary admin and FTP access?
I am working local. What if you posted a working sample and I will try it on my end.
David,
That might be a little difficult since I’m still trying to figure out what the issue is. 
Could you send over your custom module plugin?
Justin
I am using the example module plugin that you supply in the developer section here with the added code from above. Not much else to show you.
I can send you the Module plugin if you want. Where do I send it?
Hey David,
Thanks, that would be helpful. You can send it to justin [at] fastlinemedia [dot] com.
Justin
I sent the files. The subject is the same as the title as this thread.
Thanks, David! I have to head out early today and can have a closer look at this Monday. Have a great weekend!
Justin
Is their anyone else that can look at it. I planned on tackling it this weekend.
Hi Justin,
I also noticed that settings.css does not work in that example module plugin that I sent you. I did some more testing and it seems that when a module is created as an external plugin like the example plugin on your site that the settings.css is not called. If I add a custom module directly into the BB plugins modules folder then settings.css works fine and custom module styles are added when the module is activated.
After more testing the settings.css file is loaded, but the styles do not take effect. It only works if the module is loaded from the plugins module directory and not from a custom plugin.
Hey David,
Thanks for the additional info. I’ll be testing this out shortly.
Justin
Hi David,
Thanks for your patience. I did some testing and it looks like the settings.css file is working. I added the following CSS to make the header in the settings panel red and it worked…
/**
* This file should contain admin styles that
* will be applied to the module settings forms.
*/
.fl-builder-example-settings h1 {
background: #ff0000;
}
As for the live previews, I understand the issue now, you’re trying to do live previews in a nested form. Sorry I didn’t catch that earlier! Unfortunately, the builder doesn’t currently support live previews in nested form fields. Off the top of my head, I can’t remember the exact reason, but I do remember that there were some technical limitations that made it difficult to implement.
If you want, feel free to add this as a feature request on our user voice page.
Thanks!
Justin
Thanks Justin, I will test it again, but I tried it many times and could not get the settings.css to work on a module within an external plugin form. It was only working if I inserted the module into BB module directory, but I will try again later and let you know.
I kind of thought live edit would not work on the nested forms by looking at all the other modules that use it. Thanks for verifying it, but it really should be a feature and would come in handy.
Thanks again Justin.
Hey David,
Can you post the CSS you’re trying to get working in settings.css?
Justin
Ok…it is know working for some reason. Maybe it was a caching issue, but I tested it many times on a few different browsers last week with the same results. I will let you know within the next few days if it is an issue again, but for now it look like it works.
Great! Do let us know if the issue comes up again.
Justin