How to Set Up a Blog Contact Page

You’re only steps away from having a beautiful new WordPress blog!  It’s time to add the all important Contact page.  Modern society is built on communication and we need to give people a way to communicate with you.  This page is going to be super critical when large corporations come to you with their stacks of cash offering to pay for advertising space on your blog.  So, let’s give them a place to do just that!

Hover over the Pages tab and click on the All Pages link.wordpress-pages-all-pagesYou should see a list of all of the pages on your site.  Click on the Contact page link.wordpress-pages-all-pagesIn the Salient theme, there are a number of page templates that you have at your disposal.  These templates have been created by the developer of the theme to speed up the website building process for you.  We’re going to use the Contact page template.  On the righthand side of the page, you’ll see a box that says Page Attributes.  Select the Template that you will be using for this page – Contact.salient-theme-contact-page-templateClick Update.  This will update the page template for you.salient-theme-portfolio-item-updateNow, click on the Visual Composer button.salient-theme-visual-composer-buttonNow that you see the Visual Composer options, click on the Add Row button.salient-theme-visual-composer-add-rowClick on the pencil icon in the top right of the row.salient-theme-visual-composer-edit-rowThis will open up a modal (visible below).  Select the following settings.

  • Type – In Container
  • Padding Bottom – 60

Click the blue Save button.salient-theme-edit-row-in-container-padding-bottomThen, click the big plus sign in the middle of the row.salient-row-add-shortcodeSelect Divider from the list.salient-theme-add-divider-elementThis will bring up the modal below.  Select the following.

  • Dividing Height – 90

Click the blue Save button.salient-theme-divider-element-height-90Click the plus icon underneath the divider section.salient-theme-divider-element-add-elementSelect the Text Block element from the list of options.salient-theme-elements-add-text-blockThis brings up the Text Block modal.  Make sure to click on the Text tab and add the following code to the text editor.

<h2 style="text-align: center;">Contact Us</h2>

salient-theme-edit-text-block-element-contact-us-titleClick on the plus sign underneath the Contact Us section.salient-theme-add-divider-to-contact-usSelect the Divider element from the list.salient-theme-add-divider-elementThe Edit Divider modal should pop up.  Enter the following settings.

  • Dividing Height – 40
  • Line Type – No Line

Click the blue Save button.salient-theme-divider-element-height-40Click on the plus sign underneath the second divider section.salient-theme-add-row-contact-us-2Select Row from the list.salient-theme-elements-add-row-elementThis will add a row to your Visual Composer (it should look like the below image). Hover over the Custom Layout tab on the top left of the row. Select the 1/3 + 1/3 + 1/3 option.salient-theme-row-three-column-layoutThis should display the following image within the Visual Composer.  Click on the plus sign in the first 1/3 section.salient-theme-row-one-third-layout-plus-signSelect Text Block from the list.salient-theme-elements-add-text-blockThe following Edit Text Block modal should appear. Click on the Text tab in the top right corner and copy and paste the following text into the text editor. Replace the mindless@mm.com email address with  yours.

<h3 class="margin-bottom:0" style="text-align: center;">Email</h3><p style="text-align: center;">mindless@mm.com</p>

Click the blue Save button.salient-theme-edit-text-block-contact-us-emailNow, click on the plus sign in the second 1/3 section.salient-theme-three-column-layout-middle-plus-signSelect Text Block from the list of elements that are shown.salient-theme-elements-add-text-blockThe following Edit Text Block modal should appear. Click on the Text tab in the top right corner and copy and paste the following text into the text editor. Replace the phone number with yours (or with someone you want to mess with 😉 ).

<h3 class="margin-bottom:0" style="text-align: center;">Phone</h3>
<p style="text-align: center;">555-555-5555</p>

Click the blue Save button.salient-theme-edit-text-block-contact-phoneYou should see the following within the Visual Composer.  Click on the plus sign in the last 1/3 section.salient-theme-edit-row-three-column-layout-last-columnSelect Text Block from the list of elements that are shown.salient-theme-elements-add-text-blockThe following Edit Text Block modal should appear. Make sure to click on the Text tab in the top right corner and copy and paste the following text into the text editor. Replace the address with yours.

<h3 class="margin-bottom:0" style="text-align: center;">Address</h3><p style="text-align: center;">Santa Monica, California</p>

Click the Save button at the bottom of the modal.salient-theme-edit-text-block-contact-addressClick on the plus sign below the 1/3 + 1/3 + 1/3 row at the bottom of the page.salient-theme-visual-composer-add-element-contact-usSelect the Divider element from the list.salient-theme-add-divider-elementThe Edit Divider modal will pop-up.  Select the following settings for the Divider.

  • Divider Height – 20

Click on the blue Save button.salient-theme-divider-element-height-20Once the modal has closed, you should see an updated Visual Composer layout.  Click on the plus sign below the divider section that you just created.salient-theme-add-divider-element-contact-4Select the Divider element from the list.salient-theme-add-divider-elementThis brings up the Edit Divider modal.  Select the following settings for the divider.

  • Dividing Height – 60
  • Line Type – Full Width Line

Don’t forget to click the blue Save button!salient-theme-divider-element-height-60-full-width-lineThis modal should close and you should see the updated page structure.  Click on the plus icon at the bottom of the Visual Composer editor.salient-theme-add-row-element-5Add a text section after your last divider by clicking on the text block button.salient-theme-elements-add-text-blockAdd content to the Edit Text Block modal.

We added the following text, in case you want to be a copy cat! We might tattle tale on you, to ourselves, hehehe 😉

There are three ways to contact us from this contact page.  You can email us.  You can call us, we like that.  You can mail a letter to our address, though it doesn’t have a street number, so it’d be fun to see where it ends up.  Finally, you can fill out the form located directly below this paragraph.  Wait, that’s 4 ways of contacting us.  Oh, and you can contact the author directly on the about page.  So, really there are approximately 8 ways of contacting us.  See, this is what happens when you mindlessly write content for your Contact Us page.

Also, click on the blue Save button.salient-theme-edit-text-block-elementNow is the time when, you guessed it, you will see the image below in the Visual Composer. Click on the plus sign at the bottom of the page.wordpress-salient-add-full-line-divider-2Click on the divider button in the list.salient-theme-add-divider-elementIn the Edit Divider modal, select the following settings.

  • Divider Height – 60
  • Line Type – Full Width Line

Click the blue Save button at the bottom of the modal.salient-theme-divider-element-height-60-full-width-lineClick on the plus sign at the bottom of the Visual Composer.salient-theme-visual-composer-add-element-7Time to add some magic communicating functionality to the Contact page.  The little piece of code that you’re going to add will stick a form on the Contact page.  This will give your blog readers the ability to email you directly through your website.

Select Contact Form 7 from the list.

You may, or may not, remember that we installed the Contact Form 7 plugin in an earlier step.  We did this so that you could easily add a contact form to your contact page in this step.  We’re trying to make your life easier so that you do things in organized chunks and don’t have to go back and forth between different WordPress functionality.salient-theme-add-element-contact-form-7Then, you should be shown the Edit Contact Form 7 pop-up.  Make the following edits.
  • Form Title – Contact Us
  • Select contact form – Contact form 1 (or if you named the form differently select the name you used)

Click the blue Save button.salient-theme-edit-contact-form-7That should be pretty much it for building the page structure for the Contact page!!  You’re almost home free.  We need to navigate to a couple other pages to take care of a few more items to officially finish up the Contact page.  Before we do, make sure to click that beautiful blue Update button on the right hand side of the page to save your work, otherwise you will cry and swear at us!!salient-theme-portfolio-item-update

Contact Form Plugin Settings

Hover over the Contact tab in the left sidebar and click on the Contact Forms.salient-theme-contact-formYou will see a list of all of the contact forms (if for whatever reason there isn’t an existing form, then click the Add New link and follow the instructions).  Hover over Contact form 1 and click the Edit link.salient-theme-contact-form-7-editThis will bring up the Edit Contact Form page.  Here, you can edit the text associated with each field in the contact form by editing the content in the text box labeled Form.  Our contact form has the following fields.

  • Name
  • Email
  • Subject
  • Message

Feel free to copy the code below and paste it in the form.  If you want additional fields (i.e. – Phone Number, Address, etc.), click the Generate Tag button and choose the type of field that you would like to add.

<p>Your Name (required)<br />
[text* your-name] </p>
<p>Your Email (required)<br />
[email* your-email] </p><p>Subject<br />
[text your-subject] </p><p>Your Message<br />
[textarea your-message] </p>
<p>[submit "Send"]</p>

Make sure to change the To: field under the Mail section (which is set to youremail@yourdomain.com in the image below) to whatever email address that you want receiving your contact messages.  You can also change the From: field under the Mail section to whatever email address you want the contact messages to be sent from.

Finally, make sure to click the blue Save button (to save any edits that you made).salient-theme-contact-form-edit-form

Add a Map to the Contact Page

Let’s add a sweet map to your Contact page.  We’ll start by adjusting the location shown on the Google map at the top of the page.  (FYI – the Contact template that we chose originally for this page has the Google Map baked into the page).

Hover over the Salient link in the left sidebar and click on Contact.salient-theme-salient-contact-settingsGo to where it says Map Center Latitude and Map Center Longitude.  Search for your address or your city on Google.com plus the words “longitude and latitude.”  We’re using the longitude and latitude for Santa Monica, CA (where we live). We got 34.0219° N, 118.4814° W in the results.  So, the longitude is -118.4814 (it’s negative bc it’s West) and the latitude is 34.0219 (it’s positive bc it’s North).

Next, check the box next to Greyscale Color and set the Map Extra Color to #777777.

Then, click on the green Save Changes button.salient-theme-contact-map-settingsBOOM!! The Contact page is done!  Holy SNIKES!!  Only a few more steps and you’re beautiful new blog will be complete!  Next up, it’s time to build a sexy stylish about page.  Get excited!

Leave a Reply

Your email address will not be published. Required fields are marked *