Big Cartel Theme Support

How do I add a search or newsletter form input to my header or footer?

How do I add a search or newsletter form input to my header or footer?

Shortcodes

The searchform and newsform shortcodes can be used to display simple search or newsletter form inputs anywhere in your shop. With insert content methods — refer to An introduction to the Insert Content method — these shortcodes can be added to your header and/or footer as needed.

Some of our previews make use of these shortcodes and referring to, or using, these examples is a quick way to get familiar with these tools. For more information on using previews as a reference or template source, refer to How do I add pages as seen in Aarcade previews, like FAQ, About Us, etc.?

Alternative methods

Alternative methods are available for displaying search and newsletter form inputs. These methods are detailed in the following articles:

Replicating version 2 header forms

The built in newsletter and search form options for Aarcade version 2 themes displayed single field search and/or newsletter form inputs in the header area.

How do I add a search or newsletter form input to my header or footer? at Aarcade

This can be replicated using the form shortcodes in an x-ic-before-header insert content page as follows:

1. Create a page in our Customize design > Pages admin area with the exact title:

x-ic-before-header

2. Important: Switch to HTML edit mode per How do I switch to HTML edit mode?

3. Create our custom content in the x-ic-before-header page. To create the result in the above screen shot, this content is:

<div class="header-short-forms">
<div>

[[searchform input="Search our products"]]

[[newsform input="Sign up to get the news!" action="https://tinyletter.com/featherweight" name="tlemail"]]

</div>
</div>

Note that you can choose to use only the searchform or newsform shortcode (instead of both). For instructions on setting the options for these shortcodes, refer to the articles Shortcodes - Search form and Shortcodes - Newsletter signup form.

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

Positioning the form fields

As shown in the above code example, including the form shortcodes inside two div elements, the outermost having the class header-short-forms, is critical for making use of the default positioning built into your Aarcade theme. This also ensures that the forms are hidden when the mobile layout is active.

To adjust the position of forms, you can add styles to the innermost of these div elements as follows.

Text Alignment

Setting text alignment to left, center or right will align the forms accordingly. The fault value is right. If we wanted to change this to left, we would have:

<div class="header-short-forms">
<div style="text-align: left">

[[searchform input="Search our products"]]

[[newsform input="Sign up to get the news!" action="https://tinyletter.com/featherweight" name="tlemail"]]

</div>
</div>

Shifting left or right

To shift the forms left or right, add padding accordingly. If we wanted to nudge our forms to the left, we would have:

<div class="header-short-forms">
<div style="padding-right: 15px">

[[searchform input="Search our products"]]

[[newsform input="Sign up to get the news!" action="https://tinyletter.com/featherweight" name="tlemail"]]

</div>
</div>

Shifting up or down

To shift the forms up or down, set a top value in pixels. This value can be negative. The default value is 10px. If we wanted to move the forms in our example directly underneath the social icons, we would have:

<div class="header-short-forms">
<div style="top: -5px">

[[searchform input="Search our products"]]

[[newsform input="Sign up to get the news!" action="https://tinyletter.com/featherweight" name="tlemail"]]

</div>
</div>

My forms are not located correctly

The method detailed above is specifically for themes with full-width header areas. Using the same method on other themes may produce less than ideal results. If this applies, you can try the following:

  1. Change the opening <div class="header-short-forms"> to <div class="header-short-forms">.
  2. Try an alternative insert content method, such as x-ic-open-body-code, x-ic-after-sidebar, etc.
  3. Replace the header-short-forms class with your own class and apply your own custom style coding - see How do I create custom style code?

Changing the form item style

Your shortcode forms will be displayed with the colours and styling defined by your theme options and core styles. If this default appearance is not ideal for your header area, you can add your own custom styles within your x-ic-before-header page as follows:

<div class="header-short-forms">
<div>

<style scoped>

/* Input styling */
.header-short-forms .form-item > input {
	border-color: #000000;
	border-radius: 0px;
	color: #cc0000;
	background-color: transparent;
}

/* Placeholder text color
** Must be separate for each browser but all the same value */
form :-moz-placeholder { color: #000000; }
form ::-moz-placeholder { color: #000000; }
form :-ms-input-placeholder { color: #000000; }
form ::-webkit-input-placeholder { color: #000000; }

/* Input styling when being used */
.header-short-forms .form-item > input:focus {
	background-color: #ffffff;
}

</style>

[[searchform input="Search our products"]]

[[newsform input="Sign up to get the news!" action="https://tinyletter.com/featherweight" name="tlemail"]]

</div>
</div>

Alternatively, you can add the styles to your custom style coding area in your theme CSS. To learn more about editing these styles to produce your preferred appearance, refer to How do I create custom style code?

AarcadeHow do I add a search or newsletter form input to my header or footer?