APEX SOCIAL FORMS

Apex Social Bar User Guide

Follow the guide below to quickly customize your bar and genrate the link to embed in your form.

Configuration

Social Bar Container ID
Identifies the container inside of which the social bar will be placed. This will be “id” attribute of the root element to which the social buttons will be added.
If using the default embed code (below) the value would be social_forms_container.

First Name Field ID
Identifies the first name field where the data will be populated as it is returned from the social API’s. This is the id attribute of the first name element.

If only full name is required, place the same id in the first_name and last_name fields.

Last Name Field ID
Identifies the last name field where the data will be populated as it is returned from the social API’s. This is the id attribute of the last name element.

Email Name Field ID
Identifies the email field where the data will be populated as it is returned from the social API’s. This is the id attribute of the email element.

Appearance

Platforms
Select which platforms to enable.
Options:

  • ["facebook", "google", "linkedin", "twitter"]

Bar Type
Choose the appearance of the buttons on the social bar.
Options:

  • "large" : Full-sized buttons, full logo,
  • "small" : Square-sized buttons, icon logo,

Color On Fill
Enables input field highlighting on fill.
Options:

  • "1" : Yes
  • "0" : No

How to Obtain Form Field IDs

Inspect your existing form code (right-click > Inspect on the form field) and obtain the field id vlues for name and email fields.

<input type="text" name="name" id="name">
<input type="text" name="email" id="email">

Embedding the Social Bar

After creating the form, you need to add the code to your web page.

Add the container within your form element.

<div id="social_forms_container" class="apex_social_forms_bar"></div>

You may change social_forms_container to any identifier, as long as you provide it when generating the embed code.

Add the generated embed code, provided in the step above.

<script src="https://socialregistration.site/api/bar?conf=GENETATED_CODE_HERE"></script>

Customizing the Social Bar

You may customize the placement and look of the social bar to fit whatever theme is required.

The embed code automatically injects the standard CSS code below.

.apex_social_forms_bar { display: inline-block; }
.apex_social_forms_bar button { float:left; width: 25%; min-width: 50px; max-width: 80px; padding: 0 0 0 2px; margin: 0; background: none; border: none; }

You may create your own styles to override any of the styles above. Make sure to set the !important tag.