Neues Login Formular mit alter Datenbank.

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Skyfay

Mitglied
21 März 2020
76
0
6
17
Hallo Zusammen

Ich habe halt bei dem einen Plugin von WP eine Datei welche ein Anmeldeformular ausführt.
Da muss ich nur bei Elementor ein Textfeld machen, und dann den Text einfügen "[swpm_login_form]".
Nun habe ich ein eigenes Anmeldeformular mit HTML und CSS gebaut und würde gerne dieses verwenden.
Ich habe nun gehofft, dass ich das oben irgendwie einschliessen kann mit meinem neuen Login Formular da hinter dem "[swpm_login_form]" ja auch die Datenbank etc. steckt.

Ist das ganze umsetzbar?

Code:
HTML neues Login Formular:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>َAnimated Login Form</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

<form class="box" action="index.html" method="post">
  <h1>Login</h1>
  <input type="text" name="" placeholder="Username">
  <input type="password" name="" placeholder="Password">
  <input type="submit" name="" value="Login">
</form>


  </body>
</html>


CSS neues Login Formular:

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #191919;
}
.box{
  width: 300px;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #191919;
  text-align: center;
}
.box h1{
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}
.box input[type = "text"],.box input[type = "password"]{
  border:0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
  width: 280px;
  border-color: #2ecc71;
}
.box input[type = "submit"]{
  border:0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #2ecc71;
  padding: 14px 40px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}
.box input[type = "submit"]:hover{
  background: #2ecc71;
}

Auf dem Bild sieht man alles wenn es um das andere Anmeldeformular geht.
Ansonsten eventuell auf "https://skyfay.ch/login".

Ich habe schon versuchte oben die Klassen auszutauschen, hat aber irgendwie nicht richtig funktioniert.

1604302662643.png

Hier noch zum Bild:

Code:
<div class="swpm-login-widget-form">
    <form id="swpm-login-form" name="swpm-login-form" method="post" action="" class="form-group">
        <div class="swpm-login-form-inner">
            <div class="swpm-username-label">
                <label for="swpm_user_name" class="swpm-label">Benutzername oder E-Mail</label>
            </div>
            <div class="swpm-username-input form-group">
                <input type="text" class="swpm-text-field swpm-username-field form-control" id="swpm_user_name" value="" size="25" name="swpm_user_name" style="opacity: 1;">
            </div>
            <div class="swpm-password-label">
                <label for="swpm_password" class="swpm-label">Passwort</label>
            </div>
            <div class="swpm-password-input form-group">
                <input type="password" class="swpm-text-field swpm-password-field form-control" id="swpm_password" value="" size="25" name="swpm_password">
            </div>
            <div class="swpm-remember-me">
                <span class="swpm-remember-checkbox"><input type="checkbox" name="rememberme" value="checked='checked'"></span>
                <span class="swpm-rember-label"> Remember Me</span>
            </div>
            
            <div class="swpm-before-login-submit-section"></div>
            
            <div class="swpm-login-submit">
                <input type="submit" class="swpm-login-form-submit" name="swpm-login" value="Anmelden">
            </div>
            <div class="swpm-forgot-pass-link">
                <a id="forgot_pass" class="swpm-login-form-pw-reset-link" href="https://skyfay.ch/membership-login/password-reset-2/">Haben Sie Ihr Passwort vergessen?</a>
            </div>
            <div class="swpm-join-us-link">
                <a id="register" class="swpm-login-form-register-link" href="https://skyfay.ch/user-plans/">Werden Sie Mitglied bei uns</a>
            </div>
            <div class="swpm-login-action-msg">
                <span class="swpm-login-widget-action-msg"></span>
            </div>
        </div>
    </form>
</div>

Vielen Dank für jede Hilfe.
 
Zuletzt bearbeitet:

m.scatello

Senior HTML'ler
15 Februar 2017
1.355
163
63
Das wird nichts werden. Wenn du den Shortcode einsetzt, muss du das Forular auch per Plugin bauen. Ansonsten muss du dir selber ein Script schreiben, dass die Daten aus dem Formular aufnimmt und verarbeitet.
 

m.scatello

Senior HTML'ler
15 Februar 2017
1.355
163
63
Das geht immer. Entweder per Custom-CSS oder, wenn du ein Child-Theme erstellt hast, in dessen CSS-Datei.
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Das Problem ist ich habe schonmal versucht das so einigermassen zu überschreiben aber es sah am Ende nie so aus wie das, welches ich erstellt habe.
Meistens ist am Ende irgendwas komisches entstanden.