[Resolved] How can I add complex CSS3 to CRED-form-fields?

[Author]

Posts

[philipG-3]

Hi there

I've read through the following article:
https://toolset.com/documentation/user-guides/styling-cred-forms/

... but cannot figure out, how to add more complex CSS3-styles to, let's say an input-field.

The ultimate goal is to achieve the Haruki-Style on input-fields, shown here:
hidden link

How can I accomplish such a styling?

I understand, that adding for example input[name="post_title"] { ... } would style the input-field itself. But how can I for example select the label that belongs to that input-form?

Thanks for your help!
Philip

[Beda]

That is possible only with Custom JS. Those Fields you show are using a JS library, which you can enqueue as well in your theme.
This will the generally apply automatically to all your Input Fields, as long the JS library is able to handle HTML fields, and you pass the correct initializations snippets to the CRED Form.
Eventually the library requires an ID that you can pass in the Field by wrapping it in HTML for example.
One library that does what you need is for example MDBootstrap.
hidden link

I use it successfully together with Toolset, Bootstrap 4 (!) and a custom theme.
But this is subject to custom code that I cannot share here.

If you require help with enqueuing the library and firing it I can also suggest the Contractors:
https://toolset.com/contractors/

[philipG-3]

Hi Beda

Thanks for your answer.

I googled some more and found the following topic:
https://toolset.com/forums/topic/labels-for-cred_field-with-for-and-id-elements/#post-359302

With the information in the above post, I achieved to assign the input-element-attribute "id" of "post_title" to its respective label-element (#choose-me) by using the following code:

jQuery( document ).ready(function() {
  
id_of_post_title = jQuery('input[name="post_title"]').attr('id');

console.log(id_of_post_title, "Hello, world");

jQuery('#choose-me').attr('for', id_of_post_title);
  
});

Now when the page gets rendered, the label-element gets assigned the correct "id" - thats great! However: the needed css-animation doesn't work.

I played around within the inspector and found out, that, when putting the "<label ...> ... </label>"-lines inside the auto-generated "<div ...> ... </div>" above, the animation starts working.

Thats how the code should be rendered ...

[credform class='cred-form cred-keep-original']

			[cred_field field='post_title' post='arbeitgebende-r' value='' urlparam='' class='input__field input__field--haruki']
      		<label class="input__label input__label--haruki" id="choose-me" for="">
				<span class="input__label-content input__label-content--haruki">Titel</span>
			</label>

[/credform]

Thats how it gets rendered ...

<form  id="cred_form_29_1" class="cred-form cred-keep-original" action="/administration/arbeitgebende-r-hinzufuegen/?_tt=1511034463" method="post">

<div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="textfield-post_title">

<input type="text" id="cred_form_29_1-textfield-1-1511034463" name="post_title" value="" class="input__field input__field--haruki wpt-form-textfield form-textfield textfield textfield" output="" preset_value="" urlparam="" value_escape="" make_readonly="" placeholder="" select_text="" data-wpt-validate="{"required":{"args":{"1":true},"message":"This field is required"}}" data-wpt-field-title="Arbeitgebende/r-Name" data-wpt-type="textfield" data-wpt-id="cred_form_29_1_cred_form_29_1-textfield-1-1511034463" data-wpt-name="post_title" />

</div>
      	<label class="input__label input__label--haruki" id="hierbinich" for="">
		<span class="input__label-content input__label-content--haruki">Titel</span>
	</label>

NOTE: the last 3 lines should be rendered inside their above div-element to get things working.

My question: how can I insert code inside the code that gets generated by the shortcode? Or is there a possibility of doing some jQuery for this and change the order after rendering? I already tried appending those 3 lines via jQuery but as I am not a programmer, it's really hard for me finding out the proper code ...

Thanks for your help!
Regards
Philip

[Minesh]

Hi philipG-3,

Beda is on vacation. This is Minesh here and I'll take care of this ticket and try to help you further. I hope this is OK.

Well - regarding your issue - what if you try to create structure:

[credform class='cred-form cred-keep-original']
 <div class="input input--haruki">
            [cred_field field='post_title' post='arbeitgebende-r' value='' urlparam='' class='input__field input__field--haruki']
            <label class="input__label input__label--haruki" id="choose-me" for="">
                <span class="input__label-content input__label-content--haruki">Titel</span>
            </label>
 </div>

[/credform]

Does this help?

[philipG-3]

Hi Minesh

Thanks for answering. Unfortunately, the code gets rendered the same way (see attachment)...

Any other ideas? Would it be possible to load the .css-file via functions.php to solve this?

Thanks
Philip

[Minesh]

So, I think the alternative way for you would be you should use CRED generic field and add field to your form rather adding using CRED field shortcode and build your required HTML structure according to your need.

More info:
=> https://toolset.com/documentation/user-guides/inserting-generic-fields-into-forms/

[philipG-3]

Hi Minesh

I see. I try to find another solution to this problem - maybe I can figure out how to process generic fields like they'd be CRED-fields or so...

Thanks
Philip