How to Customize WiFi Login Forms and QR Forms in Affinect

This guide shows you how to fully customize your WiFi login forms and QR forms in Affinect. From branding and colors to form fields and custom data collection, you can create a seamless experience that matches your venue's identity while capturing the guest information that matters most.

Affinect

  1. 1. Access Your Form

    Navigate to either:

    • Captive Portal (for WiFi login forms), or

    • Landing Pages (for QR forms)

    Both can be found under Data Collection.

    Access Your Form

    1. 2. A. Create a new profile

    2. 2. B. Edit an existing one

    Create a new profile, or select an existing profile and click Edit.

    A. Create a new profile B. Edit an existing one

    1. 3. A. Upload Your Logo

    2. 3. B. Select Logo Type

    3. 3. C. Select Background type

    Under Common Settings, upload your logo and choose its display style:

    • Transparent

    • Solid Background

    A. Upload Your Logo B. Select Logo Type C. Select Background type

📲 Form Design Settings

  1. 4. Customize Logo Background

    Adjust the logo background color to match your brand identity.

    Customize Logo Background

  2. 5. Choose a Background Style

    Select whether your form background should use:

    • A solid color, or

    • A custom image

    Choose a Background Style

  3. 6. Customize Buttons

    Update your primary button color and button text color.

    Customize Buttons

  4. 7. Configure Background Images

    Under Login Page Settings, customize:

    • Background image

    • Overlay color

    • Overlay opacity

    Configure Background Images

  5. 8. Select Button Shapes

    Choose the style and shape of your login buttons.

    Select Button Shapes

  6. 9. Add Additional Branding Elements

    You can upload:

    • Cover image

    • Footer image

    For best results, ensure your images match the recommended dimensions and file formats.

    Add Additional Branding Elements

  7. 10. Customize Form Content

    Add and style:

    • Title text

    • Body text

    You can also enable social media icons and choose between:

    • Original icons

    • Custom icons

    Preview your changes as you build.

    Customize Form Content

📲 Form Layout & Styling

  1. 11. Choose Form Display Type

    Select how your form will appear:

    • Button Form

    • Inline Form

    Choose Form Display Type

  2. 12. Customize Inline Forms

    If using an inline form, choose the box style:

    • Liquid Glass

    • Custom

    Customize Inline Forms

  3. 13. Customize Form Containers

    For custom box styles, configure:

    • Background color

    • Box shadow

    Customize Form Containers

  4. 14. Style Form Fields

    Customize:

    • Field background color

    • Label color

    • Text color

    Style Form Fields

📲 Adding & Managing Form Fields

  1. 15. Create Multi-Step Forms

    Add multiple steps to guide users through the data collection process.

    Create Multi-Step Forms

  2. 16. Add Custom Fields

    You can:

    • Select an existing field, or

    • Create a new custom field

    For new fields, define:

    • Field name

    • Internal notes

    • Field type (Text, Date, Multiple Choice, etc.)

    Add Custom Fields

  3. 17. Assign Tags to Fields

    Link tags to custom fields to improve audience segmentation and campaign targeting.

    Assign Tags to Fields

  4. 18. Configure Field Behavior

    Choose whether a field should:

    • Allow multiple selections

    • Be mandatory for submission

    Configure Field Behavior

  5. 19. Customize Labels

    Adjust how field labels are displayed to create a clearer and more user-friendly experience.

    Tada! You're All Set!

    Your WiFi login form is now fully customized to match your brand and data collection requirements. The same customization options are available for QR forms, allowing you to create a consistent experience across both WiFi and QR-based guest journeys.


    For more advanced customization of Captive Portals or QR Landing Pages, refer to the related guides below.

    Customize Labels