LogoLogo
Siteglide.comAdminRoadmap
  • 👋Welcome
  • Get Started
    • 🚀Quickstart Guides
    • ❔Support & FAQs
      • â„šī¸Siteglide Support Policy
      • â„šī¸Siteglide Technology Stack
      • â„šī¸External Resources
      • â„šī¸Front-end Browser Support
  • Portal
    • Account
    • Sites
      • 🚀Quickstart: Create a Site
      • â„šī¸Site Details
      • â„šī¸Site Users
      • 📋Install & Manage Modules
      • đŸ’ŗGo Live
      • đŸ’ŗSubscription
      • 🌍Domains
        • 📋Add a Fully Delegated Domain
        • 📋Add an External Domain
        • đŸ’ģSubdomain on a separate instance
        • 📋How to setup a multi domain start page
      • â˜ī¸Site Backups and Disaster Recovery
    • Users
      • 📋User Roles
      • 📋Invite & Manage Users
    • Billing
      • đŸ’ŗBilling Setup
      • đŸ’ŗSubscriptions and Changes
      • đŸ’ŗAutomatic Site Upgrades
      • đŸ’ŗInvoices
    • Tickets
    • Marketplace
    • Agencies
      • 👩‍đŸ’ģAgency Account
      • 👩‍đŸ’ģClients
      • 👩‍đŸ’ģSite Copies
      • 👩‍đŸ’ģAgency Whitelabelling
  • Developer Tools
    • CLI
      • 🚀Quickstart: CLI
      • â„šī¸About
      • 📋Site Setup
      • ❔Troubleshooting
      • đŸ’ģReference
      • đŸ›ŗī¸CLI Changelog
      • đŸ§™â€â™‚ī¸Go Further: CLI
        • Creating WebApps via CLI
    • Liquid
      • â„šī¸About
      • đŸ’ģReference
      • Accessing Data in Liquid Variables - Tutorial 1 - Using Dot Notation
      • Accessing Data in Liquid Variables - Tutorial 2 - Iterating over Arrays and Objects
      • Using Collections with WebApps and Modules
      • Accessing Data from the Global Context Variable
      • Truthiness - Using Liquid to determine if a field is empty or blank
      • 📋Alternatives to Storing and Executing Liquid from Database Items
    • GraphQL
      • â„šī¸About GraphQL
      • 📋Tutorials
        • Tutorial 1 - Your First Query
        • Tutorial 2 - Pagination
        • Tutorial 3 - Filtering the Results
        • Tutorial 3 - (Answers)
        • Tutorial 4 - Advanced Filtering
        • Tutorial 4 - (Answers)
        • Tutorial 5 - Using Liquid to run GraphQL queries on your Site
        • Tutorial 6 - Variables
        • Tutorial 6 - (Answers)
        • Tutorial 7 - Sorting
        • Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
        • Tutorial 9 - Using Mutations to Create New Records
        • Tutorial 10 - Using Mutations to Edit a Record
        • Tutorial 11 - Using Mutations to Delete an Item
        • Tutorial 12 - Related Records and Datasources
    • Configuration
      • â„šī¸Field Types
      • â„šī¸Custom Field IDs
    • Zapier Integration
      • â„šī¸Formatting arrays correctly
    • Developer Marketplace
      • â„šī¸About Building Modules
      • â„šī¸Module Setup
      • â„šī¸Site Template Modules - and How to Make Your Own
      • â„šī¸Create Folder Structure
      • â„šī¸Updating Modules
      • â„šī¸Submit Module for Approval
      • â„šī¸Adding Payment to a Module
      • â„šī¸Theme Module Example
      • â„šī¸Data & UI Module Example
      • đŸ’ģReference
      • đŸŒŗFile Structure
    • Release Notes
      • đŸ›ŗī¸Siteglide Admin/API - Changelog
      • đŸ›ŗī¸Module - System Files - Changelog
      • đŸ›ŗī¸Module - eCommerce - Changelog
      • đŸ›ŗī¸Module - Menu - Changelog
      • đŸ›ŗī¸Module - Slider - Changelog
      • đŸ›ŗī¸Module - Secure Zones - Changelog
      • đŸ›ŗī¸Module - FAQ - Changelog
      • đŸ›ŗī¸Module - Events - Changelog
      • đŸ›ŗī¸Module - Blog - Changelog
  • SiteBuilder
    • Build Sites Faster
      • 🚀Quickstart: SiteBuilder
      • About
      • Site Setup
        • đŸ—ī¸Marketplace Themes & Templates
        • đŸ—ī¸Create Site From Template
        • đŸ—ī¸Install SiteBuilder Module
        • đŸ—ī¸Create a Page Template
        • đŸ—ī¸Set Up Tailwind CSS with the recommended CLI method
      • Styling
        • đŸ—ī¸Editing Tailwind CSS using the recommended CLI method
        • đŸ—ī¸Tailwind CSS Themes - Choosing a Build Method
        • đŸ—ī¸Tailwind CSS - Preview Mode
        • đŸ—ī¸Tailwind's JIT Compiler Via CDN (deprecated)
        • đŸ—ī¸Theme Presets
        • đŸ—ī¸Example Tailwind Project Setup
      • Layouts
        • đŸ—ī¸Insert Static Layouts
        • đŸ—ī¸Installing Dynamic Layouts
        • đŸ—ī¸Editing Dynamic Layouts
        • About Layouts
          • đŸ—ī¸Dynamic Layouts
          • đŸ—ī¸Static and Dynamic Form Layouts
          • đŸ—ī¸Sliders
      • đŸ’ģReference
    • Advanced Features
      • 🧞SiteBuilder Live Updates API
        • 👀Live Updates Reference
        • 🔹Live Updates Markup Example
        • 📋Steps to Setting Up Live Updates API in a Module/WebApp Layout
        • 🔹Live Updates Example - Enforcing Filters
        • 📋Steps to Use Live Updates Methods
        • 📋Steps to Initialise Live Updates with JS
        • đŸ—“ī¸Live Updates Changelog
      • â„šī¸SiteBuilder JavaScript
        • â„šī¸Forms JS
        • â„šī¸Social Sharing JS
        • â„šī¸Sliders JS
        • â„šī¸Dark Mode JS
        • â„šī¸Cookie Settings JS
      • â„šī¸SiteBuilder Liquid Includes
        • â„šī¸Pagination
      • â„šī¸SiteBuilder Liquid Functions
        • â„šī¸Detail Page Valid
        • â„šī¸Field Mapping
        • â„šī¸Get Table Config
        • â„šī¸Case From Order ID
      • đŸ—“ī¸SiteBuilder Changelog
    • Extend SiteBuilder
      • â„šī¸Create SiteBuilder Themes
      • â„šī¸Create Marketplace Modules
      • â„šī¸Adding Dynamic Layouts to Themes & Modules
      • â„šī¸Adding Static Layouts to your Theme
      • đŸ’ģReference
  • CMS
    • Dashboard
    • Pages
      • 🚀Quickstart: Pages
      • 🎨Studio Alpha Release
      • â„šī¸Studio
      • â„šī¸Code View & Toolbox
      • â„šī¸About Pages
        • â„šī¸Page Settings
        • â„šī¸Custom Fields in Pages
        • â„šī¸Pages with Siteglide CLI
      • â„šī¸About Page Templates
        • â„šī¸Page Templates with Siteglide CLI
        • Preventing Duplicate Content
      • â„šī¸System Pages
      • đŸ’ģReference
      • đŸŒŗFile Structure
    • Content Sections
    • File Manager
      • 🔹About Assets
      • 🔹Linking to Assets Explained
      • 🔧Assets Troubleshooting
      • 🔹Siteglide Scripts Explained
      • đŸ’ģAssets with CLI
      • đŸ”ŧMigrating Assets
      • 📋Steps to Optimise Images on the Fly with Cloudinary
      • 🔹siteglide_head_scripts and siteglide_footer_scripts Explained
      • đŸŒŗAssets File Structure
      • 👀Tags for Assets
    • Forms
      • Quickstart: Forms
      • â„šī¸About Forms
      • 📋Guides: Forms
        • 📋Steps to Using Separate Fields for First Name and Surname in a Form
        • 📋Steps to Programmatically Redirecting after a Form Submission
        • 📋Steps to Adding Form Confirmation Pages
        • 📋Steps to Adding a Progress Bar
        • 📋Steps to Changing Form Styling on Submission Using CSS
        • 📋Steps to Using Custom Field Set fields in a Form's Custom Layout
      • đŸ§™â€â™‚ī¸Go Further: Forms
        • â„šī¸Migrating Forms
        • â„šī¸Explained - Preventing Spam Form Submissions and Captchas
        • â„šī¸Explained - Show Clearly When a User is Already Logged in When Submitting a Form
        • â„šī¸Forms Error Callback and Validation
        • â„šī¸Forms Success Callback
        • â„šī¸File Upload Previews
      • đŸŒŗForms File Structure
      • đŸ’ģReference
      • ❔Troubleshooting
    • Automations
      • 🚀Quickstart: Automations
      • â„šī¸About
        • â„šī¸Email Templates
        • â„šī¸Email Automations and Email Templates with Siteglide CLI
      • 📋Guides
        • â„šī¸Integration Automations
        • â„šī¸A Transactional Email Example
        • â„šī¸An API Call Action Example
        • â„šī¸A Custom Liquid Action Example
        • 📋Steps to Testing Emails on a Staging Site
        • 📋Steps to Authenticating Sendgrid Emails on Live Sites
      • đŸ§™â€â™‚ī¸Go Further
      • đŸ’ģReference
      • đŸŒŗFile Structure
    • Categories
      • 🚀Quickstart: Categories
      • â„šī¸About
        • â„šī¸Outputting Categories on WebApp / Module / eCommerce Layouts
        • â„šī¸Filtering WebApps and Modules by Categories Using Liquid Parameters
      • đŸŒŗFile Structure
      • đŸ’ģReference
    • Company Information
      • â„šī¸About
      • đŸ’ģReference
      • ❔Troubleshooting
    • URL Redirects
  • Modules
    • Core Modules
      • MenuBuilder
        • 🚀Quickstart: Menu Builder
        • â„šī¸About
      • Secure Zones
        • 🚀Quickstart: Secure Zones
        • â„šī¸About
          • 📋Dynamically Assign a Secure Zone during Form Submission
        • đŸ§™â€â™‚ī¸Go Further
          • â„šī¸Secure Zones with Siteglide CLI
          • â„šī¸Using the context.current_user object
      • Media Downloads
        • 🚀Quickstart: Media Downloads
        • â„šī¸Layouts
        • đŸ’ģReference
      • Blog & Authors
        • 🚀Quickstart: Blog & Authors
        • 🔹Blog Archive & Date Filtering
        • 🔹Blog Search
        • 🔹Blog Filter by Category
        • 🔹Blog Filter by Author
        • đŸŒŗFile Structure
        • đŸ’ģReference
      • Events
        • 🚀Quickstart: Events
        • â„šī¸Standard List View
        • â„šī¸Getting Started with Event Filtering & Searching
        • â„šī¸Filter by Category
        • â„šī¸Filter By Host (Author)
        • â„šī¸Filter by Event Dates
        • â„šī¸Datasourcing the Event Host
        • â„šī¸Search
        • â„šī¸Map List View
        • â„šī¸Calendar List View
      • FAQ
        • 🚀Quickstart: FAQ
        • đŸ’ģReference
      • Testimonials
        • 🚀Quickstart: Testimonials
        • đŸ’ģReference
      • Slider
        • 🚀Quickstart: Slider
        • đŸ’ģReference: Slider
    • Community Modules
      • đŸ—ī¸SiteBuilder
      • 🚀CRM Sync
        • â„šī¸About CRM Sync Module
        • 📋Steps to Set Up CRM Sync on an Automation
        • đŸ—“ī¸CRM Sync Changelog
    • Go Further: Modules
      • â„šī¸Front-end Submit Modules
  • WebApps
    • 🚀Quickstart: WebApps
    • WebApp Items
      • 📋Create WebApp Items
      • 📋Importing and Exporting
    • Layouts
      • â„šī¸WebApp List Layout
      • â„šī¸WebApp Detail Layouts
    • Go Further: WebApps
      • 📋Searching by Location
      • 📋Searching - Advanced Filtering
      • 📋Searching - By Keyword
      • 📋Front End Create Forms
      • 📋Front End Update Forms
      • 📋Front End Delete
  • WebApp Troubleshooting
  • eCommerce
    • 🚀Quickstart: eCommerce
    • Get Started
      • 💡About the eCommerce Module
      • Settings
      • 📂Cart, Checkout and Quotes
        • 💡About Cart, Checkout and Quotes
        • 📋Steps to Implement a Guest Checkout Flow
        • 📂Product Views
          • 🔹Product Layouts
          • 🔹Product List Layout
          • 🔹Product Detail Layout
          • 🔹Add to Cart Button
          • 📋Steps to Datasource and Display Related Products
          • 🔹Dynamic Product Layouts based on Categories
          • 📂Attribute Selection
            • 🔹Attribute Layout - Presenting the Choice to the Customer
            • 🔹Attributes - Changing Product Price after Change
          • 📂Discount Selection
            • Discount Codes Layout
            • Minimum Payments
          • 📂Shipping Selection
            • Shipping Options Layout
        • Managing Products
          • Creating and Editing
          • Securing Products
          • Location
          • Custom Fields
          • Edit Module Structure
          • Product Custom Field Sets
          • Inventory
          • Managing Attributes
          • Pricing
          • Product Categories
          • Open Graph Fields
          • SEO Fields
          • Standard Fields
          • Product Import and Export
          • Discounts
        • 📂Cart
          • 🔹Cart Layouts
          • Checking Inventory in Cart
          • Updating Quantity in Cart
          • Updating Displayed Cart Quantity
        • 📋How to Set Up a Shopping Cart and Guest Checkout - Tutorial
        • 📂Checkout Forms
          • 🔹Checkout Form Layouts
          • 🔹Checkout Forms with PayPal
        • 📂Orders
          • Order Confirmation
          • Re-Ordering
          • 🔹Orders Layouts
        • 📋Steps to Add Secure Zones and User Orders View to your Checkout Flow
        • Quotes
        • Selling Digital Products
        • 🔹Volume Pricing
        • 📋Steps - Alternatives to Product Grouping
      • 📂Basic Payment Forms
        • 💡About Basic Payment Forms
        • 📋Steps to Set up a Basic Payment Form (with a Fixed Payment Amount)
        • 📋Authorize.net Basic Payment Forms
        • 📋PayPal Basic Payment Forms
        • 📋Steps to Allow User to Decide Amount they Will Pay
        • 📋Step-by-step Basic Payment Confirmations
        • 👀Basic Payment Forms Reference
        • â„šī¸ecommerce/basic_payment
      • 📂Payment Gateways
        • đŸ’ģBuilding a Custom Payment Gateway
          • 📋Steps to Support Basic Payment Forms with your Custom Payment Gateway
          • 📋Steps to Support Checkout with your Custom Payment Gateway
        • 🔹Paypal Custom Parameters
        • 🔹Styling Stripe Card Elements
        • 💡About Payment Gateways
        • 📋Steps to Switching Payment Gateway
        • 🔹Test Cards
      • 📂Currency and Tax
        • 💡About Tax Codes
        • Currency Changer
        • Tax Code Changer
        • Formatting Currency
      • 📂Subscriptions
        • 💡About Subscriptions
        • Managing Subscriptions
          • Creating Subscription Products
          • Changing Price and Billing Interval
          • Creating a Form for Signing Up and Changing Payment Details
          • Subscription Order Status Explained
          • Terms and Conditions (Good Practice)
        • 📋Subscriptions Payment Gateway Setup
        • Subscriptions List Layout
        • Subscriptions Detail Layout
        • User's Active Subscriptions
        • Subscription Action Required
        • Cancelling Subscriptions
      • đŸŒŗBasic Payment Forms Folder Structure
      • đŸŒŗCart and Checkout Folder Structure
  • CRM
    • 🚀Quickstart: CRM
    • Users
      • User Details
      • User Secure Zones
      • How Users Edit their Email and Password Front End
      • Custom Field Sets & CRM Custom Fields
      • Storing User's Favourite WebApp / Module Items
    • Companies
    • Cases
      • User's Form Submissions (Cases)
  • Site Manager
    • Code Editor
    • Templates (Pages & Email)
    • Headers & Footers
    • Code Snippets (Includes)
      • 🔧Includes Troubleshooting
      • 👀constants_json
      • 👀constants
      • đŸŒŗIncludes File Structure
      • đŸ’ģIncludes with Siteglide CLI
      • 🔧Tags for Includes
    • System Pages
      • Automatic Site Maps
    • System Emails
    • Data Management
    • Admin Menu Editor
    • Integrations
  • Reporting
    • 🚀Quickstart: Reports
  • Miscellaneous
    • System Features
      • Pagination on Liquid Tags
      • Custom Pagination Layouts
      • Timezones in the Siteglide Admin and on the front-end of your Site
      • Module/WebApp Caching
      • Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
      • Translating Dates
      • Site Search
      • About Site Search
      • AI Tools for the Rich Text Editor
      • Cookies on Siteglide Sites
    • Front-End Performance
      • Video Embeds
      • Forms Above the Fold
Powered by GitBook
On this page
  • Introduction
  • How CRM editing works
  • Adding Custom Field Set Fields to a Form
  • Custom Field Set field syntax in the Form's Layout
  • Adding CRM Custom Fields to the Form
  • CRM Custom Field syntax in the Form Layout
  • Displaying current field values for logged in users
  • Multiple parts to the Form

Was this helpful?

Export as PDF
  1. CRM
  2. Users

Custom Field Sets & CRM Custom Fields

PreviousHow Users Edit their Email and Password Front EndNextStoring User's Favourite WebApp / Module Items

Last updated 1 month ago

Was this helpful?

All Forms allow Users to edit their details in the CRM. This includes all standard fields like "name" and Custom Field Sets.

Introduction

All Forms allow Users to edit their details in the CRM.

This includes:

  • Name

  • Any Custom Field Sets attached to the Form. Use these to store information that you want to keep up to date.

  • .

Standard Form Fields are stored against the Case only and are not stored against the CRM record.

This Article will:

  • Show how to output Custom Field Set Data in the Form

  • Show how to display any existing data in the Form- so the User understands that they are editing data.

  • Explain the process Siteglide takes with User data when a Form is submitted

How CRM editing works

The flowchart diagram below demonstrates an abbreviated summary of what happens when a Form is submitted on Siteglide. Where the diagram mentions Custom Field Sets, the newer CRM Custom Fields feature is applicable as well.

-->

The most important points to draw from this are:

  • All Forms will create a Case and all fields submitted will be shown in the case

  • But only the following fields will update the CRM:

    • Custom Field Sets attached to the Form

    • CRM Custom Fields

    • The user's "name" field

    • The email field (on first submission only) - this is used as a unique identifier in the CRM.

  • When using Custom Field Sets and CRM custom fields to update the CRM, it doesn't matter whether or not the User already exists in the CRM, or whether or not the User is already logged in.

Adding Custom Field Set Fields to a Form

In summary, to add Custom Field Set fields to a Form, you'll need to:

  1. Create a Custom Field Set (or choose an existing one)

  2. Attach the Custom Field Set to a Form in Admin. You can mix & match different kinds of fields here.

  3. Check that the Liquid for this field is included in the Form Layout

  4. Add your Form to a Page with the chosen Layout

Custom Field Set field syntax in the Form's Layout

If you use a default Form Layout, then attaching the Custom Field Set to the Form will automatically add the fields to the Layout. If using a Custom Layout, we recommend you copy and paste the code from the default Layout to your custom Layout before editing it.

Here is an example of a Custom Field Set field added to the Layout:

<div class="row mt-4 input_text">
  <div class="col">
    <label for="form_field_13_3">Favourite Colour</label>
    <input class="form-control" 
           name="{{ form_builder.fields.properties.form_field_13_3.name }}" 
           data-cfs="3-3-input_text" 
           type="text">
  </div>
</div>

Note the data-cfs attribute which gives you a clue this is a Custom Field Set Field and will therefore submit to the CRM record.

Adding CRM Custom Fields to the Form

CRM Custom Fields work in a similar way to Custom Field Sets, but instead of operating as a group of fields, they can be added to the form individually. One advantage they have over Custom Field Sets is that they use slightly less database records in your usage metrics.

See here for a more detailed explanation of creating CRM fields:

In summary:

  1. In CRM, custom fields tab, create each custom field you need

  2. Attach the CRM Fields to a Form in Admin. You can mix & match different kinds of fields here.

  3. Check that the Liquid for these CRM fields is included in the Form Layout

  4. Add your Form to a Page with the chosen Layout

CRM Custom Field syntax in the Form Layout

As with Custom Field Sets, the syntax for adding CRM custom fields to your form is automatically added to the Form's default Layout. You may need to run a pull command if you are using Siteglide-CLI to get any new changes to your default Layout. If using a Custom Layout, we recommend you copy and paste the code from the default Layout to your custom Layout before editing it.

Here is an example of a CRM field added to the Layout:

<label for="form_field_1_1">Shipping Address Line 1</label>
<input class="form-control sg-form-control required" name="{{ form_builder.fields.properties['form_field_1_1'].name }}" data-crm="user_field_1" type="text">

Note the data-crm attribute which gives you a clue this is a Custom Field Set Field and will therefore submit to the CRM record. The ID in the data-attribute refers to the CRM field's ID in the CRM; it is different from the ID in the name attribute, which refers to the field's ID in the case.

Displaying current field values for logged in users

Prerequisites:

  • The User must be logged in

Why is pre-filling fields useful?

It's extremely useful to display the current values in the fields on Page load. This shows the User the data that is already stored and allows them to make a decision about whether the data needs to be changed.

An alternative - Using GraphQL to fetch CRM data

Using User Details to fetch CRM data- steps

In Order to fetch the existing Custom Field Set data for the current User, they'll need to be logged in. This means they'll need to have already completed a Sign-Up Form to any Secure Zone and set up a password. You may find it helpful to build an onboarding flow with two separate.

To achieve this, you can combine two Siteglide Features by nesting a Siteglide Form inside a User Details Layout.

{% include 'user_details', layout: 'user_details_edit_form_container' %}

Parameters:

  • layout - Choose a Layout from the following folder in Code Editor: layouts/modules/module_5/user_details/

Step 2) Place the Form inside User Details The User Details Layout has direct access to Custom Field Set data, but normally the Form does not. In order to achieve this, we place the Form inside the user_details Layout. Due to Liquid inheritance, the Custom Field Set data will then be available inside the Form.

Output your Form by writing the code for the Form inside this user_details Layout instead of directly in the Page e.g.

{% include 'form', id: '10', layout: 'custom' %}

Remember to replace the example form ID with your own.

Step 3) Use Liquid to prefill the HTML values This will allow you to access the existing User data and their related Custom Field Sets within the Form.

In this example, we have a Custom Field Set "Checkout Address" with a "Profile Picture", a Favourite Colour and a Country field:

{{this.custom_field_sets['Checkout Address']['Favourite Colour']}} 
<!-- Red-->
{{this.custom_field_sets['Checkout Address']['Country']}} 
<!-- UK -->
{{this.custom_field_sets['Checkout Address']['Profile Picture']}} 
<!-- documents/form_uploads/form_3/profile-1603989579828.png -->

As the value attribute in HTML determines the pre-filled value of a field, we can use Liquid to add it. In most cases, there is an <input> element which can be given a value, eg. in the "Favourite Colour" field:

<input 
  class="form-control" 
  name="{{ form_builder.fields.properties.form_field_13_3.name }}" 
  data-cfs="3-3-input_text" 
  type="text" 
  value=""
>

Values can also be added to <select> elements:

<div class="row mt-4 select">
  <div class="col">
    <label for="form_field_13_1">Country</label>
    <select 
      class="" 
      name="{{ form_builder.fields.properties.form_field_13_1.name }}" 
      data-cfs="3-1-select" 
      value="{{this.custom_field_sets['Checkout Address']['Country']}}"
    >
      <option value="UK">UK</option>
      <option value="USA">USA</option>
      <option value="Canada">Canada</option>
      <option value="Australia">Australia</option>
      <option value="New Zealand">New Zealand</option>
    </select>
  </div>
</div>

File and Image fields are more complex, each has two elements- a type="file" and a type="hidden" field. If you wish the File upload to have validation, both the value attribute and .required class should be added to the type="hidden" input. This is because this is the field that actually has a name attribute and sends to the database.

<label for="form_field_3_6">Profile Picture</label> 
<input 
  class="form-control required" 
  name="{{ form_builder.fields.properties.form_field_3_6.name }}" 
  data-cfs="1-6-image" 
  type="hidden"
  value="{{this.custom_field_sets['Checkout Address']['Profile Picture']}}"
>
<input class="form-control" id="form_field_3_6_file" type="file">

This adds the value to the field, but for the Profile Picture, I may also want to show a larger preview of the image outside the field. You can use the same Liquid to display the image, using the asset_url filter to complete the path:

<div id="profile_pic" data-file-preview="form_field_10_1_file" style="background-image: url('{{this.custom_field_sets.cfs_3.properties.cfs_field_3_1 | asset_url}}');">

</div>

Attributes:

  • style="background-image: url('{{this.custom_field_sets.cfs_3.properties.cfs_field_3_1 | asset_url}}');" - This Liquid would allow the existing image to be displayed on Page Load.

Multiple parts to the Form

You may wish to split your fields into multiple "User Profile" sections where the User can enter a set of fields, save and then move to another section.

To keep the Cases tidy for multiple Forms and be most efficient with Database Usage, you can optionally use:

  • A single Admin Form

  • A single Custom Field Set

  • Multiple Form Layouts, each displaying alternative sub-sets of Fields. (Name and email can be pre-filled using HTML, to prevent asking logged in Users for this information multiple times in the flow.)

This will mean that Cases for each part of the Form will still be collected in the same location in Admin, but you can use the Form Layouts to control which fields are displayed in each view.

All Forms must include the user_id and email fields, but if you want to hide these from the sections which are not visible, you can give these type="hidden" so that they are not seen in the Sections which do not require them. You can auto-fill their values using the steps in the previous section.

The "edit email" and "edit password" fields

See here for a more detailed explanation of

The User must already be Signed Up to any

Before we show you the User Details method which uses a low-code approach, we should note that the GraphQL usersquery provides a more flexible approach to fetching user data, including fetching details of users who are not logged in. You can learn more about how to use GraphQL queries here:

Step 1) User Details Contain the existing CFS Data To fetch the existing CFS and CRM data for the Current User, you'll need a Layout.

See to see how to access data from CRM custom fields within the User Details Layout.

data-file-preview="form_field_10_1_file" - This sets up the element to preview the next image a User uploads to this field. Read more here: .

Learn more about editing email and password here
learn more about editing email and password here.
Adding Custom Field Set Fields to a Form
https://docs.siteglide.com/en/crm/quickstart-crm
Secure Zone
https://docs.siteglide.com/en/developer-tools/graphql/tutorials
User Details
File Upload Previews
https://docs.siteglide.com/en/crm/users/user-details#accessing-custom-crm-fields