Custom Contact Page Setup

Some templates come with a styled contact page — which you can view in the demo blog. The contact page matches the rest of the website and you do not need to bother with adding it and styling it yourself. However, you will need to set up the Contact Page on your blog.

Creating a contact page

  1. Create a new page.
  2. Add the title of the page (we recommend only “Contact” or “Contact Page”).
  3. Add your content — you can link your social media account, add your address, email and so on. When you are ready, click on the angle brackets in the top formatting menu — this changes your view to HTML.
  4. Below the content that you added, copy and paste the following code:

<div class="contactpage">
<html>
<head>
<div class="widget ContactForm" id="custom_ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<label>Your Name</label>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="" size="30" type="text" value="" />
<label>Email Address</label>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="" size="30" type="text" value="" />
<label>Message</label>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Your message" rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><br />
<div style="text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
</head>
</html>
</div>


You can also turn off the comments on the page if you prefer.