Custom Login form from Wordpress site to non-Wordpress site

Question

I'm building a new site for client based on Wordpress.They already have a non-Wordpress site that logged in visitors can access (on a different domain). I've searched a solution for this all over for the last month or so but I cant seem to find a solution.

What I need is to add a pop up login form to a menu item on the Wordpress site that will redirect successful login to the non-Wordpress site.

The only thing I've been able to find is custom Worpress logins, but that's not what I need.

I've found different forms that you I can add to the login.php file on Wordpress, but again, this works into providing login to the Wordpress site (which I dont want) and not to the non-Wordpress one.

Does anyone know how I can achieve this and maybe provide instructions and the code? I'm not really a coder besides some basic HTML and CSS so I feel like I've been going in circles without getting any closer to a solution.

So basically the flow that I need would be like this:

1. User clicks on Login menu item on Wordpress site
2. Loging form pops up ion lightbox/modal
3. User enters Username and Password and clicks Submit
4. After clicking Submit, if login is successful, they are redirected to the non-Wordpress site.

If anyone can help with this I would be forever gratefull as I just cant seem to find a solution for this anywhere.

Thanks a lot ion advance

Answer 1

@Akeyla Yes, that's exactly it what I need. So in Wordpress, which files do I need to edit in order to add the code you sent me and the login form? for example I have this code for the form:

    <div>
        User name: <input name="log" type="text" />
   </div>
   <div>
    Password: <input name="pwd" type="password" />
  </div>
  <div>
    <input type="submit" value="Login" />
    <input type="hidden" name="action" value="my_login_action" />
  </div>

This I would add between the tags you sent me. The question now is, where do I add this code in Wordpress and how do I link it to a menu item (login) thats already been created?

Sorry if I sound ignorant I just cant get my head around how this works

Thanks again

Answer 2

So you want to get access on the non WordPress site. If it's right than When you click the login on the menu it should show a login form but the form action should be the non WordPress site's login page action. Than whenever a users enters login credentials. It will forward it to the non WordPress site than there the password might be validated and if the user has access than it will move on. Say for example create it like this

    <?php 
     /** Tempate Name : Login page */
      get_header();  ? >
   <form action="non-wp site login action url" method="post">
     <! --- here your form components -->
         <div>
        User name: <input name="log" type="text" />
         </div>
         <div>
           Password: <input name="pwd" type="password" />
         </div>
         <div>
              <input type="submit" value="Login" />
               <input type="hidden" name="action" value="my_login_action" />
          </div>
   </form>
    <?php get_footer();?>

So your form action will automatically submit it to the non WordPress sites login action. It will be validated there.

As of your second question, Create a file inside your active theme and add the above code. Save it. Than go-to wp-admin than Create a new page and name it as Login and before publishing the page select the template Login Page. Than save it

And now move to Appearances -> Menu here add the Login page to your menu, than save and come to front end. It will show the link. Once you click on it. It will show you the login form.

Than try fill the non WordPress site user credentials and submit it. It will take you to non WordPress site's login action and if it's authorised it will be work there.

Answer 3

@Akelya

Thanks so much for the detailed step by step, I really appreciate it! One last question, what do I save the file as? What extension?

Does it matter in which folder I save it? I am using a child theme to customise some elements of the theme, I'm guessing I should save it there?

EDIT: I've managed to add the form and also open it in a modal iframe. My last question, where would i add the CSS to style the form? Since the file I created is for the template files, it obviously won't take any CSS. Do I just add it to the style sheet I have in the child theme?

Thanks again for all your help