Contact Form 7

    Form

    <div id="abc" class="subscribe-form">
    <div class="email-field">
    [email* your-email placeholder "Email Address"]
    </div>
    <div class="submit-button">
    [submit "Send"]
    </div>
    </div>

    Mail

    <strong>Email </strong> [your-email]


    ---------------------------------------------
    [_date] - [_time]

    对应样式

    /*newsletter订阅*/
    #abc {  display: flex;  align-items: center;
    }
    ​#abc .email-field {  flex: 7;  /* 可根据需要调整邮箱框和按钮的宽度比例,目前是7:3 */
    }
    ​#abc .submit-button {  flex: 3;  display: flex;  justify-content: center;  align-items: center;
    }
    ​#abc .email-field{  display: inline-block;  vertical-align: middle;
    }
    #abc .email-field input[type="email"] {  font-weight: bold;  background-color: #6660;  border: none; /* 移除边框 */
    }
    ​#abc .submit-button input[type="submit"] {  background-color: #00B772;  color: #fff; /* 可选,设置按钮文本颜色 */  
    border-radius: 5px!important; /* 调整圆角的大小,根据需要进行调整 */  font-weight: bold;
    }
    ​#abc .email-field input[type="email"]::placeholder {  color: #ededed;
    }
    #abc .email-field input[type="email"]:valid {  color: #00B772;
    }
    ​#abc .email-field input[type="email"]:invalid {  color: #fff;
    }
    Copyright © 2024 XPB | Privacy Policy