RSK World - Contact Us | Contact Form, Map, Theme Toggle | RSK World

Contact Form Map Integration Theme & Validation Toasts & Thank-You Bootstrap 5

Contact Page Template is a modern contact page with form, map, and social links. Includes: config.js for endpoint, theme, message limits; contact form with name, email, subject, message and client-side validation; live message counter; honeypot spam protection; toast notifications (success/error); dark/light theme with localStorage; thank-you page redirect; 404 page; print styles; skip link and reduced-motion support; optional api/contact.php backend or Formspree. Files: index.html, thank-you.html, 404.html, tailwind.html, css/style.css, theme.css, animations.css, print.css, js/config.js, validation.js, toast.js, theme.js, main.js, api/contact.php. By rskworld.in.

If you find this Contact Page Template project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Contact Page Template

Contact Form & Validation

Form fields: name (2–100 chars), email, subject (select), message (10–2000 chars). Client-side validation in validation.js with CONFIG.form limits; live message counter; email regex; honeypot field (website_url) for spam protection. Submit via fetch to CONFIG.form.endpoint (empty for demo, api/contact.php for PHP, or Formspree URL).

main.js: form submit handler; Validation.validateForm(); loading state; onSuccess/onError; redirect to thank-you when endpoint empty.
validation.js: isEmail(), isNameValid(), isMessageValid(), getMessageLength(), validateForm() using CONFIG.
index.html: #contactForm, #name, #email, #subject, #message, #messageCounter; honeypot input with tabindex="-1".
config.js: form.endpoint, redirectToThankYou, thankYouUrl, maxMessageLength, minNameLength, maxNameLength, honeypotName.

Project Structure & Files

Root: index.html (main contact page), thank-you.html, 404.html, tailwind.html (Tailwind variant). CSS: style.css (base, form, cards, social, honeypot), theme.css (dark theme), animations.css (scroll, toasts, skip link, focus), print.css. JS: config.js, validation.js, toast.js, theme.js, main.js. api/contact.php optional backend.

index.html – hero, contact form, contact info card, map iframe, social links, footer; skip link, theme toggle.
style.css – danger accent #dc3545; form focus; card hover; social-btn; honeypot hidden; theme.css for .theme-dark.
main.js – message counter, honeypot check, fetch(endpoint) or demo setTimeout; Toast.success/error; form.reset.
config.js – site, contact, form (endpoint, thankYouUrl, limits), theme, toast; README – usage, config options.

Theme Toggle & Toasts

Dark/light theme: theme.js applies data-theme and .theme-dark on html; toggle button with moon/sun icons; choice saved in localStorage (contact-template-theme); CONFIG.theme.defaultTheme and storageKey. Toasts: toast.js builds Bootstrap alert toasts; success/error; CONFIG.toast.duration and position; auto-dismiss and close button.

theme.js: getStored(), setStored(), applyTheme(), toggle(); themeToggle button; icon and label update.
toast.js: getContainer(), show(message, type), escapeHtml(); Toast.success(), Toast.error(); role="alert".
theme.css: .theme-dark body, navbar, cards, form controls, footer, toast colors; danger hover #ff6b6b.
animations.css: toastIn keyframes; :focus-visible outline; .skip-link; prefers-reduced-motion disables animations.

Map, Social & Thank-You

Map: OpenStreetMap iframe in index.html with configurable src (Purba Burdwan bbox/marker); ratio-21x9; lazy loading. Social: website, email, phone as outline-danger circle buttons. Thank-you page: heading, subheading, urgent contact note, Back to Contact / Send Another / Visit RSK World links.

Map: iframe src with bbox and marker; title and referrerpolicy; card-footer with location text.
Social: .social-btn rounded-circle; href to rskworld.in, mailto, tel; Bootstrap Icons.
thank-you.html: check icon, Thank You heading, 24–48 hours message, links to index.html and rskworld.in.
404.html: 404 heading, Go to Contact, RSK World; same header/footer styling.

Accessibility & Print

Skip link to #contact; :focus-visible outline; ARIA on form and toasts. print.css: hide skip-link, navbar-toggler, theme toggle, toasts, buttons, social, iframe; simplify body and cards for clean print; break-inside: avoid on sections.

Skip link: .skip-link top -100px, :focus top 0.5rem; href="#contact".
Reduced motion: animations.css @media (prefers-reduced-motion) disables transitions/animations.
Print: display:none for interactive elements; body 12pt; cards border; footer f5f5f5; links show href after.
api/contact.php: POST only; honeypot check; server-side validation; mail() to $to; JSON success/message.

What You Get

Static HTML/CSS/JS: index.html, thank-you.html, 404.html, tailwind.html, css/*.css, js/*.js, api/contact.php, README.md, LICENSE, NOTICE. No build step. Open index.html or serve folder. Technologies: HTML5, Bootstrap 5, Vanilla JS, optional PHP. © 2026 RSK World.

Complete source – all files ready; set config.js endpoint to '', api/contact.php, or Formspree URL.
No build step – open index.html or serve; no bundler; optional Laragon for PHP.
README with features, structure, usage (static/PHP/Formspree), config options.
Technologies: HTML5, Bootstrap 5, Bootstrap Icons, Vanilla JS, OpenStreetMap, optional PHP.

Usage

Open index.html to view the contact page. Edit js/config.js: form.endpoint ('' for demo, 'api/contact.php' for PHP, or Formspree URL), redirectToThankYou, thankYouUrl, maxMessageLength, theme.defaultTheme. Edit api/contact.php $to for your email when using PHP. Customize map iframe src in index.html.

index.html – form, map, social; all behavior from config.js and main.js.
config.js – endpoint, thankYouUrl, validation limits, theme storageKey; CONFIG used by validation, main, theme, toast.
Live Demo – points to ./index.html when file exists; View Files to browser.php.
Author: Molla Samser | rskworld.in – Contact Page Template; contact for customization.

Project Features

Contact form with validation and message counter; honeypot spam protection; toast notifications; dark/light theme with persistence; OpenStreetMap embed; social links; thank-you and 404 pages; print styles; skip link and reduced-motion; Bootstrap 5, vanilla JS, optional PHP or Formspree.

Form, validation, toasts – core contact page behavior; config-driven endpoint and limits.
Theme, map, social – optional sections; theme from localStorage; map iframe customizable.
Accessibility and print – skip link, focus-visible, ARIA, reduced-motion, print.css.
Bootstrap 5, responsive – mobile-first; danger accent; Tailwind variant in tailwind.html.

Credits & Acknowledgments

Contact Page Template by RSK World. Modern contact page with form, map, theme toggle, and validation for learning front-end contact pages.

Contact Page Template – contact form, map, theme, validation, toasts, thank-you. Free for learning and use.
RSK World – Project creator and platform for UI/UX demos.
Author: Molla Samser (Founder - RSK World). Website: https://rskworld.in. Email: help@rskworld.in | Phone: +91 93305 39277. Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Third-party credits: Bootstrap – CSS/JS framework; OpenStreetMap – map embed.
© 2026 RSK World. Contact Page Template for educational and commercial use.

Support & Contact

For Contact Page Template customization or integration help, please contact us.

Email: help@rskworld.in – for Contact Page Template customization or general questions.
Phone: +91 93305 39277 – support and custom contact page features.
Website: RSKWORLD.in – more UI/UX projects by RSK World.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Author: Molla Samser (Founder, RSK World) – creator of Contact Page Template.
README and config.js – features, file structure, and setup.
Technical Support – help with form endpoint, PHP mail, or Formspree.
Feature Requests Welcome – suggest new contact page modules.