Online Registration

Default Shell for Online Registrations

We use Bootstrap as our styling framework for online registrations. See note at bottom of page for more about Bootstrap.

We have included the HTML code for a sample shell that can be used as a starting point for creating a Bootstrap shell for your church. This should already be on your TouchPoint database, but if not, just follow the instructions below.

How to Create a Shell

Step 1

Go to Administration > Advanced > Special Content and select the HTML tab. You must have the Admin, SpecialContentBasic, or SpecialContentFull role.

Step 2

Click the button to add a new HTML file and name the file ShellDefaultBs. The name is important; since, by convention, that is what the system will look for unless you specifically point to a different file. Type Shell in the Content KeyWords box. This is what allows it to show up as an option in the HTML Shell dropdown menu on the Registration > Registration tab of an Involvement.

Step 3

Click the Source button on the editor. Then copy the code below (See Sample Shell below) and paste it into the editor. Click Source again and then click Save.

Important

The code below is just a sample. You will want to:

Image

The image in our sample is quite large (1920 x 397). However, it is sized on-the-fly with a width of 100%, so that it fits whatever container it is in (like an iPhone). You will want to do the same with your image. Take note of our image size and shape as an example.

Other Shells

If you want to use a custom shell for just one registration, you can create that shell as you did the default shell, giving it a different name. Be sure to add the Content KeyWords value of Shell in order for it to show up in the dropdown list on the Involvement. Then choose that name from the HTML Shell dropdown on the Registration > Registration tab of the Involvement.

Caution

If you are experimenting with a shell, and already have existing registrations using that shell, you should copy it and refer to the copy in your test Involvement. Otherwise, you will be affecting live registrations every time you save.

Tip

We have several custom sample shells you can use and modify for your needs.

See also

Standard Shells for Online Registrations or Giving Pages

Sample Shell for Bootstrap

Below is the HTML code for the sample Bootstrap shell:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
  <title>Online Registration</title>
  <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  <!--FORM CSS-->
  <style>
    div.form-wrapper {
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 20px 25px 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header_image">
      <img alt="Our Church Banner"
        src="https://c4265878.ssl.cf2.rackcdn.com/OurChurchBanner.png"
        style="width: 100%;" />
    </div>
    <div class="form-wrapper">
      <!--FORM START-->
      <!--FORM END-->
    </div>
    <div class="text-center">
      <p>&copy; Our Church. All rights reserved. | <a href="http://www.bvcms.com">ourchurch.org</a></p>
    </div>
  </div>
</body>
</html>

A note about Bootstrap

Bootstrap is a widely used web page style framework. It has a clean, customizable look and makes web pages easy to use on mobile devices. TouchPoint uses it as the default for online registrations because it works well for mobile users.

This is from the Bootstrap web site.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.



Latest Update

10/21/2026

Updated the Special Content navigation path and documented the required roles. Displayed the sample shell code in the same format as other code samples.