كيف - البريد الإلكتروني النشرة الإخبارية
تعرف على كيفية إنشاء رسالة إخبارية بالبريد الإلكتروني باستخدام CSS.
اشترك في نشرتنا الإخبارية
نص Lorem ipsum حول سبب وجوب الاشتراك في النشرة الإخبارية blabla. نص Lorem ipsum حول سبب وجوب الاشتراك في النشرة الإخبارية blabla. نص Lorem ipsum حول سبب وجوب الاشتراك في النشرة الإخبارية blabla.
كيفية إنشاء رسالة إخبارية
الخطوة 1) أضف HTML
استخدم عنصر <form> لمعالجة الإدخال. يمكنك معرفة المزيد عن هذا في دروسنا في PHP . ثم أضف مدخلات لكل حقل ، جنبًا إلى جنب مع زر "إرسال":
مثال
<form action="action_page.php">
<div class="container">
<h2>Subscribe to our Newsletter</h2>
<p>Lorem ipsum..</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked"
name="subscribe"> Daily Newsletter
</label>
</div>
<div class="container">
<input type="submit"
value="Subscribe">
</div>
</form>
الخطوة 2) أضف CSS:
مثال
/* Style the form element with a border
around it */
form {
border: 4px solid #f1f1f1;
}
/* Add some padding and a grey background color to containers */
.container {
padding: 20px;
background-color: #f1f1f1;
}
/* Style the input elements and the
submit button */
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Add margins to the checkbox */
input[type=checkbox] {
margin-top: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
نصيحة: انتقل إلى البرنامج التعليمي لنموذج HTML الخاص بنا لمعرفة المزيد حول نماذج HTML.
نصيحة: انتقل إلى البرنامج التعليمي لنموذج CSS الخاص بنا لمعرفة المزيد حول كيفية تصميم عناصر النموذج.