A website is never complete without a contact form, in which the visitor types in his contact details and query and it is sent to the webste owner by email, now in this Article we will create a contact form using a wordpress plugin, when i was looking for a contact form in wordpress, i am looking for 1) drag and drop contact form 2) capability to place contact form in sidebar 3) auto database of submitted contact data
So the main issue of creating a contact form is about finding the right plugin in case of wordpress its always about if you are able to find the right plugin to make the functionality otherwise, you keep on bouncing from plugin to plugin and unable to find what you are looking for. let me give it to you 🙂 the plugin that meets the above the three requirements and i have used it over lot of websites and working without any issues is FORM MAKER, now lets install this plugin if you don’t know how to install a plugin you can refer to the following article how to install a plugin in wordpress . You just need to search for the form maker, let me show you the screenshot of the exact plugin. Once the plugin is installed and activated you will see complete new drop down menu in the vertical left menu that says Form maker like in the below screenshot, this plugin is the best contact form wordpress plugin.now click on the manager and you see the following screen
now in the above screen you can see lot of prebuilt contact forms you can directly use, lets edit the contact form which is first in the list and click on the orange square icon on right side of the row that contains the contact form and you will see the following screen
In the above contact form wordpress plugin screen you can see, how your contact from will look like, you can see there is option for you to change the title of the form, which is currently set as contact, i’ll change it to Query from, and on the right hand side you can see there are buttons like save as copy, save, apply, cancel, form options, advanced layout and last one says Add a New Field what i want to do with the form is add a captcha so that to protect against spam and i also want to add a field for Phone, in order to do that i will click on Add a new Field and it will show the following screen.
now click on the text input button the left hand side and you will see the following screenNow in this screen we will change some things like we will change the label of the field from text: to Phone: and we will not change the field type to phone because we want that user should be able to use symbols to input their phone numbers such as +1-999-999-9999, so let the field type be simple text, we will make the field mandatory by checking the checkbox next to required and then we will click on save, as you change the config data on left you will see that it will reflect on how the form field will look like on the right, here is a screenshotnow when you click on save you will be returned to the original form to which we are adding this field, this field will be visible at the end of the current form and we have to re-position it once we are done adding all the fields, here is the screenshot of the wordpress contact from after saveNow again click on add new field and this time click on the captcha and then click on save after saving you will see the following screennow we want to arrange the fields in a sequence and other things that i want to do with this form is 1) place the fields at proper distance from the label like in name and email, 2) remove the subject field to keep the form simple 3) position the Message label right over the message box . I want to make the sequence like follows 1) name 2) Phone 3) email 4) Message 5) capcha 6) buttons. Lets start by sequencing the fields to do this just take your mouse pointer over the field that you want to drag to the right position in sequence and drag it to up or down holding the left mouse button and releasing it only when it is at the right place, like on the following screenshot
After i have arranged all the fields in the right order it will look like the following screenshot and now i would like to remove the field called as subject, in order to do that click on the option that says enable Drag & Drop and the contact form will look like the followingNow in order to remove the subject field we just need to click on the red cross icon just above the box and the subject field is gone, now so that our form looks consistent we will arrange the gap between the label phone and the field to match the other field to know the exact measurements in pixels what we will do is edit some other field and see, what are the parameters that are present in its case so lets edit field called email, in order to edit it we will just need to click on the pencil icon above the field in blue and we will see the following screen similar to the screen that we used to add a field and as you can see i have marked the parameters we need to take note of.Now as you can see i have highlighted three parameters, two are for noting down, third is to make the email field mandatory so that the form doesn’t get submitted if the user doesn’t fill his email. Two parameters to note down are 1) field size 2) field label size, Save the form after making the changes. Now lets edit the phone label and put in the values there to make the form look good. Here is the screen shot of the Phone field.now you can see in this case the size of the field label is set at 100 make it 70 and save the form, now lets edit the message field label and rename the label to Query instead of message, and place it right above the query boxNow in the above form, change the Field label to Query, and then change the field label position from left to top. And the Third thing that we need to do is increase the field size from 200 x 100 to 270 x 100, as since the Query will appear on top if the field the total effect will bring it to the left leaving empty space on the right. So we are increasing the width of the field to incorporate the width of the label. Now save and the form will look like below.Also change the Title of form from Contact to Query Form. Last thing that we need to add to this form is the email id to which the email will be sent when somebody submits the form, for that click on the form options on the right top and on the screen that appears select the email options.Now fill the email to send submissions to with the email id that you want to receive the email and then click on the plus button, you can add as many emails as you want and then click on save. You will be returned to the form edit screen as was being displayed earlier. Now click to save the form , by clicking on the button the top right hand side. Now go to the Pages where you would like to place the form that you just created. In our case we want to place the form on our contact page, so we will edit the contact page or add a new page by the name of contact and here is the screenshot of that, you can see in the screenshot below as highlighted by me is an icon for placing the form.Now click on the form icon you will see the following screen below,Select the item Query Form and click on the insert button to insert the form into the editor, ad you will see the following screen
As you can see in the above form, there is a text code that got inserted into the text area, this text code represents the form, now lets add the other address information to this page. now lets see how this will look to your visitors, to do without actually publishing, click on preview and a new browser tab will open and you will see the following screenIn the Theme i am using the page is showing on the left hand side and the sidebar is placed on the right hand side. You can also place this form on the sidebar, sidebar is the vertical space on the right or left that is repeated on every page, so anything that is placed on the sidebar will appear on every page. lets see how can we place this in the sidebar in order for us to place this in the sidebar , the plugin should have a widget version. To know that go to appearance on the left vertical menu in the admin and go to widgets and you will see the similar screen if your theme supports sidebars. as i have marked the form maker widget, you just need to drag the form maker widget and leave it in the sidebar box as you can see, in my theme as you can see, it supports three widget areas: 1) Sidebar 2) content bottom 1 3) content Bottom 2
after you have dropped the widget into the sidebar widget area, you will see the following screenNow the form maker widget options will open, you can give a title here that you want to appear in the sidebar, i have given the title Query Form, Now from the select a form dropdown, select the query form that we just created and then click on the save button. After this go to the contact page edit screen and view the preview once again or open the any page that has sidebar enabled on it. In my case i am again looking at the contact page preview and see how the sidebar display has changed.As you can see the sidebar is now showing contact form created by us and it is also showing the title as we gave it: query form