– Go to your blogger site and click on pages.
– Create a new page and name it whatever you want.
– Copy and paste the codes below into
your page's "html view".
<div
class="contact-form-widget">
<div class="form">
<form
name="contact-form">
<p></p>
<br
/>
<input
class="contact-form-name"
id="ContactForm1_contact-form-name" name="name"
placeholder="YOUR NAME *" size="30" style="text-align:
left; width: 100%;" type="text" value="" />
<p></p>
<input
class="contact-form-email"
id="ContactForm1_contact-form-email" name="email"
placeholder="YOUR EMAIL *" size="30"
style="text-align: left; width: 100%;" type="text" value=""
/>
<p></p>
<textarea
class="contact-form-email-message" cols="25"
id="ContactForm1_contact-form-email-message"
name="email-message" placeholder="COMMENTS *"
rows="5" style="text-align: left; width:
100%;"></textarea>
<p></p>
<input
class="contact-form-button contact-form-button-submit"
id="ContactForm1_contact-form-submit" style="width: 100px;"
type="button" value="SEND" />
<br
/>
<p></p>
<div style="text-align: center; width: 100%;">
<p
class="contact-form-error-message"
id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message"
id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>
</div>
– Then click on "publish or update".
– Still, email does not work. You have to activate it by
adding a gadget.
– Click on layout and "add a gadget".
– Click on contact form of pop-up window and give a name
whatever you want.
– Hit the SAVE icon to save the layout.
– Now you have to find the contact form id to add CSS
because you have to hide it otherwise it appears on the blog sidebar.
– Go to your blog's theme and click on the "dropdown
icon" beside the customize button.
– Click on "jump to widget > ContactForm 1"
and copy its id.
– Now go back and click on "customize > advanced > add CSS".
#ContactForm1
{ display: none; }
– Save the changes by clicking on the SAVE button.
illustration images from undraw created by
Katerina Limpitsouni
Comments
Post a Comment