Big Cartel Theme Support

How do I add and customise my contact page and form in my Big Cartel shop?

How do I add and customise my contact page and form in my Big Cartel shop?

Adding the contact page

You do not need to add a contact page. Your contact page is part of your core Big Cartel platform and is always present, but not automatically linked from your menus (see next section).

The contact page can always be viewed at the relative URL /contact at your shop. For example:

http://my-shop.bigcartel.com/contact

If you do create a separate custom contact page that uses the built in contact form, you will likely encounter errors as explained in section Display the contact form on other pages below.

By default your contact page link will not be included in your menus. You can add and change the location of your contact page link via the x-sp-contact special menu item. This is achieved by adding a new page - in your Big Cartel page edit area - and including the x-sp-contact as a prefix to the name of the new page.


For example, let’s say we want our contact page link to appear as “Contact Us” in our menu. We would create a new page in our Big Cartel edit area and name it:

x-sp-contact Contact Us

Note the space after the x-sp-contact and that the following text is whatever we want our link text to be.

Next we save the page. There is no need to add any content to the page, as the content of special purpose pages is ignored.

We can then drag and drop our new page within the page list, to control where the link appears in our menus.

Finally we click the Done and Save buttons in our Big Cartel preview area, to apply our changes permanently.


For more information on customising your navigation menus, refer to:

Customising the contact page content

The Contact page will display a contact form by default. To customise the Contact page content, we use the contact page Insert Content methods — refer to Insert Content - Contact Page — and shortcodes (for maps, contact form, etc.) as needed.

For example, if we only wanted to change the default Contact form fields (e.g. Name, Email, Subject, Message and Spam Check) on the contact page, we would create a x-ic-contact insert content page, switch to HTML mode and clear the default content and then enter the [[contactform]] contact form shortcode with our own settings.

In this example we are translating to Italian, so we add the following content to our x-ic-contact page:

[[contactform name-label="Il tuo nome" email-label="Il tuo indirizzo e-mail" subject-label="Il soggetto" message-label="Il tuo messaggio" spam-label="Inserisci i caratteri dall'immagine qui sopra" name-input="" email-input="" subject-input="" message-input="" spam-input=""]]

Utilizza il modulo sottostante per inviarci una query.

[[sent]]

Grazie! Abbiamo la query. Saremo in contatto con voi.

[[/contactform]]

As another example, to replicate one of the custom contact pages from our theme previews, we create a x-ic-contact insert content page, switch to HTML mode and clear the default content and then add this page content:

[[googlemap aspect="3"]]
2508 Southeast Clinton Street 
Portland, OR 97202
[[/googlemap]]

[[clearspace height="40"]]

[[columns divider="1" padding="40"]]

<h3>Customising your Contact page</h3>

The contact page shows only a contact form by default. However, here we have used a combination of Aarcade's unique shortcodes <code>googlemap</code>, <code>columns</code> and <code>contactform</code> to customise the content.

You could add any text here. For example, your business hours:

<dl class="horizontal condensed">
<dt>Mon-Fri</dt>
<dd>8:00am to 5:00pm</dd>
<dt>Sat</dt>
<dd>10:00am to 3:00pm</dd>
<dt>Sun</dt>
<dd>1:00pm to 3:00pm</dd>
</dl>

Your street address:

<strong>{{ store.name }}</strong>
2508 Southeast Clinton Street 
Portland, OR 97202

You could use the <code>menu</code> shortcode to display your social icon links:

[[menu name="social"]]

You get the idea...

[[column]]
[[contactform]]
[[/columns]]

Finally we click the Done button and then click the Save link to apply our changes.

For more information on copying pages and content from one of our theme previews, refer to our article How do I add pages as seen in Aarcade previews, like FAQ, About Us, etc.?.

Customising the contact page style

Additionally you can use the method described in the support article Using the body tag to create page specific custom styles to add custom CSS specific to the contact page. For example, to center align the contact form on the default contact page you might add the following to your custom style coding area:

/* Center the contact form on the contact page */
body#contact-page .contactform-wrap {
	margin: 0 auto;
}

Display the contact form on other pages

Displaying the contact form on other pages is not recommended, as inconsistent results or errors may occur, particularly with seamless checkout enabled. This is because the contact form functionality is tied to the built in Contact page by the Big Cartel platform (see next section).

For more information on adding the contact form to your page content, refer to Shortcodes - Contact form.

Customising the contact form functionality and fields / inputs

The Big Cartel platform takes the data from a completed contact form and sends it to the contact email address. This email address is set in the Contact email field in the Store > Settings section of your Big Cartel admin.

This functionality is only available at the Contact page so, regardless of where you display your contact form, the form will always submit via the Contact page.

You can rename the contact form fields using the options in the contactform shortcode (see the examples at the start of this article), however all of the default Contact form fields (e.g. Name, Email, Subject, Message and Spam Check) are required.

To maintain the Big Cartel platform contact form functionality, no form field can be removed and no extra form fields can be added.

Wufoo

If you need to create a custom contact form, we recommend that you use Wufoo to build a form and insert it into one of your Big Cartel custom pages. Note that you can remove the contact form code on your Contact page and replace it with Wufoo form code using the Insert Content method detailed at the beginning of this article.

AarcadeHow do I add and customise my contact page and form in my Big Cartel shop?