amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /** * Jetpack related posts */ /** * The Gutenberg block */ .jp-related-posts-i2 { margin-top: 1.5rem; } .jp-related-posts-i2__list { --hgap: 1rem; display: flex; flex-wrap: wrap; column-gap: var(--hgap); row-gap: 2rem; margin: 0; padding: 0; list-style-type: none; } .jp-related-posts-i2__post { display: flex; flex-direction: column; /* Default: 2 items by row */ flex-basis: calc( ( 100% - var(--hgap) ) / 2 ); } /* Quantity qeuries: see https://alistapart.com/article/quantity-queries-for-css/ */ .jp-related-posts-i2__post:nth-last-child(n+3):first-child, .jp-related-posts-i2__post:nth-last-child(n+3):first-child ~ * { /* From 3 total items on, 3 items by row */ flex-basis: calc( ( 100% - var(--hgap) * 2 ) / 3 ); } .jp-related-posts-i2__post:nth-last-child(4):first-child, .jp-related-posts-i2__post:nth-last-child(4):first-child ~ * { /* Exception for 4 total items: 2 items by row */ flex-basis: calc( ( 100% - var(--hgap) ) / 2 ); } .jp-related-posts-i2__post-link { display: flex; flex-direction: column; row-gap: 0.5rem; width: 100%; margin-bottom: 1rem; line-height: 1.2; } .jp-related-posts-i2__post-link:focus-visible { outline-offset: 2px; } .jp-related-posts-i2__post-img { order: -1; max-width: 100%; } .jp-related-posts-i2__post-defs { margin: 0; list-style-type: unset; } /* Hide, except from screen readers */ .jp-related-posts-i2__post-defs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .jp-related-posts-i2__post-defs dd { margin: 0; } /* List view */ .jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__list { display: block; } .jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__post { margin-bottom: 2rem; } /* Breakpoints */ @media only screen and (max-width: 640px) { .jp-related-posts-i2__list { display: block; } .jp-related-posts-i2__post { margin-bottom: 2rem; } } /* Container */ #jp-relatedposts { display: none; padding-top: 1em; margin: 1em 0; position: relative; clear: both; } .jp-relatedposts:after { content: ''; display: block; clear: both; } /* Headline above related posts section, labeled "Related" */ #jp-relatedposts h3.jp-relatedposts-headline { margin: 0 0 1em 0; display: inline-block; float: left; font-size: 9pt; font-weight: bold; font-family: inherit; } #jp-relatedposts h3.jp-relatedposts-headline em:before { content: ""; display: block; width: 100%; min-width: 30px; border-top: 1px solid #dcdcde; border-top: 1px solid rgba(0,0,0,.2); margin-bottom: 1em; } #jp-relatedposts h3.jp-relatedposts-headline em { font-style: normal; font-weight: bold; } /* Related posts items (wrapping items) */ #jp-relatedposts .jp-relatedposts-items { clear: left; } #jp-relatedposts .jp-relatedposts-items-visual { margin-right: -20px; } /* Related posts item */ #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { float: left; width: 33%; margin: 0 0 1em; /* Needs to be same as the main outer wrapper for Related Posts */ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post { padding-right: 20px; filter: alpha(opacity=80); -moz-opacity: .8; opacity: .8; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) { clear: both; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a { text-decoration: underline; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } /* Related posts item content */ #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title, #jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items time { font-size: 14px; line-height: 20px; margin: 0; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs { position:relative; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay { position:absolute; top:0; bottom:0; left:0; right:0; display:block; border-bottom: 0; } #jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items time { margin-bottom: 0; } #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title { text-transform: none; margin: 0; font-family: inherit; display: block; max-width: 100%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a { font-size: inherit; font-weight: normal; text-decoration: none; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover { text-decoration: underline; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post span { display: block; max-width: 90%; overflow: hidden; text-overflow: ellipsis; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post span { height: auto; max-width: 100%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date, #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context { opacity: .6; } /* Hide the date by default, but leave the element there if a theme wants to use css to make it visible. */ .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date { display: none; } /* Behavior when there are thumbnails in visual mode */ #jp-relatedposts .jp-relatedposts-items-visual div.jp-relatedposts-post-thumbs p.jp-relatedposts-post-excerpt { display: none; } /* Behavior when there are no thumbnails in visual mode */ #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt { overflow: hidden; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs span { margin-bottom: 1em; } /* List Layout */ #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post { clear: both; width: 100%; } #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img { float: left; overflow: hidden; max-width: 33%; margin-right: 3%; } #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title { display: inline-block; max-width: 63%; } /* * Responsive */ @media only screen and (max-width: 640px) { #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { width: 50%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) { clear: left; } #jp-relatedposts .jp-relatedposts-items-visual { margin-right: 20px; } } @media only screen and (max-width: 320px) { #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { width: 100%; clear: both; margin: 0 0 1em; } #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title { float: none; max-width: 100%; margin-right: 0; } } /* * Hide the related post section in the print view of a post */ @media print { .jp-relatedposts { display:none ; } }.wp-block-jetpack-rating-star span:not([aria-hidden="true"]) { display: none; } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} /* Inline styles */ p.acssa5e2f{cursor:inherit;}span.acss0f1bf{display:none;}svg.acss7916f{color:#999;fill:#999;}figure.acsseecff{max-width:741px;}figure.acssf54bf{max-width:707px;}figure.acss71236{max-width:720px;}figure.acss3b60a{max-width:711px;}figure.acssa4359{max-width:611px;}figure.acss8f36c{max-width:803px;}figure.acsscc160{max-width:851px;}figure.acss8a54f{max-width:702px;}figure.acss5e9f5{max-width:708px;}figure.acssd42dc{max-width:759px;}div.acss138d7{clear:both;}div.acssba478{background:transparent url(https://i0.wp.com/blogmadeeasiest.com/wp-content/uploads/2018/06/wip.jpg?resize=150%2C150&ssl=1) no-repeat scroll 0% 0%;height:150px;max-width:150px;}div.acss6bdea{color:#333333;font-family:Arial;font-size:12px;height:75px;}div.acssc06b3{background:transparent url(https://i0.wp.com/blogmadeeasiest.com/wp-content/uploads/2018/04/WORDPRESS1.jpg?resize=150%2C150&ssl=1) no-repeat scroll 0% 0%;height:150px;max-width:150px;}div.acss4a905{background:transparent url(https://i0.wp.com/blogmadeeasiest.com/wp-content/uploads/2018/09/updraftplus.jpg?resize=150%2C150&ssl=1) no-repeat scroll 0% 0%;height:150px;max-width:150px;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}
Wordpress

How create the contact form in WordPress using contact form 7

How to create the contact form in WordPress using contact form7

In this tutorial, we will discuss how to create the contact form in WordPress using contact form 7.

The contact form is a great way for your audience to get in touch with you. The contact form not only allows the audience to get in contact with you, but it also makes your blog look smart.

you can create a contact form of your WordPress website  using contact form 7 plugin. this is a one of the most popular plugin for create a best contact form.

It is easy to customized  and well integrated plugin for WordPress website or blog

It is over 5 million download and active installation over the world.

although, a lot of contact form plugins available in WordPress with high-level options but contact form likes to all the peoples reasons for  easily customization and well integration

Here, we focus on creating a contact form using contact form 7.

First, you log in to your WordPress blog.

Then select the plugins tab –> add new from WordPress left side menu.

 

  1. Search plugins

Add new plugins

Type and search for contact form 7 in the search plugins

 

2. install plugins

Install contact form 7 plugins

Then click on install now and activate to use this plugin

After that,  installation is complete. Check installation is complete by clicking on installed plugin sub menu from plugins menu.

There we can see contact form 7 – shown below

Check -Installed Contact form 7 plugin

Then click on “contact” in your WordPress dashboard left side menu bar. Contact form 7 provides default or pre-defined form to use.

Create a new contact form

If you want a new contact form, click add new button the following page will be appear

 

 

 

 

code for Default contact form

If you want to use the predefined form, copy the code and paste it into post, page or text widget that you’d like the form to be displayed in.

You can create and manege multiple form from this location

Copy and paste the code to contact page

A contact form (limited feature) is available for immediate use.

If you use this default form Go to contact page and paste to code to the page area

Then save draft and Update

Preview of the contact form

 

Now when you visit your site, you should see your form displayed wherever you posted the code.

If you follow this method, you can display form on your post text widget area.

The above process showed how to create a default contact form.

 

How to create a customized contact form

Click on the contact menu from the left side menu bar and click on Add New

Add New contact form

 

Customized contact form
  1. Enter your form’s title
  2. Customized form field – you can add or delete form field according to your preference.

In the above diagram, in top of the area many useful tags shown to form customization

you can add drop down menu your contact form or add any other features according your customization

 

Mail setting to the contact form

Mail setting field

 

Save the setting

 

Message setting

Massage setting

Additional Setting

 

Additional setting

 

Related post

How to start a blog

How to earn money using a blog

Eighteen important plugins for a personal WordPress website

 

Suggested for you

Is it possible, to make money online

How to earn money using a blog

Some legit ways to make money online from Srilanka

How to create a brand YouTube channel step by step

An Introduction of Affiliate marketing

An Introduction of Google Adsense

Related posts:

Eighteen important plugins for a personal WordPress website
9 Reasons why WordPress is a good CMS for blogging
How to install and configure UpdraftPlus plugin
globalvannan

Leave a Comment
Share
Published by
globalvannan
7 years ago

Recent Posts

15 Realistic ways to make money online from home

15 Realistic ways to make money online from home In this post, we will discuss…

2 years ago

16 Best blogging platforms in 2022

15 Best blogging platforms in 2022 In this tutorial, we will discuss the topic of…

2 years ago

How to earn money using your personal or professional skill

How to earn money using your personal or professional skill In this tutorial, we will…

2 years ago

15 easy ways you can make money online

15 easy ways you can make money online 2022 in this Article, we are going…

2 years ago

7 Reasons why You should not start blogging

7 Reasons why You should not start blogging In this post, we will discuss the…

3 years ago

How to create a brand YouTube channel step by step for beginners

How to create a YouTube channel step by step for beginners In this tutorial, we…

3 years ago