How to Create Contact Us Form – RYMA ACADEMY Blogs Homepage

#top-nav { background: rgb(239, 239, 239); width: 100%; height: 45px; } #top-nav .content { text-align: center; display: flex; justify-content: space-around; align-items: center; height: 100%; width: 80%; margin: auto; } #top-nav .content p { font-weight: 600; font-size: 16px; padding-top: 14px; } #top-nav .content p .top-nav-btn { border: 1px solid #890c25; background: #890c25; padding: 5px 30px; border-radius: 30px; position: relative; left: 10px; top: 0px; box-shadow: rgba(204, 204, 204, 0.2) 0px 7px 29px 0px; } #top-nav .content p .top-nav-btn a { text-decoration: none; font-size: 13px; font-weight: 600; color: white; } /* main-navbar */ .navbar { display: flex; justify-content: space-evenly; padding: 10px; background: #890C25; z-index: 1000; box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; } .navbar-brand { background: rgb(239, 239, 239); position: absolute; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; box-shadow: 0px 2px 5px #890c25f0; top: 0px; left: 10%; } .navbar-brand img { width: 16vh; } .navbar-nav { gap: 1rem; margin-right: 120px; background: rgb(239, 239, 239); border-radius: 30px; padding: 10px 50px; position: relative; } .nav-item .nav-link { font-size: 16px; color: #890c25; font-weight: 500; font-family: "Noto Kufi Arabic", serif; } /* Dropdown Menu */ .dropdown { position: absolute; top: 33.5px; left: 0; background: rgb(239, 239, 239); border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); width: 100%; display: none; z-index: 0; padding: 5px; transition: all 0.3s ease-in-out; } .dropdown .short-dropdown { display: flex; justify-content: space-between; } .dropdown .short-dropdown .between-line { border-right: 1px solid rgba(172, 170, 170, 0.616); height: 120px; position: relative; top: 40px; } .dropdown ul { list-style: none; padding: 15px; padding-top: 30px; padding-left: 40px; padding-bottom: 40px; width: 90%; } .dropdown ul h6 { width: 90%; margin-top: 5%; padding-bottom: 10px; color: rgb(110, 110, 110); border-bottom: 1px solid rgba(160, 158, 158, 0.729); margin-bottom: 8%; font-size: 13px; } .dropdown li { padding: 0; } .dropdown li a { display: flex; align-items: center; padding: 5px; } .dropdown li p { font-weight: 500; font-size: 12px; } .dropdown li p span { font-size: 8px; padding: 3px; border-radius: 10px; width: 100px; display: flex; margin-left: 0px; justify-content: start; align-items: center; border: none; position: relative; top: 2px; } .dropdown li span { margin-right: 10px; padding: 5px; border: 1px solid rgba(128, 128, 128, 0.782); border-radius: 5px; } .dropdown li span img { width: 4.5vh; border-radius: 5px; border: 1px solid rgb(240, 234, 234); } .dropdown li:last-child { border-bottom: none; } .dropdown a { display: block; text-decoration: none; padding: 10px 15px; font-size: 15px; color: #333; transition: background 0.3s ease-in-out, color 0.3s ease-in-out; } .dropdown ul .image a { width: 280px; height: 150px; border: 1px solid rgb(234, 234, 234); border-radius: 10px; margin-top: 30px; margin-left: 20px; } .dropdown ul .image img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .dropdown-social-icons { display: flex; justify-content: start; column-gap: 20px; /* padding-left: 10px; */ margin-top: 5px; margin-left: 30px; } .dropdown-social-icons p { width: 35px; height: 35px; border-radius: 50%; padding: 5px; background: #890c252f; display: flex; justify-content: center; align-items: center; margin-top: 5px; padding-left: 0px; } .dropdown-social-icons p img { width: 3vh; padding-left: 6px; } .dropdown a:hover { color: #890c25; } .dropdown a:hover p span { color: rgb(61, 61, 61); } /* Hover Effect */ .nav-item:hover .dropdown { display: block; transform: translateY(5px); } .nav-item .nav-link span img { width: 1.8vh; } .nav-btn { border: 3px solid #aa102f; background: #890c25; padding: 7px 15px; border-radius: 30px; position: relative; left: 30px; top: 1px; box-shadow: rgba(204, 204, 204, 0.2) 0px 7px 29px 0px; } .nav-btn a { text-decoration: none; color: white; font-size: 14px; font-weight: 500; } .nav-btn:hover { background: white; } .nav-btn:hover a { color: #890c25; display: flex; } .nav-btn a span { margin-right: 5px; } .nav-btn a span img { width: 2.2vh; } .nav-btn a span img#red-call-icon { display: none; padding-top: 5px; } .nav-btn:hover img#white-call-icon { display: none; } .nav-btn:hover img#red-call-icon { display: block; } .burger-menu { display: none; color: white; } #navbarNav { display: none; } #navbarNav.active { display: block; } /* .resources-banner{ position: relative; right: 50px; } */ /* Keyframes for sliding in and out */ @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } } /* Styles for main mobile menu and dropdown */ #mobile-menu { position: fixed; top: 45px; right: 0; width: 100%; height: 70vh; background-color: #fff; z-index: 100; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); display: none; transform: translateX(100%); padding-top: 100px; } .mobile-dropdown { position: fixed; top: 10px; right: 0; width: 100%; height: 70vh; background-color: #fff; z-index: 100; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); display: none; padding-top: 100px; transform: translateX(100%); } .more-dropdown { height: 70vh; } #mobile-menu .content .points ul, .mobile-dropdown ul { padding: 0; list-style: none; } #mobile-menu .content .points ul li, .mobile-dropdown ul li { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #efeded94; } #mobile-menu .content .points ul li a, .mobile-dropdown ul li a { text-decoration: none; color: #333; flex-grow: 1; } .mobile-dropdown .back-to-menu { display: block; padding: 10px; background-color: #f0f0f0; border: none; width: 100%; text-align: left; cursor: pointer; font-weight: bold; color: #333; } #mobile-menu .content .points .mobile-nav-btn { text-align: center; } #mobile-menu .content .points .mobile-nav-btn button { border: 1px solid #890c25; background: #890c25; padding: 8px 25px; border-radius: 30px; color: white; margin-top: 10px; box-shadow: rgba(204, 204, 204, 0.2) 0px 7px 29px 0px; } #mobile-menu .content .points .dropdown-social-icons { justify-content: start; margin-top: 20px; margin-left: 13%; } #mobile-menu .content .points .dropdown-social-icons p { padding-left: 5px; }

How to Create Contact Us Form

Last Updated / Reviewed: August 15th, 2023

Goal: Create a Contact Us Form Where User Can Enter Their Information for Contact Us.
Pre-requisites or requirements: You need a Website/Landing Page or a Contact Page/ Section.
Why this is important: A contact form is an important part of any website or landing page. It allows visitors to easily contact you with questions, comments, or to request more information.
When this is done: Every time when you want different information for different pages in a website.
Who does this: The person responsible for Website Development.

Create Contact Us Form

Step 1 -. Open Your Website & Login

Step 2 -. Go to Plugins & Add New.

Step 3 -. Search WP Forms

Search Wp Forms and Install, Then Activate

Step 4 -. Then, Go to WP Forms Plugin.

Step 5 -. Click on “ADD NEW”

Step 6 -. Click on Blank Form

Step 7 -. Choose Your Needed Field

Ex. I Need Fields

Name
E.Mail
Mobile No.
Large Message

Step 8 -. Go to Field Options -à Change Name and Other Setting

Step 9 -. And Save Your Forms…

Step 10 -. Go to Pages Section

Step 11 -. Edit with Elementor .

Step 12 -. Go to “Edit With Elementor and Add New Section”

Step 13 -. Find & add “WP Forms”.

Step 14 -. Choose Your Created Form

Step 15 -. Look Your Form

Step 16 -. Fill The Form

Step 17 -. Go to WPFORMS à Entries

Step 18 -. Check Your All Entries……