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 > Setup > Special Content > HTML Content.

Step 2

Click the New HTML File button 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 drop down menu on 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.

Tip

You can click the view raw link in the bar below the code to make it easy to copy all the code.

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 ContentKeyword of Shell in order for it to show up in the drop down list on the Involvement. Then choose that name from the HTML Shell drop down 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.

Sample Shell for Bootstrap

A note about Bootstrap

Bootstrap is a very popular web page style framework. Not only does it have a nice clean look and can be customized, it is known for making your web page easy to use on a mobile device. We use this as our default for online registrations, not only because it looks great, but also because of the tremendous benefits 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

6/23/2021

Add info about Shell ContentKeyword