How to embed 3rd party forms or code into a landing page

In this article, you will learn how to embed 3rd party forms or code on your site - in the navigation or elsewhere on certain pages in your store.

If you want to create a more detailed contact form than the one built-in on your site for collecting additional customer information you can do it with the appropriate software. And later you can embed it in your CloudCart store. You can easily create different types of forms for various purposes with such software - forms for returning goods, participating in raffles, filling out a questionnaire that concerns some activity of the store, etc.

In this section:

Creating a form
Embedding the form in your store
Creating navigation

We personally recommend using Google Forms - it offers an easy and intuitive method to build the form itself. It has all the necessary fields for creation of different forms. The data from the forms can be exported and displayed as a spreadsheet in Google sheets. There is also other software like JotForm. No matter what software you choose it is important to allows embedding of the created forms.

Creating a form

Let's look at a case in which we create a product return form. We used Google forms to create our form. Your form can have different sections such as name, address, customer's phone number, order number and date, list of products, a customer's bank account, etc., depending on what information you want to get. You can also add the logo of your store to make the form looks better when you embed it on your site. Here's a part of our sample form created in Google Form:

Once you've created a certain form you can track the responses of all your customers who have completed it from Responses (Google Form), as well as export this information to Google Sheet as a spreadsheet to better organize your results.

Embedding the form in your store

1. To embed the created form, no matter what type it is (for returning goods, questionnaire, etc.) you need to copy the embed code of the form, in this case, it is done by clicking the Send button located in the upper right corner of the screen, select the "<>" icon and copy the code. You can change the width and length of the created form according to the place and the way you want to display it in your store.

2. The next step is to log into your admin panel and create a Landing Page and embed the desired form. To do this, go to Marketing > Landing Pages > Add New Page and select the type of page you want to create - Drag & Drop Page Builder or Regular Page. The drag and drop builder gives you more freedom in actions, editing, and adding elements, so it's up to you to decide which type to use.

If you choose Regular Page, in the text editor, click the Source code icon "<>" and paste the copied code, click OK, and then the Add New Page button to save the changes.

You can see how the built-in form looks like in your store by clicking on the link on the created page in the list of landing pages:

If you select Drag & drop Page Builder, from the Add New Row button, select how many columns to have, according to the elements you want to add to that row.

Then tap Add new widget > Add code snippets.

In the window that opens, paste the copied code and click the Save button.

If necessary, you can change the width and/or height of the form in the code itself: By clicking on the link on the created page in the list of landing pages you can see how it looks like. 3. Once you have embedded the created form, be sure to check how it looks in the mobile version and whether it is responsive, as 90% of users use mobile devices. You can do this with the right mouse button > Inspects.

Creating navigation

In order for your customers to easily reach the form, you need to create the appropriate navigation.

1. Copy the form link, go to My Store> Navigation section, and in the Footer menu create a new item to this menu from the Add More button. Select the required item type - Weblink or Static page link if the format you created is as a static page (regular page).