• Share this article:

Search Boxes & Email Signups

Search boxes can help make content-heavy websites more accessible to website users. And email signups are a useful way to engage with website users on a regular basis. Both types of forms are supported in ThemeFlood RapidWeaver themes.

Search boxes

A website search should be considered, if your completed website comprises of many different pages or products. Likewise, in instances where your target audience predominantly wants to navigate the website by searching for keywords. For several years, the go-to search plugins for RapidWeaver have been RapidSearch and RapidSearchPro. Both plugins take keywords a user types in a search box, and return a list of matches. Clicking a match takes the user to a particular page. More recently, the SimpleSearch stack (available to purchase on the Stacks4Stacks website) provides a search facility for smaller websites; with no dependencies on external search engines or databases.

Some RapidWeaver themes include a search box already. For example, the Boutique theme has a rather attractive search box that can be clicked and slides-open from under the navigation bar at the top. To 'wire' this search box to your search page, add a new search page to your website, preferably in the top level, comprising of the RapidSearch, RapidSearch Pro or SimpleSearch addons. The idea of this process being that you have a search results page located at the following location:

http://example.com/search/

Now when a user types keywords in the search box and hits return, the keywords are sent to the search page (via query strings appended to the page URL) and the search results are displayed.

Theme search box in Boutique

Of course if you choose to locate your search page somewhere else in the website or name it differently, then you will need to edit the theme index.html file to change the %base_url%/search/ address in the search code to something else. And this is where you would also change other details, like the placeholder text shown when the search box is not active / focused.

If the path to the search page is incorrect, then you'll most likely see an error message displayed. Because RapidSearchPro runs from an SQL database and PHP code, it will only work when your website is published. Consult with the video's and documentation on the RapidSearchPro website for a complete walk-through of the entire plugin setup.

A custom search box

You could just add a link to your navigation menu marked 'search' and direct people to your RapidSearchPro page. Other times though, you may wish to display a custom search box for your website users to use. This search box can be located in almost any location, including an ExtraContent container, a sidebar or the main page container. This is the complete HTML markup for a typical RapidSearchPro custom search bar:

<div id="searchContainer">
    <form action="http://example.com/search/" method="get" class="form-search" role="search">
        <div class="form-group">
            <input type="text" placeholder="Search My Website" name="query" class="form-control" />
        </div><!--/form-group-->
        <button type="submit" class="btn btn-default">Search</button>
    </form>
</div><!--/searchContainer-->

In the form action attribute, the URL should be changed to the same URL where your RapidSearchPro page is located in the website. The placeholder text and button label can also be customised if you wish. The searchContainer ID selector name is useful if you want to hook-on your own custom CSS code to style the search box. By default, the search box will typically look something like this:

Custom search box

When someone enters keywords in the search input box and clicks the search button, they will be forwarded to your RapidSearchPro page and search results will be listed on the page. If you're finding that when you click the search button you get an Error 404 - Page Not Found message, carefully check that the URL you're using to point at the search page is correct (including the page extension) in the HTML code.

Custom CSS code can be used to change the style and layout of the search box. For example, you could reduce the width of the search bar or float the search button to the right of the search box using some code like this:

#searchContainer {
    height: auto;
    overflow: auto;
    width: 350px;
}

#searchContainer .form-group {
    padding: 0px;
    margin: 0px;
}

#searchContainer input {
    width: 250px;
    margin: 0px;
    float: left;
}

#searchContainer button {
    float: right;
}

Custom CSS code can either go in the RapidWeaver Page Inspector (within the custom CSS box) or you can open the theme contents and place it in the custom.css file (which will apply the code automatically to all pages using the theme).

Email subscription forms

MailChimp is an example of one such service that can be used to collect email addresses from users of a website, and create a mailing list. This mailing list can then be used to to periodically send email newsletters to customers. Options are also provided so that customers can easily update their email subscriptions and opt-out of receiving emails if they prefer to. The code that MailChimp provides for the signup form typically looks like this:

<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
</style>

<div id="mc_embed_signup">
    <form action="http://example.us7.list-manage1.com/subscribe/post?u=681cd5f5d425a00b3542863430&amp;id=e62b12e361" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <label for="mce-EMAIL">Subscribe to my blog mailing list</label>
        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
        <div class="clear">
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </form>
</div>

This code can be pasted directly into a styled text or HTML code region in your page. If pasting it into a styled text region, remember to highlight the code and select Ignore Formatting from the RapidWeaver Format menu (this action will remove line breaks and make the code invisible on the page).

However if you want to incorporate the same email signup form on multiple pages (like in the sidebar of a website) then it may be easier to modify the theme being used to include the code. To do this, start by opening the theme index.html file and place the following towards the top, in the head section near the existing theme CSS calls:

<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
</style>

Then wherever you want your signup form shown (like in the sidebar) you then enter the HTML code in the theme index.html file:

<div id="mc_embed_signup">
    <form action="http://example.us7.list-manage1.com/subscribe/post?u=681cd5f546d425a00b345863430&amp;id=e62b12e361" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <label for="mce-EMAIL">Subscribe to my blog mailing list</label>
        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
        <div class="clear">
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </form>
</div>

Following this system of CSS code at the top of the page and HTML code lower down will result in a faster loading page. At this point you should have something that looks like this in your page, when previewed:

MailChimp Before

MailChimp signup forms may look a bit dull and drab in RapidWeaver. However you can brighten these up by modifying the code and including the class selector names and HTML code for some Bootstrap form styling. After which, the signup form will look similar to this and prettier:

MailChimp After

The above example was created by removing the CSS code that Mailchimp provides (the code you were previously instructed to put in the head section of the theme index.html file). The HTML code for the signup form itself was slightly modified to wrap the form contents inside a new form-group class and modify the class selector names applied on the form input field and submit buttons:

<div id="mc_embed_signup">
    <form action="http://example.us7.list-manage1.com/subscribe/post?u=681cd5f5d4345a00b345863430&amp;id=e62b12e361" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="form-group">
            <label for="mce-EMAIL">Subscribe to my blog mailing list</label>
            <input type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required style="width: 300px;">
        </div>
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">
    </form>
</div>

It's recommended that you don't change or remove any other code in the signup form, as this may cause the form to break. Some of this code is required by MailChimp.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.