YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar rene.marijnissen asked

Yootheme pro and CF7 styling

Hello All,

I'am playing with the styling of contact form 7.
I want to show an icon within the input of CF7
Below the code i use, can someone tell me if this is possible....???

<div class="uk-margin">  
   <div class="uk-inline">  
      <span class="uk-form-icon" uk-icon="icon: user"></span>  
      <div class="uk-margin">[text* uwnaam 41/ akismet:author class:uk-input placeholder "Name *" ]</div>  
  </div>  
</div>
  • WordPress
  • UIkit

2 Answers

0

Avatar thomas.p Support answered

Hi rene.marijnissen,

the span tag with the icon has to be directly before the input field. The correct markup is

    <div class="uk-margin">  
        <div class="uk-inline">  
            <span class="uk-form-icon" uk-icon="icon: user"></span>  
            <input class="uk-input" type="text">  
        </div>  
    </div>

But even this won't work

<div class="uk-margin">    
   <div class="uk-inline">    
      <div class="uk-margin"><span class="uk-form-icon" uk-icon="icon: user"></span>[text* uwnaam 41/ akismet:author class:uk-input placeholder "Name *" ]</div>    
  </div>    
</div>

because Contact Form 7 wraps the input field inside a <span> tag. Therefore, you need to find a workaround or ask the CF7 developer if there's an option to put your own code inside the wrapping <span> tag.

I suggest one of the following workarounds:

1 Adding full markup

<div class="uk-margin">    
   <div class="uk-inline">    
      <span class="wpcf7-form-control-wrap uwnaam"><span class="uk-form-icon" uk-icon="icon: user"></span><input type="text" name="uwnaam" value="" size="41" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required uk-input" aria-required="true" aria-invalid="false" placeholder="Name *"></span>  
  </div>    
</div>

2 Adding custom Javascript

<div class="uk-margin">    
   <div class="uk-inline">    
      <div class="uk-margin">[text* uwnaam 41/ akismet:author class:uk-input class:add-icon-user placeholder "Name *" ]</div>    
   </div>    
</div>  
<script>  
  jQuery('.add-icon-user').parent().prepend('<span class="uk-form-icon" uk-icon="icon: user"></span>');  
</script> 

Kind regards
Thomas

0

Avatar rene.marijnissen answered

Thomas,

The full markup solutions works perfect.
The javascript mixes up the icons if you add more than 2 rows....all the icons than appear in each row.

Kind regards,
René

Edited

Know someone who can answer? Share a link to this question via email or twitter.