Share beautiful Contact form template for Blogspot

haikv121Tháng mười một 7, 2024

0 263 1 minute read

Are you looking for a beautiful Contact form template for Blogspot? You haven’t found a suitable form template from other blogspot sites?

So stop for a few minutes at tranbadat.info to see the beautiful Contact page form template for you, I think it will be hard for anyone not to be satisfied.

This is a form template that I think is only available on “blogs created by me (wifikillpro), and SHARE EVERYTHING is also using it”. This form template is designed and used exclusively for Blogspot, so it will not be used for websites using other source codes.

Contact form template for Blogspot

To create a Contact form like the demo image below, please follow the instructions for creating my Contact form below:

This form can be created anywhere, however, in my opinion, you should create the contact form on a separate page. Here, I recommend using the “Pages” section in Blogspot settings :

1. Go to “Page” -> “Trang mới” (New page).

2. Switch to the tab HTML.

3. Copy the entire code below and paste it there:

  <img alt=”Liên hệ Trần Bá Đạt” height=”230″ src=”https://lh3.ggpht.com/-ikSVvk6ykts/WO-jkgJR2NI/AAAAAAAAENM/NCN7y9lDEi4OFOn0CRDORSKeJDcju4CuACLcB/s1600/lien-he.png” style=”border-image: none; border: medium;” title=”Liên hệ Trần Bá Đạt” width=”640″ />
</div> Tôi sẽ rất vui lòng nếu nhận được sự phản hồi của các bạn. Nếu có gì chưa chính xác, hay nếu muốn đề xuất nội dung được viết trên <a href=”https://www.tranbadat.com/”>tranbadat.info</a> thì hãy gửi yêu cầu đến tôi. Tôi sẽ cố gắng hỗ trợ các bạn một cách nhanh nhất và tốt nhất. Cảm ơn! <br />
<form id=”kontak-arlina” name=”contact-form”>
  <input id=”ContactForm1_contact-form-name” name=”name” placeholder=”Tên *” size=”30″ type=”text” value=”” />
  <input id=”ContactForm1_contact-form-email” name=”email” placeholder=”Email *” size=”30″ type=”text” value=”” />
  <textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” placeholder=”Nội dung *” rows=”5″></textarea>
  <input id=”ContactForm1_contact-form-submit” type=”button” value=”Gửi tin nhắn” />
  <br />
  <div style=”max-width: 100%; text-align: center; width: 100%;”>
    <div id=”ContactForm1_contact-form-error-message”></div>
    <div id=”ContactForm1_contact-form-success-message”></div>
  </div>
</form>
<br />
<ul>
  <li>Email: tran.badat1992@gmail.com</li>
  <li>https://wifikillpro.com/</li>
  <li>Skype: tran.badat1992</li>
</ul>
<style scoped=”” type=”text/css”>
  #comments,
  .post_meta,
  #blog-pager {
    display: none
  }

  form {
    color: #666
  }

  form.payforpal {
    margin: auto;
    text-align: center
  }

  #kontak-arlina {
    margin: auto;
    max-width: 640px
  }

  #ContactForm1_contact-form-name,
  #ContactForm1_contact-form-email {
    display: inline-block;
    width: 45%;
    height: auto;
    background: #fff;
    margin: 20px auto;
    padding: 15px 12px;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.2);
    float: left;
    transition: all 0.2s
  }

  #ContactForm1_contact-form-email {
    float: right
  }

  #ContactForm1_contact-form-email-message {
    width: 100%;
    height: 175px;
    margin: 5px 0 20px 0;
    padding: 15px 12px;
    background: #fff;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.2);
    resize: none;
    transition: all 0.3s
  }

  #kontak-arlina br {
    display: none
  }

  #ContactForm1_contact-form-name:focus,
  #ContactForm1_contact-form-email:focus,
  #ContactForm1_contact-form-email-message:focus {
    outline: none;
    background: #fff;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  #ContactForm1_contact-form-submit {
    float: left;
    background: #e74c3c;
    color: #fff;
    margin: auto;
    vertical-align: middle;
    cursor: pointer;
    padding: 16px 20px;
    font-size: 15px;
    text-align: center;
    letter-spacing: .5px;
    border: 0;
    width: 100%;
    font-weight: 500;
    transition: all .2s
  }

  #ContactForm1_contact-form-submit:hover,
  #ContactForm1_contact-form-submit:focus {
    background: #c0392b;
    color: #fff;
  }

  #ContactForm1_contact-form-error-message,
  #ContactForm1_contact-form-success-message {
    width: 100%;
    margin-top: 35px
  }

  .contact-form-error-message-with-border {
    background: #f47669;
    border: 0;
    box-shadow: none;
    color: #fff;
    padding: 5px 0;
    border-radius: 3px
  }

  .contact-form-success-message {
    background: #4fc3f7;
    border: 0;
    box-shadow: none;
    color: #fff;
    border-radius: 3px
  }

  img.contact-form-cross {
    line-height: 40px;
    margin-left: 5px
  }

  .post-body input {
    width: initial
  }

  @media only screen and (max-width: 640px) {

    #ContactForm1_contact-form-name,
    #ContactForm1_contact-form-email,
    #ContactForm1_contact-form-submit {
      width: 100%;
      float: none
    }
  }
</style>
<script type=”text/javascript”>
  //
  < ![CDATA[
      if (window.jstiming) window.jstiming.load.tick(‘widgetJsBefore’); //]]>
</script>
<script src=”https://www.blogger.com/static/v1/widgets/2271878333-widgets.js” type=”text/javascript”></script>
<script type=”text/javascript”>
  //
  < ![CDATA[
      if (typeof(BLOG_attachCsiOnload) != ‘undefined’ && BLOG_attachCsiOnload != null) {
        window[‘blogger_templates_experiment_id’] = “templatesV1”;
        window[‘blogger_blog_id’] = ‘5996935446171071211‘;
        BLOG_attachCsiOnload(”);
      }
      _WidgetManager._Init(‘ //www.blogger.com/rearrange?blogIDx3d5996935446171071211‘,’//www.tranbadat.com/’,’5996935446171071211‘); _WidgetManager._RegisterWidget(‘_ContactFormView’, new _WidgetInfo(‘ContactForm1’, ‘footer1’, null, document.getElementById(‘ContactForm1’), {‘contactFormMessageSendingMsg’: ‘Đang gửi…’, ‘contactFormMessageSentMsg’: ‘Tin nhắn của bạn đã được gửi.’, ‘contactFormMessageNotSentMsg’: ‘Tin nhắn của bạn chưa được gửi. Vui lòng thử lại sau.’, ‘contactFormInvalidEmailMsg’: ‘Vui lòng thêm địa chỉ email hợp lệ.’, ‘contactFormEmptyMessageMsg’: ‘Nội dung không được để trống.’, ‘title’: ‘Mẫu liên hệ’, ‘blogId’: ‘5996935446171071211‘, ‘contactFormNameMsg’: ‘Tên’, ‘contactFormEmailMsg’: ‘Email’, ‘contactFormMessageMsg’: ‘Nội dung’, ‘contactFormSendMsg’: ‘Gửi tin nhắn’, ‘submitUrl’: ‘https://www.blogger.com/contact-form.do’}, ‘displayModeFull’)); //]]>
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

</div> Tôi sẽ rất vui lòng nếu nhận được sự phản hồi của các bạn. Nếu có gì chưa chính xác, hay nếu muốn đề xuất nội dung được viết trên <a href=”https://www.tranbadat.com/”>tranbadat.info</a> thì hãy gửi yêu cầu đến tôi. Tôi sẽ cố gắng hỗ trợ các bạn một cách nhanh nhất và tốt nhất. Cảm ơn! <br />

<br />

</div>

</form>

<br />

<ul>

<li>Email: tran.badat1992@gmail.com</li>

<li>https://wifikillpro.com/</li>

<li>Skype: tran.badat1992</li>

</ul>

#comments,

.post_meta,

#blog-pager {

display: none

}

form {

color: #666

}

form.payforpal {

margin: auto;

text-align: center

}

#kontak-arlina {

margin: auto;

max-width: 640px

}

#ContactForm1_contact-form-name,

#ContactForm1_contact-form-email {

display: inline-block;

width: 45%;

height: auto;

background: #fff;

margin: 20px auto;

padding: 15px 12px;

color: #000;

border: 1px solid rgba(0, 0, 0, 0.2);

float: left;

transition: all 0.2s

}

#ContactForm1_contact-form-email {

float: right

}

#ContactForm1_contact-form-email-message {

width: 100%;

height: 175px;

margin: 5px 0 20px 0;

padding: 15px 12px;

background: #fff;

color: #000;

border: 1px solid rgba(0, 0, 0, 0.2);

resize: none;

transition: all 0.3s

}

#kontak-arlina br {

display: none

}

#ContactForm1_contact-form-name:focus,

#ContactForm1_contact-form-email:focus,

#ContactForm1_contact-form-email-message:focus {

outline: none;

background: #fff;

color: #000;

border: 1px solid rgba(0, 0, 0, 0.2);

}

#ContactForm1_contact-form-submit {

float: left;

background: #e74c3c;

color: #fff;

margin: auto;

vertical-align: middle;

cursor: pointer;

padding: 16px 20px;

font-size: 15px;

text-align: center;

letter-spacing: .5px;

border: 0;

width: 100%;

font-weight: 500;

transition: all .2s

}

#ContactForm1_contact-form-submit:hover,

#ContactForm1_contact-form-submit:focus {

background: #c0392b;

color: #fff;

}

#ContactForm1_contact-form-error-message,

#ContactForm1_contact-form-success-message {

width: 100%;

margin-top: 35px

}

.contact-form-error-message-with-border {

background: #f47669;

border: 0;

box-shadow: none;

color: #fff;

padding: 5px 0;

border-radius: 3px

}

.contact-form-success-message {

background: #4fc3f7;

border: 0;

box-shadow: none;

color: #fff;

border-radius: 3px

}

img.contact-form-cross {

line-height: 40px;

margin-left: 5px

}

.post-body input {

width: initial

}

@media only screen and (max-width: 640px) {

#ContactForm1_contact-form-name,

#ContactForm1_contact-form-email,

#ContactForm1_contact-form-submit {

width: 100%;

float: none

}

</style>

< ![CDATA[

if (window.jstiming) window.jstiming.load.tick(‘widgetJsBefore’); //]]>

</script>

< ![CDATA[

if (typeof(BLOG_attachCsiOnload) != ‘undefined’ && BLOG_attachCsiOnload != null) {

window[‘blogger_templates_experiment_id’] = “templatesV1”;

window[‘blogger_blog_id’] = ‘5996935446171071211‘;

BLOG_attachCsiOnload(”);

}

_WidgetManager._Init(‘ //www.blogger.com/rearrange?blogIDx3d5996935446171071211‘,’//www.tranbadat.com/’,’5996935446171071211‘); _WidgetManager._RegisterWidget(‘_ContactFormView’, new _WidgetInfo(‘ContactForm1’, ‘footer1’, null, document.getElementById(‘ContactForm1’), {‘contactFormMessageSendingMsg’: ‘Đang gửi…’, ‘contactFormMessageSentMsg’: ‘Tin nhắn của bạn đã được gửi.’, ‘contactFormMessageNotSentMsg’: ‘Tin nhắn của bạn chưa được gửi. Vui lòng thử lại sau.’, ‘contactFormInvalidEmailMsg’: ‘Vui lòng thêm địa chỉ email hợp lệ.’, ‘contactFormEmptyMessageMsg’: ‘Nội dung không được để trống.’, ‘title’: ‘Mẫu liên hệ’, ‘blogId’: ‘5996935446171071211‘, ‘contactFormNameMsg’: ‘Tên’, ‘contactFormEmailMsg’: ‘Email’, ‘contactFormMessageMsg’: ‘Nội dung’, ‘contactFormSendMsg’: ‘Gửi tin nhắn’, ‘submitUrl’: ‘https://www.blogger.com/contact-form.do’}, ‘displayModeFull’)); //]]>

</script>

4. Edit the notes below so that the contact email will be sent to your correct account:
– The blue id: 5996935446171071211 you need to replace it with the correct ID of your blog.
– The red link: wifikillpro.com replace it with your website address.
– You can customize other contact content above the code.

5. Name the page Contact or whatever you like, then save.

So you have a contact page with a very nice form for blogspot. The content after being sent from the contact page will be sent directly to your blog’s notification email. So don’t worry about losing it.