Оформление CSS формы входа для плагина Profile Builder

Profile Builder отличный плагин для создания форм входа, регистрации и редактирования профиля с фронт-енда. Скачать плагин можно на официальном сайте WordPress. О его работе написано множество статей и останавливаться на этом я не буду.
При работе с плагином я столкнулась с тем, что у бесплатной версии форма входа выглядит очень просто и непрезентабельно.

Поэтому я слегка доработала ее внешний вид. Вашему вниманию представляю совсем незначительные изменения, так сказать базовые. При желании вы можете доработать CSS в зависимости от дизайна вашего сайта. Форма входа для плагина Profile Builder описанная в этой статье будет выглядеть так:

Изменения

1. После формы добавить небольшой javascript. Это нужно чтобы прописть атрибуты placeholder в полях формы и при этом не редактировать сам плагин.

   <script>
   document.getElementById('user_login').placeholder='Логин или e-mail';
   document.getElementById('user_pass').placeholder='Пароль';
   </script>

   Если форма находится на всех страницах сайта, например в шапке или сайдбаре, то лучше всего этот скрипт добавлять в шаблон footer.php. Если форма находится на отдельной странице, тогда этот скрипт нужно добавить на эту страницу после формы входа.

2. Добавить приведенные ниже CSS стили в style.css. В моем примеры главное не свойства и значения стилей, а названия их классов. Зная названия, можно будет создать любые стили.

   /* ФОРМЫ ВХОДА PROFILE BUILDER *//* Базовые стили формы */.wppb-user-forms {
     margin:0 auto;
     max-width:95%;
     box-sizing:border-box;
     padding:20px;
     border-radius:5px; 
     background:RGBA(255,255,255,1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, .45);        
     box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, .45);  
   }
   /* Прячем ненужные label */.wppb-user-forms form p.login-username label, .wppb-user-forms form p.login-password label {display: none;}
   
   /* Стили полей ввода */.wppb-user-forms form p input.input {
     height:50px;
     width:100%;
     border-radius:3px;
     border:rgba(0,0,0,.3) 2px solid;
     box-sizing:border-box;
     font-family: 'Open Sans', sans-serif;
     font-size:18px; 
     padding:10px;
     margin-bottom:30px;  
   }
   
   /* Акцент стилей полей ввода */.wppb-user-forms form p input.input:focus {
     outline:none;
      border:rgba(24,149,215,1) 2px solid;
      color:rgba(24,149,215,1);
   }
   

Вот такой получился у меня вариант. Думаю, что отредактировать стили CSS не составит труда.