Custom Form Styling/HTML

Resolved RobertGomez
(@robertgomez)

10 years, 9 months ago
I would like to customize my checkboxes and radio buttons and have been looking around at CSS examples but they all list the html for the styling like this:
```
<div class="checkboxOne">
  		<input type="checkbox" value="1" id="checkboxOneInput" name="" />
	  	<label for="checkboxOneInput">Checkbox 1</label>
  	</div>
```
While your form outputs code like this:
```
<div class="checkbox">
								<label for="fld_6082609_1_opt1328728"><input type="checkbox" data-label="1" data-field="fld_6082609_1" id="fld_6082609_1_opt1328728" class="fld_6082609_1" name="fld_6082609[opt1328728]" value="1"> Checkbox 1</label>&nbsp;
								</div>
```
The main difference is the input field is INSIDE the label field rather than the label field coming after it. Is there any way i can customize how the HTML is output so i can use some coos CSS tricks to style my checkboxes and such?

Thanks!

https://ww.wp.xz.cn/plugins/caldera-forms/

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author Josh Pollock
(@shelob9)

10 years, 9 months ago

If you use the caldera_forms_render_field_type- set of filters specifically in you case caldera_forms_render_field_type-checkbox you can modify the html before it is returned.

Thread Starter RobertGomez
(@robertgomez)

10 years, 9 months ago

Sorry I am a noob, not sure what you mean. How would i use that and where?
mcgrailm
(@mcgrailm)

10 years, 9 months ago
Ok so putting this is into functions.php I can see that field is a string is that right ? I mean how are we suppose to modify the html in a string ?
```
add_filter('caldera_forms_render_field_type-checkbox', 'modify_checkboxes');

function modify_checkboxes($field){
	print_r($field);
	return $field;
}
```
Plugin Author Josh Pollock
(@shelob9)

10 years, 9 months ago

I should have said that filter is very late, and not a great solution, but besides making your own field, we do not have a great way of changing the markup. It’s going to require some strategic use of str_replace or some regex.

You should also look at caldera_forms_render_field_structure_type-checkbox The $field_structure array it exposes is used in the /fields/checkbox/field.php file to create the front-end markup.

Thread Starter RobertGomez
(@robertgomez)

10 years, 9 months ago

Hmm.. ok so I am following a little bit here, so when caldera_forms_render_field_structure_type-checkbox is used instead how do I restructure my fields? Can you give me an example?

Plugin Author Josh Pollock
(@shelob9)

10 years, 9 months ago

Honestly, I’ve never done this and this is not a simple thing to do. You’re asking how to change how the checkbox field works, there is not an easy way to do that. It’s going to take a some development work, or a replacement field file.

If you look in the source for the checkbox file (https://github.com/Desertsnowman/Caldera-Forms/blob/current-stable/fields/checkbox/field.php), you will see a lot of variables there that are not declared in that file. Those are all set by keys of the variable exposed by this filter.

Thread Starter RobertGomez
(@robertgomez)

10 years, 9 months ago

Just used a JS script to move it. Marking resolved.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Custom Form Styling/HTML’ is closed to new replies.

Tags