WordPress Tutorial - Why we need contact form on our website and how to use it ?

in utopian-io •  7 years ago 

Hello steemit in this next tutorial I'm going to introduce you another important WordPress plugin to help you with your website development.

In almost all websites there is a contact us page for viewers and users. this page will help users to contact with the admins and improves trust among users and viewers of your website. It can be viewed as one of the most important pages of the site due to the high availability of this page.
There are a lot of plugins for making a contact us form, one of the most favorites and also old ones is contact form 7 which we are going to use in this tutorial.

Contact Form 7
Creating a Contact Form in WordPress is easy with this plugin. You can create a new form immediately after installation, or use an existing form. Finally, enter the code from the contact form 7 in your WordPress site / page to show you the form of the contact with us.

contact7.jpg

So let's begin ...
First you must install and activate the plugin. in your admin page go to Plugins->add new like the picture below :
dashf.jpg

After installation and activation you can find contact form 7 settings here :
here.jpg

From the Contact Forms section, you can view your own forms that you can see in this section after installing a ready form.
You can also create a new form from the Add New section.
From the last section, Integration, you can also use the extensions of this plugin.
To get started and create a contact form in WordPress, you can create a new form or edit the existing form made by the plugin that I will edit to create the form.

After bringing the editing form like the picture below :
formedit.jpg
From the top you can include a title for your form in the relevant field.
From the bottom of it, in the blue box, you can see the shortcode that you can put into your site's page / post after applying the custom settings.

After that, with 4 different tabs this plugin will be used to edit the form.

Form
formtab.jpg
In the simple text editor of this section, you will see a number of buttons which you can use for different actions.
For example, to create a checkbox, you need to click the checkboxes button, then you will see the pop-up page, which will see the desired tag settings in that section, after applying the settings for entering the desired part in the form. Click the Insert Tag option.

Mail
When the user logs in to our contact page and wants to send a message to manage the site, where do you think this message goes to?
main.jpg
In this tab you can enter an email to send all the messages of your users after they hit the submit button. If you have not receive an email in any way, please note the following:
mail.jpg
If you do not receive an email, you can add another email in the Email2 section of the Contact Form in WordPress.
In the the Email2 section, place your email in the places listed above (in both parts).

You can also see a few shortcodes in the tab that you can use in your email template, for example, with the [your-subject] shortcode, you can display the subject of the email the user has entered.

Messages
In this tab you will also see a long list of the text that the user is looking at when submitting the form (both before and after), which are English, but you can translate them well into any language you want.

messa.jpg

For example I used Farsi language in the above picture for the first field.

Additional Settings
addit.jpg
You can also enter additional code in this section (if you are a web master). Finally, click on the Save button below to save all changes.
After making all the changes you can display the contact form on WordPress in the output ...

View Output
First, copy the shortcode of the form Imentioned above and go to your new post / page.
pages.jpg
As in the above image, you will insert the code you have copied into the new page. After that, publish the page on the site and go to the page preview.
prew.jpg
As you can see, our contact form is shown to us in the image above. You can complete the form test and see if your email is sent!
If not sent, enter the second email.

Note: If you see emails in your email spam, do no spam it for once and for the next time you receive it in the inbox.

Good luck…

@hadif66

@hadif66

@hadif66



Posted on Utopian.io - Rewarding Open Source Contributors

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Your contribution cannot be approved because it is a duplicate. It is very similar to a contribution that was already accepted here.

You can contact us on Discord.
[utopian-moderator]

Ok, next time I will try something else, and I will search if someone else already posted that or not