{"id":32526,"date":"2017-09-19T11:33:51","date_gmt":"2017-09-19T16:33:51","guid":{"rendered":"https:\/\/crazyeggblog.wpengine.com\/?p=32526"},"modified":"2025-01-10T01:39:37","modified_gmt":"2025-01-10T06:39:37","slug":"put-forms-on-your-website","status":"publish","type":"post","link":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/","title":{"rendered":"How To Easily Put A Form On Your Website"},"content":{"rendered":"\n

This guide will teach you how to use the best tools to quickly create forms and embed them on your website<\/strong>, whether it\u2019s a plain HTML \/ PHP website or a WordPress website.<\/p>\n\n\n\n

We\u2019ll begin by using some third-party companies, like Survey Monkey and Google Forms, to quickly create a form as fast as possible. We won\u2019t spend any time customizing colors or anything like that. This is a how to get it done QUICKLY guide. Then we\u2019ll show how to create your own form either in WordPress or in straight PHP code. The final section is about getting that form on your site.<\/p>\n\n\n\n

Creating a Form in Survey Monkey<\/h2>\n\n\n\n

First, go to surveymonkey.com and log in to your account, or sign up for a new account. If prompted, fill out the initial questions so that you get to the first screen in their system (see figure below). You can then either choose to start from scratch, or choose a template. Choose the first template as shown in the figure, so that we can show you how to embed it on your website as quickly as possible \ud83d\ude42<\/p>\n\n\n\n

\"Quick<\/figure>\n\n\n\n

Next, you\u2019ll be presented with a bunch of choices on how to distribute your form to the world. Let\u2019s choose, of course, \u201cembed on website\u201d (see figure below). Later you can try out the other distribution methods.<\/p>\n\n\n\n

\"Embed<\/figure>\n\n\n\n

Next, you\u2019ll want to choose \u201cEmbedded Survey\u201d (see figure below).<\/p>\n\n\n\n

\"Embedded<\/figure>\n\n\n\n

Finally, you\u2019ll see the javascript code that will activate your new survey form! Click once on the block of code and its text will highlight as depicted in the figure below. When it\u2019s highlighted, just hit Ctrl+C (or Cmd+C on Apple PCs) to copy it.<\/p>\n\n\n\n

We will be pasting this code into your website in the Embedding section below, and we\u2019ll cover doing it on both a plain HTML5 website and a WordPress website!<\/p>\n\n\n\n

\"Installation<\/figure>\n\n\n\n

Creating a Form in Google Forms<\/h2>\n\n\n\n

In order to access Google Forms, you\u2019ll first need a free Gmail account. If you don\u2019t have a Gmail account that is\u2026 unfortunate. But even if you don\u2019t want to have a Gmail address for email purposes, you can create a free account just for the sake of logging into all of Google\u2019s myriad of services. This is a prerequisite for this section.<\/i> I\u2019ll assume you are able to log into Google Drive with your Google Account username, which is most likely your Gmail address.<\/p>\n\n\n\n

First, go to this URL: https:\/\/drive.google.com<\/a>. Once you\u2019re logged into Google Drive, you\u2019ll see the following screen shown below. You\u2019ll want to click on \u201cNEW,\u201d then \u201cMore,\u201d then \u201cGoogle Forms\u201d (as depicted in red in the figure below.)<\/p>\n\n\n\n

\"New<\/figure>\n\n\n\n

And voila! You are instantly taken to a form, ready to customize, as shown in the next figure below. No setup process. No \u201cwizard.\u201d I really love this part of Google Forms. You instantly go straight to the matter at hand. And you simply click on the areas you want to edit and type right into the screen. Where it says \u201cUntitled Form,\u201d just click on it and give it a name.<\/p>\n\n\n\n

\"Untitled<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Next, click the \u201cSend\u201d button, shown in red in the next figure. Notice also the sample names I gave to all the form sections just by clicking on them and typing.<\/p>\n\n\n\n

\"Send\"<\/figure>\n\n\n\n

Finally, you will reach the \u201cSend form\u201d dialog box, where, as shown in the red highlights, you\u2019ll first want to click on the \u201c< >\u201d button to access the HTML embed code, then just click on the \u201cCOPY\u201d button at the lower right of this dialog. This will copy the embed code to your clipboard.<\/p>\n\n\n\n

\"copy\"<\/figure>\n\n\n\n

That\u2019s it! You\u2019ll paste it into your website in the Embedding section below, and we\u2019ll cover doing it on both a plain HTML5 website and a WordPress website!<\/p>\n\n\n\n

Creating a Form in MailChimp<\/h2>\n\n\n\n

First, go to MailChimp<\/a> and log in, or create a free account. MailChimp is totally focused on email collection forms only. That means we\u2019ll be creating a simple form that visitors to your website use to sign up to your list, after which you can send them all weekly or monthly newsletters, updates, etc. MailChimp is one of the best, cleanest, and easiest to use email list providers out there.<\/p>\n\n\n\n

Once you\u2019ve logged in, you\u2019ll want to click on \u201cLists\u201d on the upper left menu (see screen below). Then click on the \u201cCreate List\u201d button to the right. You\u2019ll be taken to a simple form you must fill out to create your mailing list. Fill this out and click \u201cNext\u201d to finish this step.<\/p>\n\n\n\n

\"Lists\"<\/figure>\n\n\n\n

Now you can see your new list on the screen. Scroll down and click on \u201cCreate a signup form\u201d to proceed (see screen below).<\/p>\n\n\n\n

\"Create<\/figure>\n\n\n\n

On the next screen, you\u2019ll want to click on the \u201cSelect\u201d button to the right of \u201cEmbedded Forms\u201d (see screenshot below).<\/p>\n\n\n\n

\"Select\"<\/figure>\n\n\n\n

Finally, you\u2019ll reach the form customization screen (see below)! For the purposes of this guide, let\u2019s just leave it as is. Scroll down and click on the code (highlighted in blue in the screenshot) and copy it to your clipboard.<\/p>\n\n\n\n

\"Copy<\/figure>\n\n\n\n

That\u2019s it! You\u2019ll paste this code into your website in the Embedding section below, and we\u2019ll cover doing it on both a plain HTML5 website and a WordPress website!<\/p>\n\n\n\n

Creating a Form in WordPress<\/h2>\n\n\n\n

Here\u2019s a quick tutorial on the quickest and easiest way to create a form in WordPress. This guide assumes you already have a WordPress site set up. We\u2019ll start at the dashboard, the screen you see upon logging into your WordPress admin area. First, on the left sidebar menu, click on \u201cplugins\u201d (as highlighted in red below).<\/p>\n\n\n\n

We recommend WPForms or Formidable Forms<\/a> for WordPress.<\/p>\n\n\n\n

\"Plugins\"<\/figure>\n\n\n\n

On the very next screen, make sure you click the blue \u201cAdd New\u201d button (as highlighted in red below) to go to the correct plugin installation screen.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Next, type \u201cWPForms\u201d in the box highlighted below.<\/p>\n\n\n\n

\"Search<\/figure>\n\n\n\n

<\/p>\n\n\n\n

The first box that appears will be for \u201cWPForms,\u201d one of the best WordPress form plugins available today. Click on the \u201cInstall Now\u201d button as highlighted, and it will change into a blue \u201cActivate\u201d button. Click on that as well :).<\/p>\n\n\n\n

\"Install<\/figure>\n\n\n\n

You\u2019ll immediately be taken to the WPForms intro screen, as shown below. Click the big \u201cCreate Your First Form\u201d button as shown.<\/p>\n\n\n\n

\"Create<\/figure>\n\n\n\n

Next, give the form a title. I chose \u201cSay Hello\u201d for mine. Then click \u201cCreate a simple contact form\u201d as highlighted.<\/p>\n\n\n\n

\"Create<\/figure>\n\n\n\n

You\u2019ll immediately be taken to a screen showing your form, including first name, last name, and email. Let\u2019s leave everything as is for now. You can go and edit things later. For now, click on the \u201cEmbed\u201d button as highlighted below, and the pop-up window displayed will appear. I\u2019ve highlighted the embed code in blue but you don\u2019t even have to copy this code (You\u2019ll see why in a few more steps). Just click the \u201cx\u201d to close the window, and then the big \u201cx\u201d at the top right to get out of the WPForms interface and get back to the normal WordPress admin area.<\/p>\n\n\n\n

\"Embeded\"<\/figure>\n\n\n\n

Now that you\u2019re back in normal WordPress mode, click on \u201cPages\u201d as shown below, in the left sidebar menu. This is where we\u2019ll temporarily activate the form, for now.<\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

Next, click \u201cAdd new\u201d at the top left (as shown below).<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Now you\u2019ll be in the page editing screen. You probably won\u2019t see the big purple \u201cDivi Editor\u201d buttons I have but ignore that. You\u2019ll see the highlighted button \u201cAdd Form.\u201d This button exists because you installed the WPForms plugin (WordPress plugins can add little menus and buttons all over the place, in fact.). Click on it.<\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

You\u2019ll see a pop-up with our \u201cSay Hello\u201d form showing as the first choice in the drop-down. Just click the blue \u201cAdd Form\u201d button at the lower right of this window to move on.<\/p>\n\n\n\n

\"Insert<\/figure>\n\n\n\n

Now you\u2019ll see the shortcode text that you didn\u2019t have to copy earlier automatically inserted into the editing area :). Now just click the blue \u201cPublish\u201d button as highlighted below.<\/p>\n\n\n\n

\"Publish\"<\/figure>\n\n\n\n

Once that\u2019s done, you\u2019ll see a box at the top of your screen that says \u201cPage published. View page\u201d. Click on that link (as shown) to view your brand new live form!<\/p>\n\n\n\n

\"View<\/figure>\n\n\n\n

Yep, a basic form. Looks good! If you fill it out and click submit, it would be emailed to the email specified as the WordPress administrator\u2019s email address. Let\u2019s go back and double check that you have this the way you want it. Close out of your live form and go back to the WordPress admin area.<\/p>\n\n\n\n

\"Test<\/figure>\n\n\n\n

Again, on the left sidebar menu, click \u201cUsers\u201d (as shown popped out in blue below). The first user is the admin account, and please ensure the email is correct. If not, or if you\u2019re not the admin, you can go back to the WPForms settings screen by clicking on \u201cWPForms\u201d in the left side menu (just three above \u201cUsers\u201d ;-).<\/p>\n\n\n\n

\"Users\"<\/figure>\n\n\n\n

That\u2019s it! Be sure to fill out your live form and make sure it goes to your specified email address correctly. You can add the form to any page or blog post by clicking that \u201cAdd Form\u201d button on any page or post editing screen.<\/p>\n\n\n\n

What\u2019s great about WPForms is that with the pro version, you can get plug-ins for MailChimp and lots of other marketing tools. I also find that its plugin interface is really sleek and nicely designed. Gravity Forms and Ninja Forms are also two other well-known, wonderful WordPress form plugins you can try out as well.<\/p>\n\n\n\n

Creating a Form in PHP<\/h2>\n\n\n\n

This section will outline the basic steps of creating a form in straight PHP<\/strong> for your website. This is pure HTML and PHP code \u2014 no WordPress, no embedding a third party form, just pure coding! This is by far the most complicated method, and the steps in this section might well generate many more questions for you than there are steps! Still, almost any good content creator, marketer, or basic website owner should have a basic familiarity with these tools and this method of editing a website.<\/p>\n\n\n\n

We\u2019re going to start with a basic Google search for \u201cphp contact form.\u201d Google automatically suggested I add \u201cwith validation\u201d to my search, and as a web developer I agreed (see image below) \u2014 validation basically means the little messages that pop-up when you leave a form field blank, for example, which says \u201cthis field cannot be blank\u201d.<\/p>\n\n\n\n

In the red circle shown below, I\u2019m showing the search result on GitHub<\/b>, which is a huge community where typically great developers share their code. The top engineers in the world who earn six-figure salaries showcase their work on GitHub. Furthermore, any project on GitHub can be downloaded without any annoying email subscription pop-ups. Let\u2019s check it out!<\/p>\n\n\n\n

\"Github<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Once you\u2019re on GitHub, look for the green \u201cClone or download\u201d button on the right side of the page. Click on it to reveal a small pop-up. Click on \u201cDownload ZIP\u201d (highlighted below). If you\u2019re a seasoned developer, you might choose to clone the project into your own git<\/a> repository (what GitHub is named after), but if you knew how to do that you probably wouldn\u2019t be reading this guide ;-).<\/p>\n\n\n\n

\"Download<\/figure>\n\n\n\n

The ZIP file has downloaded into your downloads folder by now, but before we go looking for it, I must stress that you should scroll down every time you\u2019re on GitHub and read (or at least skim) the documentation for the project! This is what those aforementioned seasoned engineers would call RTFM, which is short for \u201cRead The …. um\u2026 Fahrvergn\u00fcgen\u2026 Manual\u201d \ud83d\ude1b<\/p>\n\n\n\n

In the highlighted section below you see that you must edit the file called \u201cconfig.php\u201d and fill in what your from<\/i> and to<\/i> e-mail addresses will be so that the contact form can properly send out emails. If you just rushed straight to the ZIP file first, you would end up being lost and frustrated for hundreds of hours until you threw your computer over the cliff you happened to be sitting next to while working on this contact form.<\/p>\n\n\n\n

\"Email<\/figure>\n\n\n\n

In the next screen below, I\u2019m showing the ZIP file that was downloaded to my \u201cDownloads\u201d folder in OS X, which I use on my MacBook Pro. If I had a Windows machine, this could be in a different place, of course.<\/p>\n\n\n\n

Notice inside the outer folder there are a bunch of files and a folder named \u201ccontact-form\u201d at the top of the list. Generally, this outer listing of files are very techy developer stuff and you don\u2019t need to worry about it. The file named \u201cREADME.md\u201d, for example, is actually the exact same information in the instructions on any Github project that I had you read in the previous step. So the basic pattern is that you\u2019ll take the project folder (in this case named \u201ccontact-form\u201d) and just drag that into your FTP program to upload it to your website.<\/p>\n\n\n\n

\"Downloads<\/figure>\n\n\n\n

Again, this step can vary wildly between Mac, Windows, Linux, and whatever FTP client you use. I\u2019m using Mac OS X with the latest version of Transmit<\/a> (version 5), possibly the best FTP client ever made! I\u2019ve already set up a connection to my website in Transmit\u2019s settings (you\u2019ll need to know how to do this with your FTP client). But once you\u2019re in, you\u2019ll see something like the screen below, which is a listing of all my website files. Notice in the red circle below I just dragged the \u201ccontact-form\u201d folder into my FTP window and it\u2019s been uploaded to my website. (I also renamed it to \u201c_contact-form\u201d with an underscore at the beginning of the filename so that it goes first in the list alphabetically.)<\/p>\n\n\n\n

Notice also that I\u2019m inside the \u201ccontact-form\u201d folder, which contains the \u201cconfig\u201d folder, and within that there is our special \u201cconfig.php\u201d file. This is the one you know you have to edit if you had read those GitHub instructions above! One really cool thing about Transmit is that I am able to configure it to open any text files I double-click on directly into my text editor, Sublime Text 3<\/a> (which is one of the best code editors on the planet)! This lets me skip the whole process of downloading the file, opening the downloaded file, and then re-uploading it after editing it. Instead, it just opens right in Sublime Text (with color-coded text to boot), and when I hit Cmd+S (to save the file), it automatically re-uploads to my website!<\/i><\/p>\n\n\n\n

\"Contact<\/figure>\n\n\n\n

Below you\u2019ll see how my text editor looks. I highlighted the part we need to edit in yellow. Notice I filled in the relevant sections with my email addresses. I put my personal email address in the to<\/i> section, and the from<\/i> section is from a \u201cwebform\u201d address which is fine; this is just a simple contact-form test. A real setup might have used \u201cinfo@\u201d or \u201cno-reply@.\u201d<\/p>\n\n\n\n

\"Sublime<\/figure>\n\n\n\n

OK! After editing that file, our contact form is finished! We can go right to the live URL: https:\/\/plu.sx\/_contact-form\/index.php<\/a>. Notice the form looks pretty nice, and the form validation works if you try to hit send without filling everything out.<\/p>\n\n\n\n

\"Please<\/figure>\n\n\n\n

Once you fill out the form correctly, you\u2019ll get to the final screen after hitting send. The form message displays \u201cEmail sent successfully.\u201d Great!<\/p>\n\n\n\n

But beware!! Just because the contact form thinks the message went out to you doesn\u2019t mean you\u2019ll get an email. Again, this step can vary wildly as there are thousands of server setups, web hosting companies, and PHP configurations that can cause any number of issues. If you actually don\u2019t get an email, you\u2019ll have to troubleshoot your server (or call your hosting company) and ask them what went wrong. Taking a look at the \u201cSimpleMail.class.php\u201d file hiding within the \u201ccontact-form\u201d folder I can see it\u2019s using the PHP \u201csendmail()\u201d function to handle e-mail delivery. Luckily for me, this worked fine without any further headaches and the contact-form was working fine at this point.<\/p>\n\n\n\n

\"Simple<\/figure>\n\n\n\n

That\u2019s it! As you can see, the PHP version of this guide is very involved, wrought with potential mishaps, very hard to troubleshoot, and fraught with terror! Now you can viscerally see why companies such as MailChimp are so successful. They handle all the server setup and code on their end and just give you a simple embed code. The amount of complexity is reduced by up to 99%, and the ease-of-use increased conversely.<\/p>\n\n\n\n

But if you\u2019re set on using a PHP solution, then you should be adept at completing all these steps, and you do, in the end, have ultimate control over how to customize the form and how it works. There are virtually no limits to what you can program with HTML, PHP, and Javascript. For instance, you could make your contact form email you, save the visitor\u2019s name to a separate database, and even connect to MailChimp or any of the other services we went over, all from one single click of the \u201cSend\u201d button.<\/p>\n\n\n\n

Embedding a Form Into Your Website<\/h2>\n\n\n\n

In this section we\u2019ll cover embedding a form on your website, both in WordPress and in straight HTML.<\/p>\n\n\n\n

First, choose which embed code (that we generated in one of the sections above) you\u2019ll want to use:<\/p>\n\n\n\n

Here is our MailChimp embed code<\/b><\/p>\n\n\n\n

\"Mailchimp<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"Mailchimp<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Here is our SurveyMonkey embed code<\/b><\/p>\n\n\n\n

\"Survey<\/figure>\n\n\n\n

Here is our Google Forms embed code<\/b><\/p>\n\n\n\n

\"Google<\/figure>\n\n\n\n

Interestingly enough, each of these services uses a different embed approach. MailChimp just gives you a plain block of HTML. SurveyMonkey gives you a block of javascript which creates the form HTML for you. And Google forms gives you an iFrame, which is like a little window directly to their website. Each of these methods requires that you either paste the code somewhere in between the <body><\/body><\/b> tags on one of your web pages for a plain HTML page or in the appropriate area of WordPress if you\u2019re using that. Let\u2019s review each:<\/p>\n\n\n\n

Embedding Your Form in a Plain HTML Website<\/b><\/p>\n\n\n\n

You\u2019ll need to have an FTP client to access the files on your website and paste the code within. What you\u2019ll end up with is a page similar to this demo page I\u2019ve prepared on my website<\/a>.<\/p>\n\n\n\n

Here you\u2019ll see the contact forms we created above, and if you choose Cmd+Opt+U in Google Chrome you\u2019ll open up the \u201cview source\u201d page which will display the HTML code for this page. If you read through this code you\u2019ll see how the various embed codes above were simply pasted below the page\u2019s top <body><\/b> tag. I added a small bit of CSS to center each form in a nice box and pop them out from a gray background so it\u2019s easier for you to see them.<\/p>\n\n\n\n

Embedding Your Form in WordPress<\/b><\/p>\n\n\n\n

First, you\u2019ll have to be logged in to your WordPress dashboard. Again, this assumes you have WordPress set up already. So in that case, log into your WordPress admin area and we\u2019ll start by clicking the \u201cPlugins\u201d menu circled in red below. Then click the \u201cAdd New\u201d button on the top left of the Plugins page shown below.<\/p>\n\n\n\n

Note: We\u2019re going to find and install the XYZ Snippets plugin which helps preserve HTML perfectly. If you try to paste HTML or Javascript directly into a WordPress post or page without any help from a plugin like this, you may get wonky effects because WordPress likes to add a bunch of formatting stuff automatically.<\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

Now type \u201cinsert html snippet\u201d into the plugin search field and you\u2019ll see the screen below. Click \u201cinstall now\u201d (circled in red below), then immediately after click \u201cActivate.\u201d<\/p>\n\n\n\n

\"Install<\/figure>\n\n\n\n

Once you\u2019ve done this, you\u2019ll have the \u201cXYZ Snippets\u201d menu in the left side-menu in WordPress. (See circled below.) Click on that to get to the plugin page, then click the blue \u201cAdd New HTML Snippet\u201d button at the top of the page.<\/p>\n\n\n\n

\"xyz<\/figure>\n\n\n\n

Now in this next screen below, let\u2019s just call the snippet \u201cGoogle Forms\u201d and let\u2019s just paste the Google Forms HTML code we showed above into the form. Finally, just click \u201cCreate.\u201d<\/p>\n\n\n\n

\"Google<\/figure>\n\n\n\n

Now you\u2019ll see the screen below, with the HTML snippet shortcode highlighted in blue below. You could select it here and copy it, but you won\u2019t have to. Let\u2019s just move on.<\/p>\n\n\n\n

\"Snippet<\/figure>\n\n\n\n

Click on the \u201cPages\u201d left side menu option as shown below, then either click \u201cAdd New\u201d at the top of the screen or edit an existing page. For now, I\u2019ll edit the \u201ctest form\u201d page that we created in the section above.<\/p>\n\n\n\n

\"Wordpress<\/figure>\n\n\n\n

Now, check for the area I circled in red below. Again, WordPress plugins can create new buttons throughout the system. Remember, when we added the WPForms plugin above, we got the new \u201cAdd Form\u201d button, and now we have this new \u201cInsert HTML snippet\u201d button. You\u2019ll see the one snippet we created, \u201cGoogle Form\u201d showing in the menu. Click on that and the shortcode you didn\u2019t need to copy earlier automatically gets added to the editing window below! I decided to move the Google Form shortcode to the top of the window for this demo (above the WPForms shortcode we created earlier on). Finally, click the blue \u201cUpdate\u201d button, also circled in red below.<\/p>\n\n\n\n

\"Google<\/figure>\n\n\n\n

Finally, click \u201cView page\u201d circled in red below!<\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

This will take you to your live WordPress page with, voila! Your Google Form embedded nicely within. Here\u2019s the live URL: https:\/\/carlosaugusto.net\/test-form<\/a>.<\/p>\n\n\n\n

\"Carlos<\/figure>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

This guide will teach you how to use the best tools to quickly create forms and embed them on your website, whether it\u2019s a plain…<\/p>\n","protected":false},"author":192,"featured_media":32592,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_lmt_disableupdate":"","_lmt_disable":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[876],"tags":[],"class_list":["post-32526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"yoast_head":"\nHow To Easily Put A Form On Your Website<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Easily Put A Form On Your Website\" \/>\n<meta property=\"og:description\" content=\"This guide will teach you how to use the best tools to quickly create forms and embed them on your website, whether it\u2019s a plain...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"The Daily Egg\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crazyegganalytics\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-19T16:33:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-10T06:39:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/19114623\/forms.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlos Augusto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/solrac149\" \/>\n<meta name=\"twitter:site\" content=\"@CrazyEgg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlos Augusto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/\"},\"author\":{\"name\":\"Carlos Augusto\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/036ffae3ade5f4cf83048c0aad6012af\"},\"headline\":\"How To Easily Put A Form On Your Website\",\"datePublished\":\"2017-09-19T16:33:51+00:00\",\"dateModified\":\"2025-01-10T06:39:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/\"},\"wordCount\":3671,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/19114623\\\/forms.png\",\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/\",\"name\":\"How To Easily Put A Form On Your Website\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/19114623\\\/forms.png\",\"datePublished\":\"2017-09-19T16:33:51+00:00\",\"dateModified\":\"2025-01-10T06:39:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/19114623\\\/forms.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/19114623\\\/forms.png\",\"width\":1200,\"height\":630,\"caption\":\"forms\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/put-forms-on-your-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/category\\\/website\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Easily Put A Form On Your Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"name\":\"The Daily Egg\",\"description\":\"Conversion Rate Optimization Made Easy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\",\"name\":\"Crazy Egg\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"width\":191,\"height\":100,\"caption\":\"Crazy Egg\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/crazyegganalytics\\\/\",\"https:\\\/\\\/x.com\\\/CrazyEgg\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/crazy-egg\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCJNe_xmPi07YezxaqfoRVqg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/036ffae3ade5f4cf83048c0aad6012af\",\"name\":\"Carlos Augusto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ae033d92382c9f63e5177ff9e5cec5a19168167a478647c79aec7c88a662345?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ae033d92382c9f63e5177ff9e5cec5a19168167a478647c79aec7c88a662345?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ae033d92382c9f63e5177ff9e5cec5a19168167a478647c79aec7c88a662345?s=96&d=mm&r=g\",\"caption\":\"Carlos Augusto\"},\"description\":\"I\u2019m Carlos Augusto, a pioneer developer who spent 15 years sculpting Web 2.0 with companies like MySpace, Napster, and DIRECTV. So how can I help you? Well today I\u2019m a digital marketing, SEO, copywriting, and cryptocurrency expert. After a free 30 minute consultation I guarantee we will discover immediately actionable ways to improve your business or your money back. Serious inquiries only please.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/solrac149\"],\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/author\\\/solrac\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Easily Put A Form On Your Website","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/","og_locale":"en_US","og_type":"article","og_title":"How To Easily Put A Form On Your Website","og_description":"This guide will teach you how to use the best tools to quickly create forms and embed them on your website, whether it\u2019s a plain...","og_url":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/","og_site_name":"The Daily Egg","article_publisher":"https:\/\/www.facebook.com\/crazyegganalytics\/","article_published_time":"2017-09-19T16:33:51+00:00","article_modified_time":"2025-01-10T06:39:37+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/19114623\/forms.png","type":"image\/png"}],"author":"Carlos Augusto","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/solrac149","twitter_site":"@CrazyEgg","twitter_misc":{"Written by":"Carlos Augusto","Est. reading time":"27 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/#article","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/"},"author":{"name":"Carlos Augusto","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/036ffae3ade5f4cf83048c0aad6012af"},"headline":"How To Easily Put A Form On Your Website","datePublished":"2017-09-19T16:33:51+00:00","dateModified":"2025-01-10T06:39:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/"},"wordCount":3671,"commentCount":0,"publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/19114623\/forms.png","articleSection":["Website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/","url":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/","name":"How To Easily Put A Form On Your Website","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/#primaryimage"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/19114623\/forms.png","datePublished":"2017-09-19T16:33:51+00:00","dateModified":"2025-01-10T06:39:37+00:00","breadcrumb":{"@id":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/#primaryimage","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/19114623\/forms.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/19114623\/forms.png","width":1200,"height":630,"caption":"forms"},{"@type":"BreadcrumbList","@id":"https:\/\/www.crazyegg.com\/blog\/put-forms-on-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.crazyegg.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Website","item":"https:\/\/www.crazyegg.com\/blog\/category\/website\/"},{"@type":"ListItem","position":3,"name":"How To Easily Put A Form On Your Website"}]},{"@type":"WebSite","@id":"https:\/\/www.crazyegg.com\/blog\/#website","url":"https:\/\/www.crazyegg.com\/blog\/","name":"The Daily Egg","description":"Conversion Rate Optimization Made Easy","publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.crazyegg.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.crazyegg.com\/blog\/#organization","name":"Crazy Egg","url":"https:\/\/www.crazyegg.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","width":191,"height":100,"caption":"Crazy Egg"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/crazyegganalytics\/","https:\/\/x.com\/CrazyEgg","https:\/\/www.linkedin.com\/company\/crazy-egg\/","https:\/\/www.youtube.com\/channel\/UCJNe_xmPi07YezxaqfoRVqg"]},{"@type":"Person","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/036ffae3ade5f4cf83048c0aad6012af","name":"Carlos Augusto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ae033d92382c9f63e5177ff9e5cec5a19168167a478647c79aec7c88a662345?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ae033d92382c9f63e5177ff9e5cec5a19168167a478647c79aec7c88a662345?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ae033d92382c9f63e5177ff9e5cec5a19168167a478647c79aec7c88a662345?s=96&d=mm&r=g","caption":"Carlos Augusto"},"description":"I\u2019m Carlos Augusto, a pioneer developer who spent 15 years sculpting Web 2.0 with companies like MySpace, Napster, and DIRECTV. So how can I help you? Well today I\u2019m a digital marketing, SEO, copywriting, and cryptocurrency expert. After a free 30 minute consultation I guarantee we will discover immediately actionable ways to improve your business or your money back. Serious inquiries only please.","sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/solrac149"],"url":"https:\/\/www.crazyegg.com\/blog\/author\/solrac\/"}]}},"modified_by":"Lars Lofgren","_links":{"self":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/32526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/users\/192"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/comments?post=32526"}],"version-history":[{"count":0,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/32526\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media\/32592"}],"wp:attachment":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media?parent=32526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/categories?post=32526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/tags?post=32526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}