Forms can help you collect key information from users, such as names, contact methods, and addresses. By gathering this data, you can gain insights into users’ purchasing habits, preferences, and needs, which can provide valuable reference for optimizing products and services. This article introduces how to directly create forms in SHOPLINE and use the custom code to integrate with the third-party form tool ZOHO FORMS.

In This Article

• Directly Creating Forms
• Creating Forms Using ZOHO FORMS
• Embedding ZOHO Forms into the SHOPLINE Website

Directly Creating Forms

To create a “Contact Us” form in SHOPLINE, you can perform the following steps:

1. Go to Online Store > Page > Create a page. Select Contact as the theme template.
   
2. Click the small eye icon (Preview) next to the page title to view the form style.
3. The form style is currently based on a fixed template, as shown in the following figure. You can customize the form style and content using Custom CSS or Code Editor.
4. It is recommended that you link the form page to the navigation menu to make it easier for customers to find the form page and leave their personal information.
   
   
   

Using the Custom Code to Integrate with the Third-party Form Tool ZOHO FORMS

If you want to configure more custom options for forms, you can consider using a third-party form tool like ZOHO FORMS.

There are many third-party form tools available in the market, and businesses are free to choose the tool that best suits their needs. In this article, ZOHO FORMS is used for reference.

ZOHO FORMS is recommended for two main reasons: Firstly, ZOHO is an international tool that is easy for overseas buyers to use. Secondly, it supports sending inquiries directly to a company’s designated email address with a quote of 500 emails for free.

The following figures show screenshots of a ZOHO form.

To create a form like this, simply follow these steps:

To sign up for a ZOHO FORMS account, perform the following steps:

1. Sign up for and verify your ZOHO FORMS account for your business. Registration link: https://www.zoho.com/forms/? zredirect=f&lb=fr&zsrc=bheader
2. Log in to your email account to verify and make sure you complete this step for inquiries to reach your email.

To set up a ZOHO FORMS form, perform the following steps:

1. After signing up for an account, click Let’s Get Started on the welcome page to create a form.
   
2. First, click the CREATE FROM SCRATCH tab. If you prefer to use a template, click the USE TEMPLATES tab instead. Fill in GET A QUOTE in the Form Title text box. If you offer free samples, you can use GET FREE SAMPLES instead. You can leave the Description field empty or write a short and impactful message to attract potential customers, such as promotions or discounts. Click Create to create a form.
   
3. Configure the form. On the left side of the screen, you can see a label component area where you can drag and drop components to the middle of the screen. After you click the title or a component, you can modify text, instructions, and alignment in the Properties popup. Remember, only ask for necessary information from your buyers. If you ask for too much information or mandatory fields, buyers may be discouraged from filling out the form. It is recommended that you collect only the Name, Email, Phone, Whatsapp (or another contact method), and Message information. Email and Message fields are set as mandatory fields.
   

Here are the necessary settings for label components: Start by dragging the Name, Email, Phone, Single Line, and Multi Line components from the left-side component area to the center of the screen.

• Set Email as a mandatory field. Click Email. In the Properties popup, set Validation to Mandatory to make Email a mandatory field. Once you see a red asterisk (*) appear in the top right corner of the Email component, it indicates that the setting is applied successfully.
  
  
  
  
• Set instructions for the Phone component. This can remind buyers to include the area code when entering their phone number so that it can be distinguished which country the phone number belongs to and ensure proper contact. Click Phone. In the Properties popup, enter Please Start with Area Code. in the Instructions box.
  
• Use Whatsapp or another contact method. Click Single Line. In the Properties popup, set Field Label to Whatsapp or another contact method, and enter We will contact you in 48 hours. in the Instructions box. Although it is optional, it is always better to encourage buyers to fill in as many contact details as possible. Therefore, include the instructions We will contact you in 48 hours. to indicate that you will be reached out within 48 hours. Depending on the company’s policy or specific circumstances, you can also use variations such as “24 hours” or “12 hours” to indicate the timeframe within which contact will be made.
  
  
  
  
• Set Message as a mandatory field for buyers to write down their intentions. Click Multi Line. In the Properties popup, set Field Label to Message and Validation to Mandatory to make Multi Line a mandatory field.
  
  
  
  
• Set the location of the label. Click the GET A QUOTE title. In the Properties popup, set Label Placement to Left to place the labels to the left of the input boxes for a clean and aesthetic look. Click Save in the top right corner to save the form.
  
  
  
  
• Preview the form. Click Access Form on the right side of the navigation menu to see how the form looks. If you are not satisfied with the default layout design, you can click Themes in the navigation menu and select other layouts.
  

4. Set up a thank you page that displays a thank you message to buyers after they have successfully submitted the form. Set up a rule that redirects to the thank you page when the Email field is not empty. In the navigation menu, click Rules to open the rule configuration page. Click Form Rules in the left-side panel, and then click Configure Now in the center of the screen.
   

In the Properties popup, set Rule Name to the Thank you page, and include Any, Email, and Is Not Empty in the If part and Redirect To in the Then part. Click the edit box next to Redirect To to set the thank you message.

In the Thank You Page tab, select Plain Text, and enter Thank you!  We will contact you soon. in the text box. Click Done to save the thank you message.

Click Add to save the Thank you page rule.

5. Specify an email address to directly receive form submissions. In the navigation menu, click Settings to open the rule settings page. Select Email & Notifications > Email in the left-side panel, and click Configure in the center of the screen.
   

Set the sender and recipient email addresses. In the free version, the email addresses can only be selected from registered email accounts that have already been verified. Select Email from the drop-down list to the right of the subject combo box to use the buyer’s email as the subject of the email. Select the Include form submission in the body of the email checkbox, and click Done in the lower right corner.

6. Obtain the form link for placement on your website. In the navigation menu, click Share to open the sharing page. Click Public in the left-side panel, and ensure that the Enabled toggle is set to the on position. Copy the form permalink (URL), and then paste it into your SHOPLINE admin panel for website integration.
   
   
   

Embedding the ZOHO Form into the SHOPLINE Website

Associating the Form with Your Online Store’s Navigation Menu in SHOPLINE

You can perform the following steps to associate the form with your online store’s navigation menu in SHOPLINE:

1. Log in to your SHOPLINE admin panel, and go to Online Store > Navigation > Header. The Edit the navigation menu page appears. If your website has multiple sets of navigation controls, all those that need a form will need to be set up.
   
2. On the editing page, click Add menu item. Set Menu item title to GET A QUOTE or GET FREE SAMPLES.
   
3. Paste the copied URL of the ZOHO form into the Referral URL input box.
4. Click Add to associate the form with your website.

Embedding the ZOHO Form into the Website Homepage

You can also perform the following steps to embed the ZOHO form into your website homepage:

1. In your form builder on the ZOHO website, go to Share > Embed > JavaScript, and then copy the code snippet provided.
2. Open your website, go to the homepage design, and then select Design > Add Component  > Custom HTML.
3. Paste the code copied from Step 1 into the edit box, and then click Publish to add the form to the homepage.
4. Homepage effect:
   

Embedding the ZOHO Form into a Custom Page on Your Website

You can also perform the following steps to embed the ZOHO form into a custom page on your website:

1. In your form builder on the ZOHO website, go to Share > Embed > JavaScript, and then copy the code snippet provided.
2. Create a custom page.
   
3. Click the source code icon and paste the copied code and change the width in the blue-bordered section to 100%. Then, click Save to update the settings and embed the form. You can add the custom page to the navigation menu on your store homepage through the menu navigation settings.

Testing Inquiry After Form Addition

After you add the form to your website, it is important to test whether the form is working properly. Here are the steps to test the form:

1. Open your website and click GET A QUOTE in the navigation menu. Check that the form opens in a new tab and that the fields match your settings.
2. Fill out the form and try submitting it to see whether the mandatory fields work.
3. After submitting the form, check whether your thank you message appears.
4. Log in to your email account and check whether you have received the inquiry.
5. Inquiries will also be saved in the ZOHO FORMS admin panel, where you can view and export them by logging in.