In fact, the domain name hanada.info is mainly used as the domain name mailbox. I use Tencent's corporate mailbox. Tencent Enterprise Mail provides a login method of mail.domain.xx, but this method requires that the domain name has been filed, and the optional page template is also very dull. Therefore, you can actually design a page to log in. To achieve this function, you can use the "Login Template" interface provided by Tencent E-Mail, which can be found on the mailbox management page - Toolbox - Login Template.

After clicking Get Code, Tencent E-mail provided the following code

 <style> .bizmail_loginpanel{font-size:12px;width:300px;height:auto;border:1px solid #cccccc;background:#ffffff;} .bizmail_LoginBox{padding:10px 15px;} .bizmail_loginpanel h3{padding-bottom:5px;margin:0 0 5px 0;border-bottom:1px solid #cccccc;font-size:14px;} .bizmail_loginpanel form{margin:0;padding:0;} .bizmail_loginpanel input.text{font-size:12px;width:100px;height:20px;margin:0 2px;border:1px solid #C3C3C3;border-color:#7C7C7C #C3C3C3 #C3C3C3 #9A9A9A;} .bizmail_loginpanel .bizmail_column{height:28px;} .bizmail_loginpanel .bizmail_column label{display:block;float:left;width:30px;height:24px;line-height:24px;font-size:12px;} .bizmail_loginpanel .bizmail_column .bizmail_inputArea{float:left;width:240px;} .bizmail_loginpanel .bizmail_column span{font-size:12px;word-wrap:break-word;margin-left: 2px;line-height:200%;} .bizmail_loginpanel .bizmail_SubmitArea{margin-left:30px;clear:both;} .bizmail_loginpanel .bizmail_SubmitArea a{font-size:12px;margin-left:5px;} .bizmail_loginpanel select{width:110px;height:20px;margin:0 2px;} </style> <script type="text/javascript" src=" http://exmail.qq.com/zh_CN/htmledition/js_biz/outerlogin.js "  charset="gb18030"></script> <script type="text/javascript"> writeLoginPanel({domainlist:"hanada.info", mode:"vertical"}); </script>

As shown in the figure above, the display effect is very poor. The next step is to start magic transformation

The first provided code loads html by referencing js externally. We just put this code into the page and press F12 to get the html code called by js. as follows

 <div id="divLoginpanelVer" class="bizmail_loginpanel"> <div class="bizmail_LoginBox"> <h3>Log in to mailbox</h3> <form name="form1" action=" https://exmail.qq.com/cgi-bin/login " target="_blank" method="post" onsubmit="return checkInput()"> <input type="hidden" name="firstlogin" value="false"> <input type="hidden" name="errtemplate" value="dm_loginpage"> <input type="hidden" name="aliastype" value="other"> <input type="hidden" name="dmtype" value="bizmail"> <input type="hidden" name="p" value=""> <div class="bizmail_column"> <label>Account:</label> <div class="bizmail_inputArea"> <input type="text" name="uin" class="text" value="">@ <span>hanada.info</span> <input type="hidden" name="domain" value="hanada.info"> </div> </div> <div class="bizmail_column"> <label>Password:</label> <div class="bizmail_inputArea"> <input type="password" name="pwd" class="text" value=""> </div> </div> <div class="bizmail_SubmitArea"> <input type="submit" class="" name="" style="width: 66px;" value="Login"> <a href=" https://exmail.qq.com/cgi-bin/readtemplate?check=false&amp ; T=bizmail_orz "target=" _blank "rel=" nooopener noreferrer ">Forgot your password</a> </div> </form> </div> </div>

It can be observed that the address for submitting login information is https://exmail.qq.com/cgi-bin/login The name of the account (excluding the suffix) is uin, and the name of the password is pwd. In addition, the name of the domain name suffix (@ hanada. info) is domain, but it is hidden. The default is hanada.info. If you change hidden to text, you can enter any domain name to log in to the corresponding Tencent corporate mailbox. For the sake of beauty, I still keep hidden here.

In addition, the following parts are not clear to me, so they will not appear on the page without changes

 <input type="hidden" name="firstlogin" value="false"> <input type="hidden" name="errtemplate" value="dm_loginpage"> <input type="hidden" name="aliastype" value="other"> <input type="hidden" name="dmtype" value="bizmail"> <input type="hidden" name="p" value="">

After knowing the basic structure of its code, you can customize a login form page. I directly moved the KodExplorer for convenience and beauty（ https://kodcloud.com/ ）Their original login interface can be found in http://demo.kodcloud.com see.
After copying, just change the submission object of the form to https://exmail.qq.com/cgi-bin/login Note that it is recommended to remove target="_blank", otherwise it will open in a new window after login.

 <form action=" https://exmail.qq.com/cgi-bin/login " method="post" onsubmit="return checkInput()">

Then change the name value of the account and password boxes,

 <div class="inputs"> <div> <i class="font-icon icon-user"></i> <input type="text" name="uin" type="text" placeholder="mailbox prefix" autocomplete="on"> <input type="hidden" name="domain" class="text1" value="hanada.info"> </div> <div> <i class="font-icon  icon-key"></i> <input id="password" name="pwd" type="password" placeholder="mailbox password" autocomplete="on"> </div> </div>

Note: For the sake of beauty, I didn't let @ hanada.info appear. The account entered the email prefix.

Then copy the above five lines of input type="hidden" to the corresponding location, and the actual measurement shows that you can log in to the mailbox

Note: The KodExplorer login page html refers to some js, which causes problems in the login process. Delete the js call at the bottom of the html to log in normally.

Change some words on the page and delete some unnecessary parts to use normally. Finally, I will show my email login interface.