Big Contact WordPress Plugin

Ever wanted a simple way of creating your contact page, with maps, office hours, staff emails, scheduling calendar, and a sweet contact form. We created a simple solution that lets you configure your contact page in a way that was never possible before.

Introducing BigContact WordPress Plugin

BigContact makes it possible for you to quickly and easily create sophisticated custom contact pages. You can use all or any combination of the page components to create your contact page. The elements in BigContact can be placed in any position. Simply create a blank page and choose to insert just a contact form or make it an appointment form. You could also display your business office hours, contact emails for different departments or employees, various phone numbers, and even directions to your business. That’s just half the story, the beauty of the BigContact is that after setting up your store from the plugins setting section, now you have access to display your store contact information on any page or section of the page or post on your site. Yes, the components of the contact page are globally available. You can display the BigContact phone section in your blog posts or show the map and location on an event’s post. Download BigContact from WordPress Repository and let’s start.

BigContact

Features…

  • Quickly create an entire contact page
  • Adapts to the general layout of your site
  • Customizable  form and page layout
  • Quickly modify form labels (Awesome for international users)
  • Contact form
  • Appointment calendar
  • Phone/Fax section
  • Email section
  • Business operation hours
  • Map and driving directions
  • Globally available components
  • Short code generator on your WYSIWIG editor page
  • Customizable calendar layouts (jQuery UI)
  • Spam prevention mechanism without using the annoying CAPTCHA

Installation…

  1. Upload unziped BigContact folder to /wp-content/plugins/ or search for BigContact from Plugins -> Add New , and install.
  2. Activate BigContact from the WordPress admin plugins section.
  3. Modify the BigContact -> Form Options to your specification.
  4. Set Your preferences from BigContact -> Settings
  5. Use short code generator to publish the content in new/edit post/page.

Form Options Page…

To quickly modify labels double-click on any text on the form options page and modify the text. The changes will take instant effect by striking the enter key.

To add or remove email addresses or phone numbers use the buttons.

Click the  to add email addresses or phone numbers and  follow the previous instructions to modify the newly inserted fields.

To display the map you must obtain and insert a Google Maps Api Key. The Api Key can be modified later from the settings page. Follow the instructions in Obtain Google Maps Api Key section to learn how to get your Api Key.

Settings Page…

Here you can specify the form’s behavior. Choose where to send the emails, define confirmation email’s template, update the Google Maps Api Key and change the calendars layout.

General E-mail To

General E-mail To specifies who should receive general emails. More than one email address can be used here. Each email address should be inserted on a new line.

Appointment E-mail To

Appointment E-mail To specifies who receives the appointment emails if this feature is enabled. If the feature is enabled and the field is left empty, email addresses from General E-mail To section will be used. For example: you have an office assistant or secretary that accommodates appointments for you, write their email as recipient.

Appointment Response Settings

The Appointment Response Email template can be customized to your liking. Use the shortcodes provided below personalize the clients input values in the response email.

Short codes are as follows:

  • [name] = clients name
  • = clients email
  • [phone] = clients phone
  • [extra] = clients extra field
  • [message] = clients message
  • [date] => appointment date

 

UI Settings

Under UI settings, you can change the calendar layout to mach with your site color theme. BigContact comes with 3 pre-installed layouts. Form more layouts Follow the instruction in How to Install Calendar Layouts.

Google Maps Api Settings

To display Google Maps, you must insert a Google Maps Api Key. Follow the instructions in Obtain Google Maps Api Key section to learn how to get your Api Key.

Publishing…

In pages/posts…

BigContact adds a new meta-box in post/page edit page alongside of your WYSIWIG editor for ease of access. Use the Screen Options on the top right corner of the page to enable/disable this box.

Simply check the form elements you want to include in your page/post and click Insert into page. This will produce the shortcode and place it on the visual editor. The full shortcode is…

...

Contact Us / Phone Us

Office:123-2556-7890
Toll-Free:888-888-8888

Contact Us / E-Mail

Contact Us / Office Hours

Monday: 8:00 AM-6:00 PM
Tuesday: 8:00 AM-6:00 PM
Wednesday: 8:00 AM-6:00 PM
Thursday: 8:00 AM-6:00 PM
Friday: 8:00 AM-6:00 PM
Saturday: 8:00 AM-6:00 PM
Sunday: Closed

Contact Us / Map & Directions

We are located just seconds away from the beautiful Santa Monica beach. Parking is available inside the building.

...

To display any particular section just include that part. For example, the following will only display the business hours.

...

Contact Us / Office Hours

Monday: 8:00 AM-6:00 PM
Tuesday: 8:00 AM-6:00 PM
Wednesday: 8:00 AM-6:00 PM
Thursday: 8:00 AM-6:00 PM
Friday: 8:00 AM-6:00 PM
Saturday: 8:00 AM-6:00 PM
Sunday: Closed
...

To learn how to rearrange the components you selected visit our Advance Options section.

As Widgets

Navigate to the Appearance menu and select Widgets. Under Available Widgets drag and drop the BigContact widget into a widget area (Sidebar/Footer Area).

BigContact Widget Settings

Expand the widget and select which component you would like to show in the widget area and save. Repeat the process to add other components.


Widgets are perfect solution if you would like to display your contact information such as phone numbers in footer of every page. This way, should your phone numbers change, all you have to do is update your phone number in the plugin’s settings section and your contact information will be updated everywhere on your website.

Obtain a Google Maps Api Key…

  1. Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
  2. Click the Services link from the left-hand menu.
  3. Activate the Google Maps API v3 service.
  4. Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.

Disable Comments

If you choose to create a contact page, often times it is unnecessary to display comments form in that page. To disable comments on a page, make sure “Discussions Box” is enabled from the Screen Options located on the top right corner of the page.

un-check “Allow Comments” will remove the comment box from the contact page.

Advanced Options…

This section is for more advanced users. We will explain how to use some of the experimental features that have not yet been included in current visual editor.

Adding Custom Subjects

This feature enables you to pass along predefined subjects to your form. To enable this feature simply add a query variable “sbj=your custom subject” to the referring link that includes your BigContact from.

example: www.example.com/contact

www.example.com/contact?sbj=Suggestions

How to Install Calendar Layouts…

The calendar uses JQuery Ui. Hence to add new themes for the calendar you will need to download them from JQuery ThemeRoller. There you can customize your own calendar style or simply choose a predefined style from the gallery. Here are step by step directions.

  1. Go to JQuery ThemeRoller
  2. Choose a theme from the “Gallery” or “Roll Your Own”
  3. Once you select a theme press the “Download theme” button
  4. On the next screen make sure  “Core and Datepicker” are selected and press Download.
  5. Extract the downloaded zip file.
  6. Navigate to the css folder inside the extracted folder “jquery-ui-1.8.20.custom/css/” and upload the folder inside the css folder to [your WordPress installation folder]/wp-content/plugins/bigcontact/view/css/here I have installed two new themes “custom-theme” and “ui-darkness”.
  7. Now you can choose the newly installed theme from the settings page.

Customizing Page Layouts…

To achieve customizing the layout of your contact page you should be willing to write some code. Do not let this scare you its really simple. BigContact loads a CSS class that when applied to a component group of the contact page forces the component’s width to be half of the content area. This is very handy to display components next to each other or below each other. In fact when you load all the components together it is this feature that makes sure the map is on the right side and email/phone/hours are on left. We debated long hours and used our imagination and finally called it “bigContact-halfSize”. The number of components you can load is optional and you can use more than one shrotcode statement in your contact page.

...

Contact Us / Map & Directions

We are located just seconds away from the beautiful Santa Monica beach. Parking is available inside the building.

...

And to achieve the effect of our recent client AGPIC‘s contact page, you can use the code below.

...

<div class="bigContact-halfSize">

Contact Us / Phone Us

Office:123-2556-7890
Toll-Free:888-888-8888

Contact Us / E-Mail

</div> <div class="bigContact-halfSize">

Contact Us / Office Hours

Monday: 8:00 AM-6:00 PM
Tuesday: 8:00 AM-6:00 PM
Wednesday: 8:00 AM-6:00 PM
Thursday: 8:00 AM-6:00 PM
Friday: 8:00 AM-6:00 PM
Saturday: 8:00 AM-6:00 PM
Sunday: Closed
</div>

Contact Us / Map & Directions

We are located just seconds away from the beautiful Santa Monica beach. Parking is available inside the building.

...

And if you do not need to use the business hours section then perhaps this layout will suit you best

...

<div class="bigContact-halfSize">

Contact Us / E-Mail

</div> <div class="bigContact-halfSize">

Contact Us / Phone Us

Office:123-2556-7890
Toll-Free:888-888-8888
</div>

Contact Us / Map & Directions

We are located just seconds away from the beautiful Santa Monica beach. Parking is available inside the building.

...

The only line of code you will need is

...
<div class="bigContact-halfSize">[short code]</div>
...

By wrapping these shortcodes with your desired class or id, you could manipulate the layout using CSS and create many custom layouts.

// more coming soon

Questions? Need help with installation? Suggestions?

Should you have any technical questions, or found a possible bug, please post it to our WordPress Plugin Support forum so we can help you resolve the issue.

Help us spread the word

Please help us spread the word by providing us a link back, rating this plugin a 5 star, or even a simple tweet will do.

Please share :]