Create a contact form
- Go to Layout.
- Add a new Contact form gadget into the Sidebar section.
- Save.
Create a contact page
- Create a new page.
- Write your text and/or social media handles.
- Change view into HTML (pencil tool).
- Copy and paste the code below and save.
<html>
<head>
<div class="widget ContactForm" id="custom_ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<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="Send!" /><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>
Customization
- Go to Theme and click on "Customize".
- Open section "Advanced" in the left menu.
- Click on “Body” to open the drop-down menu and choose "Add CSS".
- Copy the code below and save your changes.
.ContactForm .form-label {
display: none;}
.contact-form-widget, .ContactForm input, .ContactForm textarea {
max-width: 100%;
width: 100%;
margin: 0 auto;
border: 1px solid #000;}
.contact-form-widget {
margin: 0 auto;
border: 0;}
.ContactForm input, .ContactForm textarea {
margin-bottom: 5px;
padding: 15px;}
.contact-form-button-submit, #ContactForm1_contact-form .contact-form-button-submit,
#ContactForm1_contact-form-submit.contact-form-button.contact-form-buttom-submit {
width: 100% !important;
max-width: 120px !important;
height: auto !important;
margin: 10px auto 0 auto !important;
padding: 5px 7px !important;
display: block;
background: #000;
border-radius: 0 !important;
border: 1px solid #000;
color: #ffffff !important;
text-align: center;}
.contact-form-button-submit:focus, .contact-form-button-submit:hover, #ContactForm1_contact-form .contact-form-button-submit:focus, #ContactForm1_contact-form .contact-form-button-submit:hover {
background: #ffffff;
color: #000 !important;
cursor: pointer;}
.ContactForm input:focus, .ContactForm input:hover, .ContactForm textarea:focus, .ContactForm textarea:hover, #ContactForm1_contact-form .contact-form-button-submit:focus, #ContactForm1_contact-form .contact-form-button-submit:hover {
background: #ffffff !important;
border: 1px solid #000000;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;}
.contact-form-success-message, .contact-form-error-message {
position: static;
bottom: 0;
margin-left: 0;
background: #FFFFFF;
border: 0 solid #000000;
box-shadow: 0;
color: #000;
font-size: 11px;
line-height: 19px;
text-align: center;
opacity: 1;}
.contact-form-widget ::-webkit-input-placeholder {color: #000000;}
.contact-form-widget ::-moz-placeholder {color: #000000;}
.contact-form-widget :-ms-input-placeholder {color: #000000;}
.contact-form-widget :-moz-placeholder {color: #000000;}
.sidebar-wrap #ContactForm1 {
display: none;}
Adding link to the top menu
- Copy the link to the page on your blog from the browser.
- Go to Layout.
- Open the Pages/Navigation widget in the top menu section.
- Add a new tab and enter the "New Site Name" (like Contact).
- Paste the link you copied into "New Site URL".
- Save.
If you need more help with setting up your new custom contact page, please contact us.
If you would like the contact from to better match the rest of the template, you can purchase the Custom Theme Changes add-on from our shop and we will happily customize it for you!
Social Media