WordPress bloggers often try dozens of contact form plugins and still struggle to find a robust and reliable solution that works without any fail. Another common complaint is that the premium version of these plugins offers what they look for in a free version. How about a reliable and flexible solution that allows you to integrate a custom contact form on a WordPress site – without using any plugin? It's not the just the custom contact form, but you can also get a custom thank-you page with automatic notifications right in your email inbox without spending a dime. We're going to use Google drive form which is not only free but also places Create WordPress Pages
We'll start by creating both the essential pages required for our custom contact form. Let's go!Step 1: Create a Thank You page with the relevant text copy you want to display after a visitor has submitted the form. You can also add graphics on this page. It's entirely up to you what exactly you want to display on this page.
Once you've created a Thank You page, you can publish it instantly. Copy the URL of this page in a text editor. We'll need this URL later on while configuring the contact form.
Step 2: Create a Contact page, but do not publish it. Switch to post editor's Text mode as shown below.
You may notice that I've written a line of text which will be displayed just before the contact form. Obviously, you have to change it with your own copy you may want to display right before the contact form. You are free to customize this block of text as per your requirements.
Create a Google Drive Form
Once both the pages are created, we move on to the next step of creating a new Google Drive form which will be used to power our custom contact form.Step 3: Once within Google Drive, go to 'NEW → More → Google Forms' option to create a blank form. Add all the necessary fields present in a typical contact form. For example, Name, Email, Website, and Message. Except website information, make all other fields mandatory.
Do provide an appropriate title to the contact form. Once finished, your form editing screen may look something like this.
You may create your own fields as per your needs for the contact form. There's no restriction on the number and type of fields you may want to display within your contact form.
Setup Automatic Notifications
No contact form is complete unless you get submission notifications almost instantly. That's what we're going to set up in the next steps.Step 4: Go back to your Google Drive dashboard and create a blank spreadsheet by choosing the 'NEW → Google Sheets' option. Give this new spreadsheet a proper name of your choice.
Step 5: Go back to the form creation interface where you already have the completed contact form. Click the 'Responses → Choose response destination...' option as shown below.
Clicking this option will open a dialogue box asking to either create a new spreadsheet or select an existing spreadsheet. Choose the second option which in turn will open another box to select the spreadsheet you've already created in step 4. This will link the spreadsheet with your form facilitating the automated saving of information submitted via the form.
Step 6: Now go back to the newly created spreadsheet and choose the 'Tools → Notification rules...' options. Thereafter, choose 'A user submits a form' and 'Email - right away' options as shown below.
This setting ensures that whenever a user will submit information via the contact form on your site, all the details will be saved in the spreadsheet and you'll get a notification about the same right in your Gmail inbox. This completes the automated notification setting.
Embed Default Form Code Into Contact Page
It's time to grab the form code which will be pasted into the editor you're using to edit the contact page on your WordPress dashboard. Here's how to do it.Step 7: Go back to the form editing interface and click 'View live form' option. This will open the contact form in a new browser tab. Switch to that tab and right-click anywhere on the page. Choose 'View Source' or 'View Page Source' option from the context menu.
Step 8: Clicking this option will open the source code of the web page. Now comes the most important step of copying the form code from within this source code.
First, find the
<form action="https://.... opening form tag. Then find the closing </form> tag. You have to copy the entire code starting from the opening form tag up to the closing form tag. Once copied, paste it right below the text you've written in the post editor as shown below.
Make sure, the editor is in text mode else the code may not work, as expected.
Configure 'Thank You' Page
It's time to configure the setting for the Thank You page such that upon successful form submission, a visitor is directed to it to show a relevant message. Let's do it.Step 9: Start with pasting the following code, just above the opening form tag.
<script type="text/javascript">
var submitted=false;
</script><iframe
id="hidden_iframe"
name="hidden_iframe"
onload="if(submitted){window.location='Thank You Page URL Here';}"
style="display: none;"></iframe>
After pasting this snippet, the code will look something like this:
Note in the image where you have to paste the Thank You page URL you've already saved in a text editor in step 1.
Step 10: In the opening form tag, you will find two attributes viz.,
target="_self" and onsubmit="" which needs to be changed.Replace both the default form attribute values with the new custom values. Replace them with
target="hidden_iframe" and onsubmit="submitted=true;" values which will ensure proper redirection to the Thank You page.Customize Form's Appearance
And last but not the least, we'll work on tweaking and in improving the default look and feel of the form. This step will involve some custom CSS code.Step 11: Paste the following CSS code right above the code you've pasted in step 9.
<style type='text/css'>
.required-message, .ss-password-warning { display: none; }
#navigation-table, #navigation-buttons { border: none; }
.ss-required-asterisk { width: 10px; display: block; margin: -65px 0px 0px 65px; }
.ss-paragraph-text span { margin-left: 85px; }
</style>
The final customized contact form will look like this when using the Twenty Fifteen theme.
If you're using a different theme, feel free to play with the custom CSS code to change the form's appearance as per your requirements.
Wrapping It Up
Once the custom Google Drive form is working on the contact page, make sure you do some dummy submissions to ensure it is working correctly. Do not accidentally delete the form and spreadsheet files from your Google Drive account.Hopefully, this method will help you in integrating a free and custom contact form on a WordPress site. You can use the same methodology on almost any content management system.