1. Home
  2. Adding Content
  3. Contact Form / Page

Contact Form / Page

Here are the steps to follow to create a contact page.

Image Preview

Install Contact Form Plugin

  1. Click Add New under Plugins.
  2. Search for Contact 7 in the input at the top right.
  3. Click Install Now, then Activate

Create the Contact Form

  1. Click Add New under Contact on the sidebar.
  2. Name the contact form.
  3. Optional: Modify the text that appears in the contact form.
  4. Optional: Click the Mail tab and the To email, from email, and message.
  5. Click Save.
  6. Copy the shortcode that appears in the blue box.

Create the Contact Page

  1. Click Add New under Pages.
  2. Give the page a title. Example: Contact
  3. Enter text into the text area.
  4. Paste the shortcode into the text area.
  5. Under template select Full Width.
  6. Optional: Add meta description.
  7. Click Publish

Style the Contact Form

Add the custom CSS below to style the contact form. How to Add CSS

/* Contact Form 7 */
/* Inputs */ .wpcf7-form input, .wpcf7-textarea { padding: 8px; font-size: 15px; width: 70%;}
/* Bold Labels */ .wpcf7-form p { font-weight: bold; }
/* Form Button */.wpcf7-submit { background-color: #333333; border: none; color: #ffffff; font-weight: bold; }
/* Mobile Resize */ @media (max-width: 480px) { .wpcf7-form input, .wpcf7-textarea { width: 90%;} }

If you want to change the button color change background-color: #333333; for .wpcf7-submit above.

Test the Contact Form

Test out the contact form to make sure it works.

If you don’t receive the test email check out this post:  Emails Don’t Work / Email Problems

Updated on November 4, 2017

Was this article helpful?

Related Articles

Leave a Comment