إنشاء صفحة إتصل بنا إحترافية لمدونتك على Blogger

 في عالم التدوين، من الضروري إنشاء تواصل سلس مع جمهورك. نموذج الاتصال هو أداة أساسية تتيح للزوار التواصل، وتقديم الملاحظات، وطرح الأسئلة، أو مناقشة الشراكات المحتملة. تهدف هذه المقالة إلى إرشادك في عملية دمج نموذج اتصال في موقعك على بلوجر باستخدام FormSubmit.co، وهي منصة سهلة الاستخدام وموثوقة تم إنشاؤها لتبسيط عمليات إرسال النماذج. باستخدام FormSubmit.co، يمكنك بسهولة إضافة نموذج اتصال إلى موقعك على Blogger وضمان تسليم سلس للرسائل من جمهورك.

إضافة نمودج صفحة إتصل بنا إلى مدونتك

1. قم بتسجيل الدخول إلى حسابك في بلوجر وانتقل إلى لوحة التحكم لموقعك.
2. اذهب إلى الصفحة التي ترغب في إدراج نموذج الاتصال فيها أو أنشئ صفحة جديدة.
3. التبديل إلى وضع HTML في محرر بلوجر.
4. الصق كود HTML المقدم أدناه في محرر HTML.

ملاحظة!
يرجى استبدال هذا البريد الإلكتروني youremail@email.com ببريدك الإلكتروني. و  غيّر هذا الرابط https://seo-blg.blogspot.com/p/thank-you.html برابط صفحتك. فيما يلي أخبرتك كيف يمكنك إنشاء هذه الصفحة.

<div class="my-contact-form">
  <form
    action="https://formsubmit.co/youremail@email.com"
    method="POST"
    id="contact-form"
  >
    <div>
      <label class="my-contact-form-label" for="name">Name:</label>
      <input class="my-contact-form-input" type="text" id="name" name="name" required />
    </div>
    <div>
      <label class="my-contact-form-label" for="email">Email:</label>
      <input class="my-contact-form-input" type="email" id="email" name="email" required />
    </div>
    <div>
      <label class="my-contact-form-label" for="message">Message:</label>
      <textarea class="my-contact-form-input" id="message" name="message" required></textarea>
    </div>
    <input type="hidden" name="_captcha" value="false" />
    <input type="hidden" name="_template" value="table" />
    <input
      type="hidden"
      name="_next"
      value="https://www.blogbrackets.com/p/thank-you.html"
    />
    <button class="my-contact-form-btn" type="submit">Send</button>
  </form>
</div>
<style>
.my-contact-form{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.my-contact-form form{
  	width: 100%
}
.my-contact-form-label{
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: #07074d;
    margin: 12px 0;
}
.my-contact-form-input{
    width: 100%;
    padding: 12px 0px !important;
    text-indent: 10px !important;
    border-radius: 6px !important;
    border: 1px solid #e0e0e0 !important;
    background: white !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: #6b7280 !important;
    outline: none !important;
    resize: none !important;
}
.my-contact-form-input:focus{
  border-color: #6a64f1 !important;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05) !important;
}
.my-contact-form-btn {
    text-align: center;
    font-size: 16px;
    border-radius: 6px;
    padding: 14px 32px;
    border: none;
    font-weight: 600;
    background-color: #6a64f1;
    color: white;
    width: 100%;
    cursor: pointer;
  	margin-top: 12px;
}
.my-contact-form-btn:hover {
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
</style>

2 : الآن قم بإنشاء صفحة شكر!

أفهم أنك لم تفهم قصدي. ببساطة التزم بهذه الإرشادات.

1. بعد ذلك، افتح صفحة جديدة وسمها بـ "Thank You".
2. بعد ذلك، الصق الكود HTML التالي في محرر الأكواد.
3. الآن، انشر هذه الصفحة.
4. الصق عنوان URL لهذه الصفحة في كود HTML الذي قدمته سابقًا.

<div class="content">
  <div class="wrapper-1">
    <div class="wrapper-2">
      <h2 class="thank-you">Thank you !</h2>
      <p>Thanks for email us.<br> We will reply you very soon.</p>
      <a class="button" href="YOUR BLOG URL HERE">Go To Home</a>
    </div>
  </div>
</div>

<style>
 @import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
  .pTtl{
  	display:none;
  }
    .wrapper-1{
    width:100%;
    height:100vh;
    display: flex;
  flex-direction: column;
      border-radius: 15px;
  }
  .wrapper-2{
    padding :30px;
    text-align:center;
  }
  .thank-you{
      font-family: 'Kaushan Script', cursive !important;
    font-size:4em;
    letter-spacing:3px;
    color:#5892FF ;
    margin:0 !important;
    margin-bottom:20px;
  }
  @media (min-width:600px){
    .content{
    max-width:1000px;
    margin:0 auto;
  }
    .wrapper-1{
    height: initial;
    max-width:620px;
    margin:0 auto;
    margin-top:50px;
    box-shadow: 4px 8px 40px 8px rgba(88, 146, 255, 0.2);
  }
}
</style>

ملاحظة!
لا تنسى تغيير عنوان صفحتك الرئيسية داخل كود HTML.

اختبار الصفحة!

افتح نموذج الاتصال الخاص بك. املأ هذا النموذج وقدم. ستحصل على بريد إلكتروني للتفعيل على البريد الإلكتروني الذي قدمته في نموذج الاتصال الخاص بك. فقط قم بتفعيله. الآن جهة الاتصال الخاصة بك جاهزة لجمع البيانات.

Go to Link