website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
14min

FAQ - How to have separate field for first name and surname in a Form.

Currently a form needs a value of "s_name" to submit properly. Lets take a look at how we can include two separate fields into "s_name".

Introduction

When a Form is created you'll notice two standard field that are always required; Name and Email. These two fields must have a value when a user submits the Form or it will fail (as the required fields haven't been given). If two separate fields are required for both first name and last name there is a way of getting round this!

Separate Name Fields

Firstly we'll need to create/ locate the form we need to add custom fields to. Head over to your sites admin, from here click "CMS" and find "Forms" within there. From here you can choose to create or edit a Form (as seen in red highlights):

Document image

Firstly we must create two separate form fields for First name and Last name, to do this click "Add new Field" and name them accordingly:

Document image

These must be set to 'required' as they're being inserted into the name field (which will prevent the Form from submitting without a value).

We will be building upon the "default" Form layout as it automatically creates all the correct fields the Form needs to submit. Go to "Site Manager/ Code Editor/ Forms/ 'Your Form'/ default.liquid". Copy the code inside this file. Create a new file in Code Editor\ Layouts\ Forms- right click the form we've created to make a new file, mines named "MembershipSignup".

Note

The file name must be followed by .liquid.

Create a custom Layout:

Now we'll need to create a custom layout. Right click the Form we're working on and select "Create File":

Document image

Copy the code from the default layout into here (we'll be using this as a starting point). You'll notice that the full name field has a type of "text", this will need to be replaced with "hidden" (this field is just for the database- users don't need to see it!). Remove "Name" from the label element as it will still display otherwise. Here's what it should look like:

HTML
|

Add IDs to custom fields:

Next we must add unique ids to our custom fields, we will use these to combine the two fields later on.

Update each field to include id="lastName" and id="firstName" after the name value. These aren't normally required but will be used to refer to our fields in the following Java Script. Here's what the custom fields should look like:

HTML
|

Include handleNames() function:

Next, we must look at the submit button. Normally it uses the onClick attribute to fire Siteglide's form submit function- but we want it to wait until we've handled the name fields. 

HTML
|

So we switch it to run my handle_names(this) function instead, we'll also need to remove 'form_2' as this submits the form (we. The submit button should look like now:

HTML
|

Add the handleNames() function:

Lastly we must combine both the fields by adding some Java Script below all of our form fields. This will run the user clicks the "Submit" button, it combines the firstName and lastName fields before submitting the form!

JS
|

That's everything! Your form will now include the First name and Last name within s_name:

Document image

Related Articles: 

  • Creating Forms

Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
FAQ - Shared Devices
Docs powered by archbee 
TABLE OF CONTENTS
Introduction
Separate Name Fields
Note
Create a custom Layout:
Add IDs to custom fields:
Include handleNames() function:
Add the handleNames() function:
Related Articles: