• Home
  • Career After 12th
    Career in ‘Information Technology (IT)’ Course After 10+2

    ‘Information Technology (IT)’ Career Course After 10+2

    Career in ‘Animation & Multimedia Design’ Course After 10+2

    ‘Animation & Multimedia Design’ Career Course After 12th.

    Career in Computer Applications Course After 10+2

    ‘Computer Applications’ Career Course After 12th.

    Career in ‘Nursing’ Course After 10+2

    ‘Nursing’ Career Course After 12th.

    Career in ‘Bachelor of Unani Medicine & Surgery (BUMS)’ Course After 10+2

    Bachelor of Unani Medicine & Surgery (BUMS) Career Course After 12th

    Career in ‘Bachelor of Ayurvedic Medicine and Surgery (BAMS)’ Course After 10+2

    ‘Bachelor of Ayurvedic Medicine and Surgery (BAMS)’ Career Course After 12th.

  • Education
    • All
    • Career After 12th
    Career in ‘Information Technology (IT)’ Course After 10+2

    ‘Information Technology (IT)’ Career Course After 10+2

    Career in ‘Animation & Multimedia Design’ Course After 10+2

    ‘Animation & Multimedia Design’ Career Course After 12th.

    Career in Computer Applications Course After 10+2

    ‘Computer Applications’ Career Course After 12th.

    Career in ‘Nursing’ Course After 10+2

    ‘Nursing’ Career Course After 12th.

    Career in ‘Bachelor of Unani Medicine & Surgery (BUMS)’ Course After 10+2

    Bachelor of Unani Medicine & Surgery (BUMS) Career Course After 12th

    Career in ‘Bachelor of Ayurvedic Medicine and Surgery (BAMS)’ Course After 10+2

    ‘Bachelor of Ayurvedic Medicine and Surgery (BAMS)’ Career Course After 12th.

  • WordPress
    • All
    • WordPress Tutorial

    WordPress Widgets Explained (Step-by-Step)

    WordPress Page Builders Explained (Step-by-Step)

    WordPress Themes Explained (Step-by-Step)

    WordPress ‘Contact Forms’ Explained (Step-by-Step)

    WordPress Plugins Explained (Step-by-Step)

    WordPress Media and Galleries Explained (Step-by-Step)

  • Informations
    Top 5 SIPs Starting ₹.500 to Invest in 2023-24

    Top 5 SIPs Starting ₹.500 to Invest in 2023-24

    Top 5.. Best Mutual Fund Apps to Invest 2023

    Top 5.. Best Mutual Fund Apps to Invest 2023

    How to Select Right Mutual Funds in 7 Easy Steps

    How to Select Right Mutual Funds in 7 Easy Steps

    Invest like Warren Buffett in Top 8 Mutual Funds in 2023-24

    Invest in Top 8 Mutual Funds like Warren Buffett 2023-24

    Top 10 Tax Saving Mutual Funds in 2023-24

    Top 10 Tax Saving Mutual Funds in 2023-24

    Top 10 Low Risk Mutual Funds

    Top 10 Low Risk Mutual Funds for Investment in 2023-24

    Top 11 Tax Saving Investment for 2023-24

    Top 11 Tax Saving Investment for 2023-24.

No Result
View All Result
Education, Motivation and Information for You & All ...
  • Home
  • Career After 12th
    Career in ‘Information Technology (IT)’ Course After 10+2

    ‘Information Technology (IT)’ Career Course After 10+2

    Career in ‘Animation & Multimedia Design’ Course After 10+2

    ‘Animation & Multimedia Design’ Career Course After 12th.

    Career in Computer Applications Course After 10+2

    ‘Computer Applications’ Career Course After 12th.

    Career in ‘Nursing’ Course After 10+2

    ‘Nursing’ Career Course After 12th.

    Career in ‘Bachelor of Unani Medicine & Surgery (BUMS)’ Course After 10+2

    Bachelor of Unani Medicine & Surgery (BUMS) Career Course After 12th

    Career in ‘Bachelor of Ayurvedic Medicine and Surgery (BAMS)’ Course After 10+2

    ‘Bachelor of Ayurvedic Medicine and Surgery (BAMS)’ Career Course After 12th.

  • Education
    • All
    • Career After 12th
    Career in ‘Information Technology (IT)’ Course After 10+2

    ‘Information Technology (IT)’ Career Course After 10+2

    Career in ‘Animation & Multimedia Design’ Course After 10+2

    ‘Animation & Multimedia Design’ Career Course After 12th.

    Career in Computer Applications Course After 10+2

    ‘Computer Applications’ Career Course After 12th.

    Career in ‘Nursing’ Course After 10+2

    ‘Nursing’ Career Course After 12th.

    Career in ‘Bachelor of Unani Medicine & Surgery (BUMS)’ Course After 10+2

    Bachelor of Unani Medicine & Surgery (BUMS) Career Course After 12th

    Career in ‘Bachelor of Ayurvedic Medicine and Surgery (BAMS)’ Course After 10+2

    ‘Bachelor of Ayurvedic Medicine and Surgery (BAMS)’ Career Course After 12th.

  • WordPress
    • All
    • WordPress Tutorial

    WordPress Widgets Explained (Step-by-Step)

    WordPress Page Builders Explained (Step-by-Step)

    WordPress Themes Explained (Step-by-Step)

    WordPress ‘Contact Forms’ Explained (Step-by-Step)

    WordPress Plugins Explained (Step-by-Step)

    WordPress Media and Galleries Explained (Step-by-Step)

  • Informations
    Top 5 SIPs Starting ₹.500 to Invest in 2023-24

    Top 5 SIPs Starting ₹.500 to Invest in 2023-24

    Top 5.. Best Mutual Fund Apps to Invest 2023

    Top 5.. Best Mutual Fund Apps to Invest 2023

    How to Select Right Mutual Funds in 7 Easy Steps

    How to Select Right Mutual Funds in 7 Easy Steps

    Invest like Warren Buffett in Top 8 Mutual Funds in 2023-24

    Invest in Top 8 Mutual Funds like Warren Buffett 2023-24

    Top 10 Tax Saving Mutual Funds in 2023-24

    Top 10 Tax Saving Mutual Funds in 2023-24

    Top 10 Low Risk Mutual Funds

    Top 10 Low Risk Mutual Funds for Investment in 2023-24

    Top 11 Tax Saving Investment for 2023-24

    Top 11 Tax Saving Investment for 2023-24.

No Result
View All Result
Education, Motivation and Information for You & All ...
No Result
View All Result
Home WordPress

WordPress ‘Contact Forms’ Explained (Step-by-Step)

in WordPress, WordPress Tutorial
A A
Share on FacebookShare on Twitter

We are building this site for the city Wordville, and as a friendly community, it’s great to get feedback from the people who live here.

In this page, we are going to set up a contact form. This will provide a way for the citizens of Wordville to get in contact with their local government.

After going through this page, you will be able to:

  • Install a contact form plugin.
  • Create a custom contact form.
  • Publish and use a contact form.

with the following Featues ….

  1. Installing a ‘Contact Form Plugin’ in WordPress
  2. Publishing and Using the Contact Form in WordPress

1. Installing a ‘Contact Form Plugin’ in WordPress

For the contact form, we’re going to use a plugin called Ninja Forms. In the last chapter, we saw that Ninja Forms has very positive reviews, over 1 million users, and is frequently updated.

  • Go to “Plugins” and then “Add New”.
  • Search for “Ninja Forms”.
Installing a Contact Form Plugin in WordPress
204-Installing a Contact Form Plugin in WordPress
  • Click “Install Now” and then “Activate”.
  • Click “Ninja Forms” in the admin menu:
Installing a Contact Form Plugin in WordPress
205-Installing a Contact Form Plugin in WordPress
  • You see a “Contact Me” form that has already been created.
Installing a Contact Form Plugin in WordPress
206-Installing a Contact Form Plugin in WordPress
  • Click the Title, which in this case is “Contact Me”.
  • You see that our form will have a place for people to leave their name, email and message before submitting.
Installing a Contact Form Plugin in WordPress
207-Installing a Contact Form Plugin in WordPress

However, let’s add another field so we can collect more details from people who contact us.

  • Click the big, blue “+” button in the bottom right corner.
Installing a Contact Form Plugin in WordPress
208-Installing a Contact Form Plugin in WordPress
  • You will now see a range of different fields, including “Single Checkbox”, “Date”, “Address”, “City”, “Email”, “First Name”, and more.
Installing a Contact Form Plugin in WordPress
209-Installing a Contact Form Plugin in WordPress
  • Drag the “Phone” field from the right column and move it into the left column. Make sure to drag it inside the blue-outlined box.
Installing a Contact Form Plugin in WordPress
210-Installing a Contact Form Plugin in WordPress
  • You can place this new “Phone” field into the middle of the form:
Installing a Contact Form Plugin in WordPress
211-Installing a Contact Form Plugin in WordPress

If you click on the cog icon on the right of each field, it will open up a settings box for that specific field, as shown in the image below. Here you can control several key elements about this field, including the label that visitors will see and whether the field is required.

Installing a Contact Form Plugin in WordPress
212-Installing a Contact Form Plugin in WordPress
  • Now that we have added a phone field, navigate to the “Emails & Actions” tab.
  • Each of these rows is an action that takes place when the form is submitted. The first thing that it does is save the form submissions to the database.
Installing a Contact Form Plugin in WordPress
213-Installing a Contact Form Plugin in WordPress
  • Click the cog next to “Email Confirmation”. Here you can control the “Thank You” email that is sent to the user after they contact you.
Installing a Contact Form Plugin in WordPress
214-Installing a Contact Form Plugin in WordPress
  • “Submission Confirmation” is a pretty bland subject line so, change it to say “Wordville Contact Confirmation”.
  • In the body area, write “Thank you for getting in touch with Wordville.”
Installing a Contact Form Plugin in WordPress
215-Installing a Contact Form Plugin in WordPress
  • The third option, “Email Notification”, controls the email that is sent to you after the user sends a message.
  • The final option, “Sucess Message”, is the text users will see on the screen after contacting you. Let’s personalize this text also to make it more friendly. If you want to include details from the form submission, click the “Table” icon shown below:
Installing a Contact Form Plugin in WordPress
216-Installing a Contact Form Plugin in WordPress

The pop-up window will give you all the details you can use inside the form message. For example, to use the visitor’s name in a message, you can use {field:name}.

Installing a Contact Form Plugin in WordPress
217-Installing a Contact Form Plugin in WordPress
  • Here’s an example of how to use that personalization, by placing {field:name} into the body:
Installing a Contact Form Plugin in WordPress
218-Installing a Contact Form Plugin in WordPress
  • Now let’s go across to “Advanced” and then click on “Display Settings”.
  • Here you change the name of the form to “Contact Wordville”.
  • Click the “Done” button to save the new title.
  • Click the “Publish” button to complete your changes to the form.
Installing a Contact Form Plugin in WordPress
219-Installing a Contact Form Plugin in WordPress

2. Publishing and Using the Contact Form in WordPress

You now have a contact form, but it isn’t available to your visitors yet.

Remember back to the chapter on photo galleries when we briefly showed you the shortcode that was used to create the galleries.

Ninja Forms has shortcodes too, and those can be used to place forms on our site. Copy-and-paste the shortcode for this form.

  • Go to “Pages” and then “Add New”.
  • Place the shortcode into the page, as in the screen below.
  • Click “Publish” twice.
Publishing and Using the Contact Form in WordPress
220-Publishing and Using the Contact Form in WordPress

Next, let’s make it possible for people to access this new form:

  • Go to “Customize”, then “Menus”, and then “Main Menu”.
  • Click “Add Items”.
  • Add “Contact Us” to your menu links.
  • Click “Publish” to save the changes.
Publishing and Using the Contact Form in WordPress
221-Publishing and Using the Contact Form in WordPress
  • Visit the front of your site, and you’ll see your form in action.
  • Try using the form. You have required fields, so if you try to submit empty fields, those required fields will turn red. So at a minimum you must put in your name, email, and our message.
  • Fill out those fields and click “Submit”.
Publishing and Using the Contact Form in WordPress
222-Publishing and Using the Contact Form in WordPress
  • Once you click “Submit”, the form disappears and you see this success message:
Publishing and Using the Contact Form in WordPress
223-Publishing and Using the Contact Form in WordPress
  • To see the messages sent via your form, go to “Ninja Forms”, then “Submissions” and select your form.
Publishing and Using the Contact Form in WordPress
224-Publishing and Using the Contact Form in WordPress
  • You’ll now see a table with all the entries for this form:
Publishing and Using the Contact Form in WordPress
225-Publishing and Using the Contact Form in WordPress
Tags: WordPress Explained
ShareTweetPin
Previous Post

WordPress Plugins Explained (Step-by-Step)

Next Post

WordPress Themes Explained (Step-by-Step)

Related Posts

WordPress

WordPress Widgets Explained (Step-by-Step)

April 10, 2020
WordPress

WordPress Page Builders Explained (Step-by-Step)

April 10, 2020
WordPress

WordPress Themes Explained (Step-by-Step)

April 10, 2020
WordPress

WordPress Plugins Explained (Step-by-Step)

April 10, 2020
WordPress

WordPress Media and Galleries Explained (Step-by-Step)

April 10, 2020
WordPress

WordPress Pages Explained (Step-by-Step)

April 10, 2020
Next Post

WordPress Themes Explained (Step-by-Step)

WordPress Page Builders Explained (Step-by-Step)

WordPress Widgets Explained (Step-by-Step)

30 Homeopathic Remedies for Self-treatment at Home

You might also like

How to Lose Weight After 40 For Women

How to Lose Weight After 40 For Women without Side effects – Homeopathy Medicine

February 27, 2023
7 Tips - Student Guide to Managing Stress in College

7 Tips : Student’s Guide to Managing Stress in College

February 13, 2023
Top 10 Free Online Education Websites to Learn

Top 10.. Free Online Education Websites to help You Learn

February 11, 2023
Top 5 SIPs Starting ₹.500 to Invest in 2023-24

Top 5 SIPs Starting ₹.500 to Invest in 2023-24

February 13, 2023
Top 5.. Best Mutual Fund Apps to Invest 2023

Top 5.. Best Mutual Fund Apps to Invest 2023

February 8, 2023
How to Select Right Mutual Funds in 7 Easy Steps

How to Select Right Mutual Funds in 7 Easy Steps

February 8, 2023
Education, Motivation and Information for You & All …

BLOG on Information, Education & Motivation for You & All !

Tags

Career After 10+2 Finance Homeopathy Treatment information Mutual Fund Investment WordPress Explained YouTube

Stay Connected

  • Home
  • Career After 12th
  • Education
  • WordPress
  • Informations

© 2023 TuYouAll.Com - BLOG on Informations, Education & Motivation for You & All..

No Result
View All Result
  • Home
  • Career After 12th
  • Education
  • WordPress
  • Informations

© 2023 TuYouAll.Com - BLOG on Informations, Education & Motivation for You & All..