Embed Google form in website without iframe

According to surveys, Google form is commonly used to collect people’s opinions as well as information. Its advantages are free, high-speed, and easy to use. Normally, a Google link or a shortcut link in the format of goo.gl is used. In this article, we will talk about how to embed google form in website without iframe. In this way, you can add any form to any platform, to any location which may be your website, email or even mailchimp.

Preparation before “Embed Google form in website without iframe”

  • A Google account to create a Google form
  • (Option) A contact page used to add to Shopify. You may use Weebly.

Implementation “Embed Google form in website without iframe”

Create a form

Firstly, you get to the website with address https://www.google.com/intl/en-EN/forms/about/ . You should replace the language pair en-EN in the url with your language pair appropriately.

You could create a form. Here I use the default form of Google as below

Now, you click on Send button on the top right of the screen

A popup shows up so that you can select the embed icon as in the figure. Now you can select the form height and width. This custom form can be shared via social networks such as Google plus, Facebook, Twitter. In this article how to embed google form in website without iframe, after selecting the dimension, you click on Copy to copy form.

At the moment, you create a page in Shopify. In Editor, you switch to using html mechanism, paste the form here, and save it.

You should view this page to check. If the result is the same as below, you carry out correctly. If it is different, you should review each step carefully.

This article is quite simple. You can easily follow the above notes. The article how to embed google form in website without iframe comes to an end now.

If you use Shopify, Google form or default forms of Shopify are a good idea. However, I recommend that you should use custom form app for Shopify. It allows you to drag and drop fields with new field formats that Google form does not include such as Google map, Upload file. It also supports fully responsive to various screen sizes of different devices. Especially, you can have a lifelong app usage for free.

how to add a drop down menu in Shopify?

Drop down menu is one type of menu including a parent menu and submenus. When you hover or click on the parent menu, a list of submenus belonging to parent menu will show up. Drop down menu makes your websites more tidy, attractive and professional. Drop down menus on Shopify are different from other source codes. So, how to add a drop down menu in Shopify? This article will help you answer this question.

The first step is that you log in the back office of Shopify. The link for you to login is http://yourdomain/admin . Use your account to log in the website. Please make sure that your account has right to create and edit menus. To check this right, you click on Online Store, and click on Navigation. If you can add menu, you are allowed to continue. If not, you should use another account or request for your account to be given extra rights.

how to add a drop down menu in Shopify

Add a parent menu

You can edit a menu in the list of existing menus by adding a drop down menu. Or you can create a new menu.

Title: You input the name of the menu

Add menu item: Here you add menu items. For example, in this article, items are Home, Shop, Sale, Collection, Blog, Pages

how to add a drop down menu in Shopify

After adding menu item, we have a menu as below

how to add a drop down menu in Shopify

Add submenus

You may ask why the question how to add a drop down menu in shopify is related to submenus. If you do not know the answer, I will explain to you. Drop down menu includes a parent menu and submenus. Usually, on the screen, parent menu displays and submenus hides. When you hover mouse cursor to the parent menu, a list of submenus will display.

how to add a drop down menu in Shopify

One special thing of Shopify is that the name of submenu should be set as the same as that of the menu item. In the following example, we create submenus for home item. We will set the name as “home”. We add custom items with names home page 1, home page 2, home page 3, etc. for example.

how to add a drop down menu in Shopify

We have run through the article how to add a drop down menu in shopify. If you have the same question such as how to make a drop down menu in shopify , or how to create a drop down menu in shopify, I believe you have your own answer. It is too easy to create a drop down menu on Shopify. I believe that you can do that.

If you want to create a drop down menu with unlimited submenus, I suggest that you should mega menu app. It supports to add not only unlimited submenus but also contact form, html, image, and best-selling products, which makes your website more lively, increasing customers’ experiences and your revenues.

If you are good at html, css code, please read this article which will help you to create a menu with code

 

How to create shopify mega menu code

shopify mega menu code is a combination of html, css, js source codethat you can add to your website. You can use this free mega menu code to add to your project. This article will guide you on how to create and insert mega menu code in your website.

In this example, I will create a simple mega menu including a drop down menu, and images. Based on this example, you can customize it so that it can be suitable for your store and your hobby as well.

Create mega menu code

To facilitate the process of editing code, you could use software such as như note notepad++, phpdesigner, etc. Or you can open directly the Shopify’s file in the back end of Shopify.

In this example, we use phpdesigner to edit code. We will add shopify mega menu code to the website if everything is okay after testing.

Create index.html file with the following content

<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>

Create style-megamenu.css file with the following content

* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Mega Menu header, if needed */
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

We will test the menu by opening index.html file on the browser. If there is any problem that needs to be edited, you edit it the file you have created.

Add code to Shopify

To keep your website safe, you duplicate the theme, and try this mega menu on the duplicated theme.

shopify mage menu code

We can use Preview status of Shopify by clicking on Action button. In the list of drop down menu, you click on preview as below. In this status, only you can see the changes on the website when you add mega menu code. This will be safe because your customers are not affected. And if there is something wrong with the interface, nobody knows this.

shopify mage menu code

Next, we will edit code

shopify mage menu code

Depending on the place you want the menu to be displayed, you select a proper file to edit. In this example, I use the default Debut theme. I will add Shopify mega menu code to the existing main menu of the theme.

Add html code to theme

In the Debut theme, the following code helps display the menu {% include ‘site-nav’ %}

Now, you open header.liquid file, search for code {% include ‘site-nav’ %} in line 177 of the original theme. We will edit this code as {% include ‘mega-menu’ %}

shopify mage menu code

Next, in Snippets, you click on Add a new snippet, enter texts “mega-menu”, and click on Create snippet

shopify mage menu code

In mega-menu.liquid file, you add all the html contents in index.html file we have prepared in the first step and save them.

shopify mage menu code

Add css to theme

Add these codes {{ ‘mega-menu.css’ | asset_url | stylesheet_tag }} to theme.liquid file

shopify mage menu code

In Assets, click on Add a new asset. A popup shows up, you click on Create a blank file. Enter the name of “mega-menu” file, choose format as “.css”, click on Add asset bordered in red.

shopify mage menu code

Next, enter the content of style.css file to mega-menu.css file just created, then save this.

shopify mage menu code

 

Now, you enjoy the result in the front end.

We have just created shopify mega menu code and add it to the website. This way in not time-consuming, you just need to copy and use the codes. But it is extremely difficult for people who do not know about codes. If you do not know about codes, I suggest that you should use mega menu app. When you use this app, you just need to drag and drop to create a menu. There are many menu types so that you can show your creativity. You can refer to this link https://apps.shopify.com/globo-mega-menu to try using the demo. Of course, your menu will be much more attractive. I really recommend you to use this app.