Can I change the design of the online signup form?

Yes, of course!

Note: This article applies to those who are using the membership or booking online signup form. It is not relevant to those using the online DDG (iFrame) feature. For instructions on using the online DDG (iFrame), refer to the article: iconnect360 API.

1. You will definitely be able to add your own logo. See article: How do I change the logo displayed on the online signup form?
2. You can also customise the online signup form to suit your organisation's colour scheme. To do so, follow these instructions.
   
   Note: We recommend that you engage a web designer to help you customise the design if you do not have basic HTML or CSS skills.
1. Download and save the CustomStyle.css file into your local computer.
2. Open the CSS file using a suitable program, such as Notepad, Adobe Dreamweaver or Microsoft Visual Studio.
3. Change the required colour codes. Reference: Html Color Codes
   
   Or if you wish to add a background image, then add the following code: background-image:url('URL'); into the css file. Just replace the URL in the brackets with the actual link. 
   
   
   
   
4. Once done, save the file.
   Caution: Save the file in its original name. In other words, do not change the file name.
5. At the organisation (master) level of the iconnect360 system, navigate to Settings > Online Signup.
6. In the Online Form tab, select Edit for the Online Signup Details section.
7. For Select CSS file, select Browse... to search for the CustomStyle.css file in your local computer. Then click on the file and select Open.
8. Select Save Changes.

You can view your new design using any of your membership signup link. Follow the steps below.

1. At the site level, navigate to Memberships.
2. Select the membership.
3. In the Site Specific Details section, select Copy for the Signup Link.
   If you do not see the signup link, follow these steps.
1. Select Edit.
2. Set the Allow Online Signup to Yes.
3. Select Copy for the Signup Link.
4. Select Save Changes.
4. Paste the copied link into the web browser URL address bar.
   In other words, in the web browser, select the area where you normally type the website address, e.g. www.iconnect360.com. Ensure the address bar is clear of any text. Press Ctrl-V on your keyboard (to paste the copied link) and then Enter.

You can view your new design using any of your booking signup link. Follow the steps below.

1. At the site level, navigate to Bookings > Booking Templates.
2. Select the booking.
3. In the Online Signup Details section, select Copy for the Signup Link for each booking or Signup Link for booking series.
   If you do not see the signup link, follow these steps.
1. Select Edit.
2. Set the Allow Online Signup to Yes.
3. Select Copy for the Signup Link.
4. Select Save Changes.
4. Paste the copied link into the web browser URL address bar.
   In other words, in the web browser, select the area where you normally type the website address, e.g. www.iconnect360.com. Ensure the address bar is clear of any text. Press Ctrl-V on your keyboard (to paste the copied link) and then Enter.

Hope you like your new design. If not, go ahead and change it again!

Related article

• Download free CSS templates for your online signup form