Online Registration

Standard Shells for Online Registrations or Giving Pages

The following shells can be used (as is or customized) for online registrations or for Giving Pages. They are provided on your database as standard shells and can be found at Administration > Setup > Special Content on the HTML Content tab.

If they have been deleted or altered and you wish to restore them, you can copy the source code shown in this article for any shell to recreate or restore the HTML file. Open (or create) the HTML file you wish to restore, click on the Source button, and replace all the code with the code you have copied from this article. Be sure to type Shell in the ContentKeyword box in order for the shell to show up in the HTML Shell drop down menu on an Involvement.

Below is information about each standard shell.

Standard Shell

This shell has a dark gray background with a logo and link to the user’s profile at the top and a light gray background below with footer information at the bottom. To customize…

  • The darker background color can be modified on lines 11 and 19.

  • The lighter background color can be modified on lines 10, 21 and 25.

  • The logo and corresponding link can be replace on line 12.

  • The link for the user to edit their profile can be changed on line 14. Use https://mychurch.app.tpsdb.co/profile/information replacing “mychurch” with your church’s database name.

  • The social media links can be modified on lines 27-29

  • The church information in the footer can be changed on line 33.

https://i.tpsdb.com/StandardShell.png

Below is the HTML code for the StandardShell 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
32
33
34
35
36
37
38
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>TouchPoint Church Management Software</title>
	<!--FORM CSS-->
	<style type="text/css">strong {
            font-weight: bolder;
        }
	</style>
</head>
<body style="background-color:#eee; font-weight: 400; line-height: 1.5;">
<nav class="navbar navbar-inverse navbar-fixed-top" style="background:#333;margin-bottom:0;border-bottom:0;">
<div class="container"><a class="navbar-brand" href="http://www.touchpointsoftware.com" style="padding:0; height: 65px;" target="_blank"><img src="https://c4265878.ssl.cf2.rackcdn.com/staging.2009101054.TouchPoint_2018_white_with_tag.png" style="max-height: 50px; padding: 0px; width: 200px; height: 51px;" /> </a>
<ul class="nav navbar-nav pull-right">
	<li><a href="#">Profile</a></li>
</ul>
</div>
</nav>

<div class="container-fluid top text-center" style="background-color:#333;height:250px;">&nbsp;</div>

<div class="container-fluid bottom" style="background-color:#eee;">
<div style="max-width: 900px;margin-left: auto; margin-right: auto; position: relative; top: -150px; margin-bottom: -115px; padding-left: 20px; padding-right: 20px; padding-bottom: 25px; background-color: white; border: 1px solid #ddd; border-radius: 7px;box-shadow:1px 1px 2px rgba(0,0,0,.05);"><!--FORM START--><!--FORM END--></div>
</div>

<div class="footer" style="background-color:#eee;"><!-- Footer --><!-- Social buttons -->
<ul class="list-unstyled list-inline text-center">
	<li class="list-inline-item"><a class="btn-floating btn-fb mx-1" href="https://facebook.com/"><i class="fa fa-facebook"> </i> </a></li>
	<li class="list-inline-item"><a class="btn-floating btn-tw mx-1" href="https://twitter.com/"><i class="fa fa-twitter"> </i> </a></li>
	<li class="list-inline-item"><a class="btn-floating btn-li mx-1" href="https://linkedin.com/"><i class="fa fa-linkedin"> </i> </a></li>
</ul>
<!-- Social buttons --><!-- Copyright -->

<div class="footer-copyright text-center">TouchPoint Software | Dallas, TX 75248 | 214.866.7777 | support@touchpointsoftware.com</div>

<div class="footer-copyright text-center" style="margin-bottom: 30px;">Powered By <a href="http://touchpointsoftware.com">TouchPoint Software</a></div>
<!-- Copyright --><!-- Footer --></div>
</body>
</html>

Standard Shell Light

This shell is similar to the StandardShell except that it has a uniformly light background. To customize…

  • The background color can be modified on lines 10, 11, 19, 21 and 25.

  • The logo and corresponding link can be replace on line 12.

  • The link for the user to edit their profile can be changed on line 14. Use https://mychurch.app.tpsdb.co/profile/information replacing “mychurch” with your church’s database name.

  • The social media links can be modified on lines 27-29

  • The church information in the footer can be changed on line 33.

https://i.tpsdb.com/StandardShellLight.png

Below is the HTML code for the StandardShellLight 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
32
33
34
35
36
37
38
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>TouchPoint Church Management Software</title>
	<!--FORM CSS-->
	<style type="text/css">strong {
            font-weight: bolder;
        }
	</style>
</head>
<body style="background-color:#eee; font-weight: 400; line-height: 1.5;">
<nav class="navbar navbar-fixed-top" style="background:#eee;margin-bottom:0;border-bottom:1px solid #ccc;">
<div class="container"><a class="navbar-brand" href="http://www.touchpointsoftware.com" style="padding:0; height: 65px;" target="_blank"><img src="https://c4265878.ssl.cf2.rackcdn.com/trialdb.2010011126.touchpoint_blue.png" style="max-height: 58px; padding: 0px;" /> </a>
<ul class="nav navbar-nav pull-right">
	<li><a href="#" style="margin-top:10px">Profile</a></li>
</ul>
</div>
</nav>

<div class="container-fluid top text-center" style="background-color:#eee;height:250px;">&nbsp;</div>

<div class="container-fluid bottom" style="background-color:#eee;">
<div style="max-width: 900px;margin-left: auto; margin-right: auto; position: relative; top: -150px; margin-bottom: -115px; padding-left: 20px; padding-right: 20px; padding-bottom: 25px; background-color: white; border: 1px solid #ddd; border-radius: 7px; box-shadow:1px 1px 2px rgba(0,0,0,.05);"><!--FORM START--><!--FORM END--></div>
</div>

<div class="footer" style="background-color:#eee;"><!-- Footer --><!-- Social buttons -->
<ul class="list-unstyled list-inline text-center">
	<li class="list-inline-item"><a class="btn-floating btn-fb mx-1" href="https://facebook.com/"><i class="fa fa-facebook"> </i> </a></li>
	<li class="list-inline-item"><a class="btn-floating btn-tw mx-1" href="https://twitter.com/"><i class="fa fa-twitter"> </i> </a></li>
	<li class="list-inline-item"><a class="btn-floating btn-li mx-1" href="https://linkedin.com/"><i class="fa fa-linkedin"> </i> </a></li>
</ul>
<!-- Social buttons --><!-- Copyright -->

<div class="footer-copyright text-center">TouchPoint Software | Dallas, TX 75248 | 214.866.7777 | support@touchpointsoftware.com</div>

<div class="footer-copyright text-center" style="margin-bottom: 30px;">Powered By <a href="http://touchpointsoftware.com">TouchPoint Software</a></div>
</div>
<!-- Copyright --><!-- Footer --></body>
</html>

Standard Shell with Background

This shell has the same elements as the two above, but the background is an image. To customize…

  • The background image can be replaced on line 10.

  • The logo and corresponding link can be replace on line 12.

  • The link for the user to edit their profile can be changed on line 14. Use https://mychurch.app.tpsdb.co/profile/information replacing “mychurch” with your church’s database name.

  • The social media links can be modified on lines 25-27

  • The church information in the footer can be changed on line 31.

https://i.tpsdb.com/StandardShellwBackground.png

Below is the HTML code for the StandardShellwBackground 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
32
33
34
35
36
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>TouchPoint Church Management Software</title>
	<!--FORM CSS-->
	<style type="text/css">strong {
            font-weight: bolder;
        }
	</style>
</head>
<body style="background:url('https://c4265878.ssl.cf2.rackcdn.com/trialdb.2010011401.aron-visuals-LSFuPFE9vKE-unsplash.jpg'); background-attachment: fixed; background-position: top left; background-size:cover; font-weight: 400; line-height: 1.5;">
<nav class="navbar navbar-inverse" style="background-color:transparent;margin-bottom:0;border-bottom:0;">
<div class="container"><a class="navbar-brand" href="http://www.touchpointsoftware.com" style="padding:0; height: 65px;" target="_blank"><img src="https://c4265878.ssl.cf2.rackcdn.com/staging.2009101054.TouchPoint_2018_white_with_tag.png" style="max-height: 50px; padding: 0px; width: 200px; height: 51px;" /> </a>
<ul class="nav navbar-nav pull-right">
	<li><a href="#">Profile</a></li>
</ul>
</div>
</nav>

<div class="container-fluid" style="margin-top: 20px;">
<div style="max-width: 900px;margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; padding-bottom: 25px; background-color: white; border: 1px solid #ddd; border-radius: 7px;box-shadow:1px 1px 2px rgba(0,0,0,.05);"><!--FORM START--><!--FORM END--></div>
</div>

<div class="footer" style="color:white;"><!-- Footer --><!-- Social buttons -->
<ul class="list-unstyled list-inline text-center">
	<li class="list-inline-item"><a class="btn-floating btn-fb mx-1" href="https://facebook.com/"><i class="fa fa-facebook"> </i> </a></li>
	<li class="list-inline-item"><a class="btn-floating btn-tw mx-1" href="https://twitter.com/"><i class="fa fa-twitter"> </i> </a></li>
	<li class="list-inline-item"><a class="btn-floating btn-li mx-1" href="https://linkedin.com/"><i class="fa fa-linkedin"> </i> </a></li>
</ul>
<!-- Social buttons --><!-- Copyright -->

<div class="footer-copyright text-center">TouchPoint Software | Dallas, TX 75248 | 214.866.7777 | support@touchpointsoftware.com</div>

<div class="footer-copyright text-center" style="margin-bottom: 30px;">Powered By <a href="http://touchpointsoftware.com">TouchPoint Software</a></div>
<!-- Copyright --><!-- Footer --></div>
</body>
</html>

Video Demonstration of Shell Customization

See the video below for a demonstration of the changes to make to customize the Standard Shell.



Latest Update

6/23/2021

Add info about Shell ContentKeyword