Customizing the Custom Form Section

Customizing the Custom Form Section

Custom Form Section Overview

In Shopify stores, custom forms are invaluable for gathering specific customer information, collecting feedback, and streamlining communication. Tapita's Custom Form Section provides a versatile tool to create personalized forms that cater to your unique needs, fostering stronger customer relationships.

With Tapita's Custom Form Section, you can:
  1. Create Customizable Form Fields: Tailor fields to fit your specific needs, from contact forms to feedback requests.
  2. Offer a User-Friendly Design: Provide a clean and intuitive layout for seamless user interaction.
  3. Ensure a Responsive Layout: Ensure the form looks and functions perfectly on all devices.
  4. Engage Your Audience: Gather valuable insights and build stronger customer relationships through custom forms.
  5. Maintain Brand Alignment: Adjust colors, text, and styling to seamlessly match your store’s branding.

Custom Form Section Customization

For instructions on how to add a custom form section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.
After adding your desired Custom Form Section to your store, you can customize its content as follows within the Shopify Theme Editor:

Step 1: Under the custom form section, click "Add block."

Step 2: You can add 6 types of blocks:
  1. Text block: 
    1. Width (pixels): Adjust the width of the input field.
    2. Type: Choose the input type:
      1. Number: For numeric input only.
      2. Phone: For phone number input.
      3. Text: For general text input.
      4. Date: For selecting a date.
      5. Time: For selecting a time.
    3. Label: Insert the label for the input field.
    4. Placeholder: Insert placeholder text to display inside the input field when it's empty (Not applicable for Date and Time types).
    5. Note: Add a descriptive note below the input field for extra guidance.


  1. Textarea block:
    1. Width (pixels): Adjust the width of the input field.
    2. Label: Insert the label for the input field (e.g., "Order Notes").
    3. Placeholder: Insert placeholder text to display inside the input field when it's empty.
    4. Note: Add a descriptive note below the input field.


  1. Select block: 
    1. Width (pixels): Adjust the width of the select field.
    2. Label: Insert the label for the select field.
    3. Note: Add a descriptive note below the select field.
    4. Option 1-10: Insert the text for each option in the dropdown menu. Use as many options as you need (up to 10)


  1. Checkbox block:
    1. Width (pixels): Adjust the width of the checkbox element.
    2. Label: Insert the label for the checkbox.
    3. Note: Add a descriptive note below the checkbox.
    4. Display Inline: Enable to display the options horizontally, or disable to display them vertically.
    5. Option 1-10 Value: Insert the value associated with this checkbox.
    6. Checked: Enable to have this checkbox selected by default.


  1. Radiobox block:
    1. Width (pixels): Adjust the width of the radiobox element.
    2. Label: Insert the label for the radiobox group.
    3. Note: Add a descriptive note below the radiobox group.
    4. Display Inline: Enable to display the options horizontally, or disable to display them vertically.
    5. Option 1-10 Value: Insert the value associated with this radio button (e.g., "Size S," "Size M").

  1. Description block:
    1. Width (pixels): Adjust the width of this element.
    2. Description: Insert the text to display (e.g., "By submitting your email, you agree to our terms and conditions...").


You can configure the custom form section as follows:
  1. Click on the custom form section
  2. Configure the section header
    1. Heading: Enter the main heading text for the section (e.g., "GET 15% DISCOUNT"). This is the primary title that will appear at the top of the custom form section.
    2. Heading Size: Select a heading size ("Small," "Medium," or "Large").
    3. Sub-Heading: Enter a sub-heading text.
    4. Description: Enter a section description.
    5. Alignment: Choose the text alignment ("Default" or "Center").
  1. Configure the section body
    1. Show Form Background: Enable to display a background behind the form. Disable for a transparent background.
    2. Form Background Color: Enter the hexadecimal color code for the form background.
    3. Background Opacity: Adjust the opacity of the form background. Opacity refers to the degree of transparency. A lower opacity value makes the background more transparent (see-through), while a higher value makes it more opaque (solid).
    4. Submit Button Label: Enter the text for the submit button (e.g., "Submit," "Send").
  1. Configure the section layout
    1. Background image: Choose a background image for the section (if desired).
    2. Section Full Width: Toggle this setting to make the section span the full width of the screen. If disabled, customize the size at "Section max width."
    3. Content Full Width: Toggle this setting to make the content within the section span its full width. If disabled, customize the size at "Content max width."
    4. Padding and Margin: Adjust the padding and margin for the section on mobile, desktop, and tablet screens to control spacing.
  1. Configure the section color
    1. Background: Choose a color for the section background.
    2. Background Gradient: Set a background gradient. This allows you to create a subtle color transition in the background instead of a solid color.
    3. Foreground: Choose a color for the foreground elements.
    4. Title: Choose a color for titles.
    5. Button Background: Choose a color for button backgrounds. This determines the background color of any buttons within the section.
    6. Button Text: Choose a color for button text. This sets the color of the text displayed on the buttons.
    7. Input, button radius: Set border radius for input and button elements.
  2. Configure the section optimize
    1. Lazy Load Speed: The section will only load when it is scrolled to on the page, improving initial page load times.

Now you know how to customize the Tapita's Custom Form Section to gather valuable customer information, create personalized forms, and enhance engagement with your audience! If you have any questions or need assistance, please don't hesitate to contact Tapita support.