ShopOne
English
English
  • WELCOME TO SHOPONE
  • I. OVERVIEW OF LANDING PAGES
    • 1. Overview
    • 2. What is a Landing Page?
    • 3. The Difference Between a Website and a Landing Page
    • 4. Types of Landing Pages
    • 5. Designing an Impressive Landing Page
  • II. INSTRUCTION FOR CREATING A LANDING PAGE FROM A TO Z
  • III. CREATING A LANDING PAGE WITH SHOPONE
    • 1. Dashboard Page
      • 1.1. Switching Workspaces
      • 1.2. Notifications
      • 1.3. Language
      • 1.4. Create a New Landing Page
      • 1.5. Search for Landing Page
    • 2. Actions with Landing Page
      • 2.1. View Landing Page Details
      • 2.2. Backup Data
      • 2.3. Landing Page Editor
      • 2.4. Rename
      • 2.5. Duplicate
      • 2.6. Export file
      • 2.7. Delete
    • 3. Features in the Dashboard
      • 3.1. Template
      • 3.2. Form Data
      • 3.3. Domains
      • 3.4. Settings
      • 3.5. Account
  • IV. Domain Setup
    • 1. Definition of a Domain
    • 2. Connecting your domain on ShopOne
      • 2.1. Connecting your domain to the ShopOne Cloud DNS platform
      • 2.2. Connecting your domain to the WordPress platform
    • 3. Pointing your domain to ShopOne
      • 3.1. Pointing your domain to ShopOne
      • 3.2. Check DNS
    • 4. Pointing a domain from some popular domain providers
      • 4.1. Pointing a domain from GoDaddy
      • 4.2. Pointing a domain from PA Viet Nam
      • 4.3. Pointing a domain from Nhan Hoa
      • 4.4. Pointing a domain from NameCheap
      • 4.5. Pointing a domain from Mat Bao
      • 4.6. Pointing a domain from Name.Com
      • 4.7. Add a domain to CloudFlare
      • 4.8. Pointing a domain from CloudFlare
  • V. BASIC SETUP TOOLS FOR THE LANDING PAGE
    • 1. Top Bar
      • 1.1. Save
      • 1.2. Preview
      • 1.3. Publish
      • 1.4. Help: Keyboard shortcuts
      • 1.5. Undo and Redo
      • 1.6. Choose Interface
    • 2. Sidebar
      • 2.1. Layers
      • 2.2. Popups
      • 2.3. Widgets
      • 2.4. Section
      • 2.5. Page background
      • 2.6. Settings
    • 3. Quick Setup Bar
      • 3.1. Content Editor
      • 3.2. Design Editor
        • ID CSS
        • Align
        • Size
        • Display on
        • Styles
        • Typography
        • Border
      • 3.3. Advanced Editor
        • Event
        • Animation
        • Desktop/Mobile sync design
        • Position type
        • Custom advance
      • 3.4. Duplicate
      • 3.5. Move
      • 3.6. Delete
      • 3.7. Help
  • VI. BASIC ELEMENTS
    • 1. Section
    • 2. Basic Widgets
      • 2.1. Text
      • 2.2. Button
      • 2.3. Container
    • 3. Media Widgets
      • 3.1. Image
      • 3.2. Slider
      • 3.3. Gallery
      • 3.4. Video
      • 3.5. Shape
    • 4. Business Widgets
      • 4.1. Forms
      • 4.2. Auto Number
      • 4.3. Countdown
      • 4.4. Lucky spin wheel
      • 4.5. Notify
    • 5. Advanced Widgets
      • 5.1. Accordion
      • 5.2. Tabs
      • 5.4. HTML Code
  • VII. TRACKING AND MEASURING THE LANDING PAGE
    • 1. Setting up SEO & Social page descriptions
    • 2. Tracking and Conversion Code
      • 2.1. Instructions for installing Facebook Pixel on a Landing Page
      • 2.2. Instructions for installing TikTok Pixel
      • 2.3. Instructions for installing Google Analytics on a Landing Page
      • 2.4 Instructions for installing Google Ads code on a Landing Page
      • 2.5. Instructions for adding Google Tag Manager code on a Landing Page
  • VIII. EXTENDED FEATURES
    • 1. Instructions for creating a "Call Now" button or linking to a Contact Page
    • 2. Instruction for changing Landing page design mode from Mobile Only to Responsive
    • 3. Animation page
      • 3.1. Snow Animation
      • 3.2. Firework Animation
Powered by GitBook
On this page
  • 1. Add a Form to the landing page
  • 2. Form Editor
  • 2.1. Content Editor
  • 2.2. Design Editor
  • 2.3. Advanced Editor
  1. VI. BASIC ELEMENTS
  2. 4. Business Widgets

4.1. Forms

Previous4. Business WidgetsNext4.2. Auto Number

Last updated 4 months ago

Forms allow you to create and manage forms on your landing page. Forms can be used to collect important information from users, such as contact details, newsletter sign-ups, or feedback from customers.

1. Add a Form to the landing page

  • Click on Widgets in the sidebar of the editor.

  • Select Forms from the Business section.

  • Choose the Form element and drag it onto your landing page.

2. Form Editor

2.1. Content Editor

To access the Content Editor, click on the Form widget you wish to modify on the screen and select Content from the quick settings bar.

  • Basic Information: Edit the information fields to collect data.

  • Add field: Add fields to the Form.

  • Form Title: The name of the Form.

  • Submit Title: The name of the submit button.

2.2. Design Editor

To access the Design Editor, click on the Form widget you wish to modify on the screen and select Design from the quick settings bar.

  • Display on: Allows you to control the display of the Form on different devices, including Desktop and Mobile.

  • General Form: Aligns the form, sets the background color, and determines how the text of the Form is displayed on the landing page.

    • Space between label & fields: Adjusts the space between the labels and the input fields.

    • Spacing: Adjusts the overall space between elements in the form.

    • Vertical space: Adjusts the vertical space between fields or lines in the form.

    • Horizontal space: Adjusts the horizontal space between elements in the form.

    • Form alignment: Aligns the entire form on the page.

    • Fields styles: Customizes the background and border of the input fields. - Background: Set the background color for the input fields. - Border: Customize the border of the input fields.

    • Fields text: Adjust the text settings within the input fields. - Label: Customize the label text of the form. - Input: Customize the input text in the fields. - Placeholder: Customize the placeholder text in the input fields.

    • Fields input: - MARGIN: Adjusts the outer spacing of the input fields relative to other elements in the form. - PADDING: Adjusts the inner spacing of the input fields, which is the distance from the edge of the field to the text content inside.

  • Title Form: Customize the display of the text in the form on the landing page.

    • Spacing: - MARGIN: Adjusts the outer spacing of the title relative to surrounding elements. - PADDING: Adjusts the inner spacing of the title, which is the distance from the edge of the title container to the text content inside.

    • Adjust text settings: Font family, Text alignment, Font style, Text decoration, etc.

  • Button Submit: Customize the appearance of the submit button.

    • Spacing: - MARGIN: Adjusts the outer spacing of the submit button relative to surrounding elements. - PADDING: Adjusts the inner spacing of the submit button, which is the distance from the edge of the button to the text content inside.

    • Space between fields & button: Adjust the spacing between the data fields and the submit button in the form.

    • Button Alignment: Align the submit button within its container. - Width: Adjust the width of the submit button. - Height: Adjust the height of the submit button.

    • Adjust the button and text settings: Fill, Font family, Text align, etc.

2.3. Advanced Editor

To access the Advanced Editor, click on the form you wish to modify on the screen and select Advanced from the quick settings bar.

Align: Helps you align the Form within the container. See details .

Sizes: Helps you adjust the size and position of elements on the landing page. See details .

Styles: Allows you to change the background color and shadow effects of the selected Form. See details .

Border: Allows you to add and customize the border around the Form, and you can also adjust the border radius. See details .

Form submit setting: Allows you to set up an event for the form submit button click action. See details .

Animation: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively. See details .

Desktop/Mobile sync design: Allows you to set synchronization options for the design between desktop and mobile. See details .

Position type: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users. See details .

Custom advance: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code. See details .

here
here
here
here
here
here
here
here
here