Once you have complete with creating your forms and designing them, the next necessary step is how you will be going to use them. So here in this post we will be going to see how to embed form( Web Forms ) in non-WordPress websites.


Watch the video tutorial given below


Types Of Forms

Basically, there are three embed types with which you can embed the form. They are:

  1. Sliding Form(tabbed form).
  2. Embed Full Form(with full designing header and footer).
  3. Embed Plain Form(without designing header and footer).


Depending upon your own needs and the way you wish to make a form appear in your website, you can choose the embed types. Before moving forward you need to remember one thing, overall there are no restrictions in embedding forms in your website but it is recommended to embed only a single sliding form per page so as to fasten the form processing and web page too.


 

formget-all-online-form-embed-types

 


Now let me tell you step by step procedure to embed the form.


 1. Embedding Sliding Form.

If you wish to present your form in a way that an eye-catching event occurs as soon as user open up your website then sliding form will fulfill your needs. To add this Web Form Generator to your website just follow up these few steps given below:

  • Login to your FormGet dashboard and click on Embed Form option of the form that you wish to embed.
  • You will then switch to form embed code page.

embed-form-button

  • There in that page you will get four options of form codes.
  • Click on the first option, Embed Sliding Form.
  • There you will find few options like Sliding Position, Slide Text, Background Color, Font Color , set them according to you.
  • Now copy the Embed Code.

 

embed-sliding-form

 

  • Open your website main page for eg: index.php, main.php etc in an editor. In that page paste this code in between head tags (<head>form code</head>) as shown below.

embed-sliding-form-code

 


Note : To make form appear in any other pages of your website , follow the same step as guided above or you can place the form script code in header or footer section which is common to all the pages, which will together make form to appear in all pages.


  Your will see the form output as

sliding-form-view

 

 


2. Embed Full Form with complete form design, header, and footer.

To embed a complete form in your site, click on Embed Full Form. You will get the iframe codes of your form as shown in the below image. Copy the code for Embed Form1 and then paste it in your website code where you feel to make it appear.

 

embed-form-iframe-code

 


Find the right place for the form in your website, so that it should look one of the Best Web Forms  from the user perspective. 


  •  Open up your website code in an editor. Then select a right div where you need place the form.

select-right-div-to-place-the-form

 

  •  Then paste the code and save the file.

 

paste-iframe-code

 

Now open your website , you will see the form output as

complete form view with designing

 


3. Embed Plain Form into your pages and sidebars.

In this form view form header and footer part is not present, it is a plain form that can be used to embed in sidebars, contact us pages of your website. It will require less space then complete form view.

To embed this form you have to follow up the same steps as depicted above for full form view. Here I am telling you same in a short way.

  • Copy the code from Embed Form > Embed Full Form section for Embed Form 2 Plain(without header and footer).

 

embed-plain-form

 

  • Open your website code in an editor and choose the right place for the form.
  • Paste the code there and save the file. You will see the form output as :

 

embed-plain-form-view


Pabbly Form Builder


Conclusion:

This tutorial shows that, with the help of FormGet, it is very easy to build forms( Web Forms ) and embed in non-WordPress sites too. If you have any doubts, you can contact us anytime.