How to override the fields?

  • Resolved panda

    (@alejorostata)


    4 years, 5 months ago

    I would like to add fontawesome icons to the fields, by adding a new div container to the input and inside of it add the fontawesome icon, for example;

    <div class="form-row validate-required" id="user_email_field" data-priority="">
	<label for="user_email" class="ur-label">Email Address <abbr class="required" title="required">*</abbr></label>
	<div class="added-element"> <!-- Add container to the element -->
		<i class="fas fa-at csx-custom-form-icon"></i> <!-- Add fontawesome icon -->
		<input data-rules="" data-id="user_email" type="email" class="input-text input-email ur-frontend-field  " name="user_email" id="user_email" placeholder="" value="" required="required" data-label="Email Address">
	</div>
</div>

    is that possible?

    I see the directory of templates inside the plugin, but I’m not sure which file to override, or is there a hook to do this?

    • This topic was modified 4 years, 5 months ago by panda.
    • This topic was modified 4 years, 5 months ago by panda.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter panda

    (@alejorostata)

    65 Hours and still no response from the support. Never mind, I just used JQuery instead.

    JQuery

    //Clone the input, e.g. EMail Input	
var emailInput = jQuery('.user-registration-form-custom-class input#user_email').clone();
//Get the height of input
var emailInputHeight = jQuery('.user-registration-form-custom-class input#user_email').outerHeight();
//The element to add
var customElementToAdd = '<div class="new-container"><i class="fas fa-at new-added-icon" style="height:'+ emailInputHeight +'px;"></i>';
	
jQuery( ".user-registration-form-custom-class input#user_email" ).replaceWith(jQuery(customElementToAdd).append(emailInput));

    CSS

    .new-container{
		position: relative;
}
.new-added-icon{
    position: absolute;
	left: 0px;
	background-color: #efeff2;
    width: 45px;
	
	display: flex !important;
    align-items: center;
    justify-content: center;
	border: 1px solid #ddd;
	border-radius: 3px 0px 0px 3px;
	transition: 0.5s;
	color: #929292;
}

    But this solution is not good since it requires the JQuery to be loaded.

    Hi @alejorostata,

    Sorry for the delayed response.
    Regarding adding the icons, currently, we do not have an option to do this within the plugin so, for the time being, you will have to stick with the workaround that you mentioned.
    However, I have already forwarded this ticket to our devs and they will be thinking out a way to do this with ease. We will update you after there is any progress on this topic.

    Also, if your query is not answered quickly then you can simply create a ticket here instead https://wpeverest.com/contact/ and someone from the team will get back to you.

    Regards!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to override the fields?’ is closed to new replies.