WP Rocket - WordPress Caching Plugin

How to Create a Contact Form on Your Website without Using Any Plugin

How to Create a Contact Form on Your Website without Using Any Plugin

Adding a contact form on your website will increase your chances of connecting with the clients and readers. It will collect their contact details, inquiries, feedback and will send them to your inbox for taking further steps.

Being a WordPress user, you can easily create contact forms on websites. There are many contact form plugins available which will allow you to create forms with built-in easy to use tools. Add the necessary fields, customize them as per your requirements and insert them anywhere you want- in posts, pages and sidebar.

I was using a contact form plugin on the blog until recently and then I decided to reduce the number of plugins to speed up the site. I removed the contact form plugin and started implementing coding to display the form. It’s not a complex process as you think. The entire process will take just a few minutes and I will tell you it how in this post.

Creating a Contact Form

Google is an incomparable friend of ours in various means. It lets us create and edit office documents, forms, sheets, slides and save them in the cloud at free of cost. Thus the technology giant gives hand to the bloggers as well as startups in the beginning stage to survive and succeed in this highly competitive world. As you know, beginners won’t have money for spending on these and various other services.

Now I will tell you how to create a simple contact form with Google Forms.

Contact forms WordPress

Sign into your Google account and Open Google Forms in the browser.

We will get various kinds of forms from the template gallery including Contact information, appointment, event registration, job application, customer feedback, and others. Choose the first form to create and customize your contact form.

The template will open with Name, Email Address, Phone number and Comments fields. You can rename the labels, change field types if needed.

contact form WordPress

Click on the desired label to rename it. Type your new name to replace the highlighted label and hit enter to save. Click on the field type drop-down box on the right end to get other available options.

Google allows you to create a field with multiple choice, checkboxes, drop-down, date, time, and paragraph. The Name field will be set as a short answer type by default. It’s a required field and the users can’t leave it as blank. Drag the green ‘Required’ button to the right or left to change a field’s importance.

Tap the Copy icon on the bottom panel to create a duplicate of the selected field. You can also add a new field to the form by clicking the ‘+” icon on the slide panel.

The Email field comes with Response Validation feature. As a result of that, it will accept just email address as the answer. If users try to enter something else, they will get a warning and forced to type the correct details.

Tap the three dots icon on the bottom right end, to enable or disable the validation feature. You can set different kinds of conditions there to validate a website address, email, number, character length, expression and so on.

contact form WordPress

Google will automatically save all the changes you made. Scroll-up to the top and click the Responses tab. The option of ‘Accepting Responses’ is enabled which means Google will collect all responses left by the users and save them in a separate spreadsheet. Tap the three dots icon and select ‘Get email notifications for new responses’ to receive email alerts for your Contact form comments.

A number of tools are displayed on the top right side of your screen. They are add-ons, theme options, preview, and settings. Choose Add-ons and turn on form notifications for you and respondents (Not necessary because we already enabled email notifications in the previous step).

contact form WordPress

Click on the second icon to customize the header, theme color, background color, and font style for your contact form. Hit the gear icon to open settings and configure other parts of the form. Save changes and go to the next step.

Once you finished, tap the ‘Send’ button to get embed code of your contact form. Choose the last tab, adjust height and width of the form and take the iframe code to paste it into your WordPress website.

contact form WordPress

Now we are going to insert the selected Google form in WordPress.

Sign into your website and create a new page (Pages > Add New).

Name the page as ‘Contact Us’ or whatever you like. Change it to HTML mode. Paste your contact form code here. Click the ‘Publish’ button. That’s it.

Open your page in the front-end and see how it looks like. You can again adjust its size to match your theme layout and design. Just edit your page and change the figures in the size of the fields. How is your contact form now?

Are you looking for more plugin-free options? Read these posts;