Contact Page

Here are the steps to create a contact page using the Contact Form 7 plugin which allows you to create multiple contact forms, and customize the inputs.

Update: This video is outdated. The theme options panel has been replaced with the WordPress customizer. Check out how to add custom css

CSS Code

/* 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.

Related: Emails Don't Work / Email Problems

Related Articles
Last updated on July 29th, 2017

Leave A Comment?

Looking Help?
1. First search the knowledge base for answers. Email support can take 48 hours.
2. If something is not working, please read trouble shooting problems.
3. If those do not help, provide a website link to help speed up the process.