Close

Level: Moderate to Advanced

Whether your building a private social network for your company, team or membership organization, there is one thing that is absolutely critical: focus. Members need to know the purpose of your online community. Members need to know what the community is going to do for them. What real benefit does it have for them? Why should they spend their time there? These are all questions that need to be answered with the first impression they have from your online community. Obviously, this starts with your front page.

In this post, I’m going to walk you through how to setup an incredible front page that you can use for your own Social HubSite. It’s a simple, clean and mobile friendly design that will help answer the important questions so you can kick your community properly. So members stay focused. So members understand what purpose your online community serves. The place that it serves in their life.

Below is an example of what we are going to produce. It’s the front page for one of our very own resource communities called Associations Connect.

howto1_frontpage_small

So let’s get started.

Below are the steps that we are going to follow:

  1. Assign the default sign up page
  2. Setup the sign up page template
  3. Create a custom registration form
  4. Styling and testing registration form

If you have any questions along the way, please don’t hesitate to click the little blue question mark bubble on the bottom-right portion of the screen. We have a dedicated technical team that can help your questions.

Assign the default sign up page

The first thing we need to do is set the privacy of your Social HubSite so the only accessible pages from “non-approved” members is your registration page. There are several different ways to do this within Social HubSite, but for now I’ll show you one simple way to do it.

From the front of your Social HubSite, click on “Admin Options” and then click the “Add-on Features” tab from the left navigation.

Search for “User Access Manager” and click on the “Activate” button:

Screen Shot 2016-06-20 at 10.37.18 AM

Hover over “UAM” from the left navigation and click on “Manager user groups”.

Next to “User group name” simply define your members. I usually just put “Members” here. That’s really all you need at this stage. The other options can be left blank on this page for now.

Screen Shot 2016-06-20 at 10.45.13 AM

Now, hover over “Pages” in the left navigation and click on “Add New”. Enter the page title in the top box and choose “Blank Page” from the drop-down list in the Page Attributes section under Templates. See below for an example.

Screen Shot 2016-06-20 at 10.49.45 AM

Once everything is set, simply click on the blue “Publish” button.

Hover over “UAM” in the left admin navigation and this time choose “Settings”.

Here the options to change on this page:

Hide complete posts: change to Yes
Hide complete pages: change to Yes
Redirect user: click next to the “Custom page” options and select the page name we just created

Once you are done updating these options, simply click on the “Update settings” button at the bottom of the page.

Screen Shot 2016-06-20 at 10.54.49 AM

Now the last we need to do is change the access permissions for each page.

To do this simply click on “Page” from the left admin navigation.

Check the box at the top of the page table (located on upper-left corner of table). This will automatically select all of the pages.

Click on “Bulk Actions” from the drop-down box from the box you just checked.

Click “Edit” then click the “Apply” button.

Click the checkbox next to the name membership you created. In this example, we are using Members. Now before you click on the update button, be sure to click on the “x” from the page list to remove your member registration page from this list. See below.

Screen Shot 2016-06-20 at 11.01.54 AM

Once everything looks good, click the blue “Update” button.

Congratulations, step 1 is done!

Now let’s move on to create the registration page template.

Setup the front page template

Click on “Add-on Features” from the left admin navigation.

In the search box, type “Page Specific Stylesheets” and click “Activate”.

In the search box, type “Per Page Head” and click “Activate”.

Now let’s navigate back to our member registration page we created earlier on.

Scroll down on the edit page to where you see “Add to head”. In the box, copy and paste the code below.

[code language=”html”]
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="/aconnect/img/favicon.png">

<title>Associations Connect – For Association Leaders to Learn, Share and Connect.</title>

<!– Bootstrap –>
<link href="/aconnect/css/bootstrap.css" rel="stylesheet">
<link href="/aconnect/css/bootstrap-theme.css" rel="stylesheet">

<!– siimple style –>
<link href="/aconnect/css/style.css" rel="stylesheet">

<!– HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]–>

[/code]

Screen Shot 2016-06-20 at 11.50.17 AM

Be sure to update the page title (text between head tags) to the name of your community, or whatever you want to have show for members/visitors.

Now, let’s add our custom stylesheet so we can control the look and feel of the sign up page. To start, copy and paste the CSS code below into the box under “Page Specific Stylesheet”.

[code language=”css”]

/* ==== Google font ==== */
@import url(‘//fonts.googleapis.com/css?family=Lato:400,300,700,900’);

body {
background-color: #000;
font-family: ‘Lato’, sans-serif !important;
font-weight: 300 !important;
font-size: 16px !important;
color: #555;
line-height: 1.6em;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4, h5, h6 {
font-family: ‘Lato’, sans-serif !important;
font-weight: 300 !important;
color: #444;
}

h1 {
font-size: 40px !important;
}

h3 {
font-weight: 400 !important;
}

h4 {
font-weight: 400 !important;
font-size: 20px !important;
}

p {
margin-bottom: 20px !important;
font-size: 16px !important;
}

a {
color: #ffc000 !important;
word-wrap: break-word !important;
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in !important;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in !important;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in !important;
-o-transition: color 0.1s ease-in, background 0.1s ease-in !important;
transition: color 0.1s ease-in, background 0.1s ease-in !important;
}

a:hover,
a:focus {
color: #fff !important;
text-decoration: none !important;
outline: 0 !important;
}

a:before,
a:after {
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
.navbar-inverse .navbar-nav > li > a {
color: #ffc000;
}

.alignleft {
text-align: left;
}
.alignright {
text-align: right;
}

.aligncenter {
text-align: center;
}

.btn-theme {
color: #fff;
background-color: #fd680e;
border-color: #fd680e;
}
.btn-theme:hover {
color: #fff;
background-color: #444;
border-color: #444;
}
form.signup {
margin-top: 30px;
}
form.signup button.btn {
text-transform: uppercase;
font-weight: 700 !important;
}
form.signup input.form-control:focus {
border-color: #fd680e;
}

/* Nav */

a.navbar-brand {
color: #fff !important;
font-weight: 900 !important;
text-transform: uppercase;
}
a.navbar-brand:hover {
color: #ddd !important;
}

/* Header */

#header {
background-color: #444 !important;
background: url(/aconnect/img/main-bg-flattened.png) no-repeat center top;
margin-top: -45px !important;
padding-top: 115px !important;
background-attachment: relative !important;
background-position: center center !important;
min-height: 715px !important;
width: 100% !important;
margin-bottom: 0px !important;

-webkit-background-size: 100% !important;
-moz-background-size: 100% !important;
-o-background-size: 100% !important;
background-size: 100% !important;

-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}

#header h1 {
margin-top: 60px;
margin-bottom: 15px;
color: #fff;
font-size: 41px !important;
font-weight: 900 !important;
letter-spacing: -1px;
}

h2.subtitle {
color: #fff;
font-size: 20px !important;
}

/* slide */
.carousel-indicators {
position: absolute;
bottom: -40px;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -50%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
}
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #b7cb1b;
}

/* footer */
#footer {
background: #000 !important;
padding: 15px 0 0px !important;
}

p.copyright {
color: #fff;
text-align: center;
}

input#input_1_1.medium {
max-width: 92.2% !important;
background: #fff !important;
color: #000 !important;
border: none !important;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 5px !important;}

input#input_1_2.medium {
max-width: 92.2% !important;
background: #fff !important;
color: #000 !important;
border: none !important;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 5px !important;}

input#input_1_5.large {
max-width: 95.2% !important;
background: #fff !important;
color: #000 !important;
border: none !important;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 5px !important;}

select#input_1_7.large.gfield_select {
max-width: 50% !important;
background: #fff !important;
color: #000 !important;
border: none !important;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 5px !important;}

input#input_1_3.large {
max-width: 95.2% !important;
background: #fff !important;
color: #000 !important;
border: none !important;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 5px !important;
margin-top: 4px !important;}

select[multiple=multiple] {height: auto!important;
max-height: 75px !important;
border: none !important;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
max-width: 95.2% !important;
padding: 2px !important;}

.gform_wrapper .top_label select.large { width: 95.2%;}

label {color: #fff;}
.gfield_description {color: #fff;}

.gform_wrapper .gfield_required {display: none;}

.greenstart{
width:225px;
height:45px;
text-align:center;
color:#FFF;
text-decoration:none;
line-height:38px;
font-family:"Lato";
text-shadow:-1px -1px 0 #2C7982;
display:block;
background: #008d19;
border:1px solid #036a13;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#008d19), to(#036a13));
-webkit-border-radius:5px;
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #036a13, 0 4px 2px rgba(0, 0, 0, .5);
font-weight: bold !important;
margin-top: -15px;
}

.greenstart:hover{
background: #036a13;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#036a13), to(#008d19));
}

.greenstart:active{
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset; position:relative;
top:5px;
}

#gform_confirmation_message_1 {margin-top: 25px; color: #fff;}

body .gform_wrapper label.gfield_label+div.ginput_container {margin-top: 0px !important;}

[/code]

Screen Shot 2016-06-20 at 11.50.17 AM

To give you a head start, I just kept the same code references inside of the CSS file so you can see where to update certain elements.

Lastly, click on the “Text” tab on the upper-right portion of the page editor.

The code below is the page template in html code. Copy the code below and paste it into the editor.

[code language=”html”]
<!– Fixed navbar –><div class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><a href="/wp-login.php"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></a><a class="navbar-brand" href="#">Your Organization Name</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-right"><li><a href="/wp-login.php">Sign in</a></li></ul></div></div></div><div id="header"><div class="container"><div class="row"><div class="col-lg-6"><h1>Headline for your online community<span style="color: #fdb21b;">.</span></h1><h2 class="subtitle">Description that needs to support your headline and define the purpose of your online community.</h2><img class="alignnone size-full wp-image-319" style="float: left; width: 35%; margin-top: 20px;" src="" alt="" /></div><div class="col-lg-4 col-lg-offset-2"><h2 style="color: #fff;">Sign Up</h2><span style="color: #fff;">Supporting text goes here.</span>(replace this text with the member registration form)</div></div></div></div><div id="footer"><div class="container"><div class="row"></div></div>

[/code]

Note: It’s important to keep the code below together. WordPress automatically will try adding line spaces if they are on separate lines considering their default functionality.

Be sure to update the wording that I have referenced in the code above. Use a very catchy headline to grab a prospective members attention and a description to support the headline. The goal is to give the visitor the opportunity to understand the purpose of the community quickly and easily.

You’ll also see where I referenced “Add additional text or an image here”. If you decide to add an image there be sure to include copy and paste the following code inside of the image code (between the img and /img): style=”float: left; width: 35%; margin-top: 20px;”

That’s about as complex as we’ll get for now 🙂

Let’s now move on and create our registration form.

Create a custom registration form

Hover over “Forms” in the admin navigation and click on “New Form”.

Add a title for your form and click on the blue “Create Form” button.

Screen Shot 2016-06-20 at 12.17.35 PM

You’ll automatically be redirected to the form editor page. Here you can simply drag the form elements you want over to the left side of the page.

You can keep your membership registration form as simple or as you want. Obviously, this will depend on your situation.

There are a key fields we’ll need to add in order to process the new member registration within the community. They are shown below:

  • Name
  • Email
  • Password

You will want to make sure these fields are to “Required” by clicking the checkbox in the form field editor. See below for an example.

Screen Shot 2016-06-20 at 12.35.28 PM

Once you are done editing your form, simply click on the blue “Update Form” button.

Now let’s click on “Add-on Features”, search for “User Registration” and activate the “Gravity Forms User Registration Add-On” feature. While we’re at it let’s also search for “New User Approve” and activate it. This will require admin approval before a member can actually access the community.

Click on “Forms” in the left admin navigation panel, hover over “Settings” under the form name and click on “User Registration”. This is the tool that will actually create the member account.

Screen Shot 2016-06-20 at 12.42.50 PM

Next to “User Registration Feeds”, click on the “Add New” button.

Click on the “Create User” button.

For simplicity sake, we’ll just complete all the essential user registration aspects. This is an extremely powerful tool and can actually complete member profile information, but we’ll save that for another how to guide 🙂

Choose the options in the drop-down boxes with the corresponding information:

Username: Email
First Name: Name (First)
Last Name: Name (Last)
Nickname: Name (Full)
Email Address: Email
Display Name: {first name} {last name}
Password: Password
Role: Subscriber

Uncheck the option next to “Send Email?”. We can use our form to send a custom notification to the member. Your options should look something like below.

Screen Shot 2016-06-20 at 12.53.27 PM

Once everything looks good, click on the blue “Update Settings” button.

Now let’s go back to the page editor for our member registration pages by clicking on “Pages” in the left admin navigation.

Highlight over the the following text: (replace this text with the member registration form)

Screen Shot 2016-06-20 at 12.57.47 PM

Click on the “Add Form” button on top of the page editor.

Choose the registration form you just created and uncheck the options for “Display Form Title” and “Display Form Description”.

Screen Shot 2016-06-20 at 1.01.48 PM

 

Click on the blue “Insert Form” button.

Now go ahead and click on the blue “Update” button on the page editor.

Click on the “Preview Changes” button to see your page.

Note: If you make additional changes to your page, be sure to click on the “Preview Changes” button again or simply open the page in a separate browser window.

Style your registration form

Watch the video below to learn how to style your form.

Please leave a comment below with anything that you would like to see added to this how to guide.

Leave a reply

Your email address will not be published. Required fields are marked *

Go top