Login Form Not Working

Hi,

I’ve styled my own login form and placed it on a custom page on my site using the shortcode method, the form is displaying correctly.

I’ve then set the default login page to the custom page that contains this form, logged out and attempted to log back in.

For some reason after entering the username and password for my account the page just refreshes and I am unable to login using my custom form.

I can still get into my site because I have FTP access so that isn’t an issue, however I can’t seem to get my form to work, any ideas?

Thanks in advance!

AFX

Here is the HTML:

<div class="site__container">
<div class="grid__container"><form class="form form--login" action="/wp-login.php" method="post">
<div class="form__field"><label class="fontawesome-user" for="login__username"><span class="hidden">Username</span></label>
<input id="login__username" class="form__input" name="log" required="" type="text" placeholder="     Username" /></div>
<div class="form__field"><label class="fontawesome-lock" for="login__password"><span class="hidden">Password</span></label>
<input id="login__password" class="form__input" name="pwd" required="" type="password" placeholder="     Password" /></div>
<input name="redirect_to" type="hidden" value="" />
<div class="form__field"><input type="submit" value="Sign In" /></div>
</form></div>
</div>

Here is the CSS:

@import url(https://weloveiconfonts.com/api/?family=fontawesome);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: transparent;
  color: #606468;
  font: 400 0.875rem/1.5 "Open Sans", sans-serif;
  margin: 0;
  min-height: 100%;
}

a {
  color: #f7f7f7;
  outline: 0;
  text-decoration: none;
}
a:focus, a:hover {
  text-decoration: underline;
}

input {
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  -webkit-transition: background-color .3s;
          transition: background-color .3s;
}

.site__container {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 3rem 0;
}

.form input[type="password"], .form input[type="text"], .form input[type="submit"] {
  width: 100%;
}
.form--login {
  color: #f7f7f7;
}
.form--login label,
.form--login input[type="text"],
.form--login input[type="password"],
.form--login input[type="submit"] {
  border-radius: 0.25rem;
  padding: 1rem;
}
.form--login label {
  background-color: #151515;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.form--login input[type="text"], .form--login input[type="password"] {
  background-color: #151515;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.form--login input[type="text"]:focus, .form--login input[type="text"]:hover, .form--login input[type="password"]:focus, .form--login input[type="password"]:hover {
  background-color: #151515;
}
.form--login input[type="submit"] {
  background-color: #151515;
  color: #eee;
  font-weight: bold;
  text-transform: uppercase;
}
.form--login input[type="submit"]:focus, .form--login input[type="submit"]:hover {
  background-color: #151515;
}
.form__field {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
}
.form__input {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.align {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

.hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.text--center {
  text-align: center;
}

.grid__container {
  margin: 0 auto;
  max-width: 20rem;
  width: 90%;
}

.form__field {
height: 39px!important;
}

I used frontend CSS to override some of the backend CSS:

.fontawesome-user {
    position: relative;
    right: 15px!important;
    top: 12px!important;
}

.fontawesome-lock {
    position: relative;
    right: 15px!important;
    top: 12px!important;
}

input[type=submit] {
    background: #151515!important;
    width: 195px!important;
    position: relative;
    left: 5px!important;
    margin: 0 0 10px 0;
}

– – – – – – –

https://www.ads-software.com/plugins/ppress/