Adding HTML Fields with a Copy Button to Your Website
Learn how to create HTML fields on your website paired with a functional copy button. This guide simplifies the process, making it easier for users to copy and share content seamlessly.
How to Add HTML Fields with a Copy Button to Your Website
Have you ever visited a website where you could easily copy a block of text or code with just one click? Adding this functionality not only enhances user experience but also makes your content more shareable. In this post, we’ll walk you through the process of creating HTML fields paired with a functional copy button using simple code.
Why Add a Copy Button?
A copy button is a small but powerful feature that can:
- Save users time by eliminating manual copying.
- Improve usability for code snippets, form data, or sharable links.
- Enhance your website’s interactivity.
The Result
<div>
<h1>Welcome to My Website</h1>
<p>This is a sample block of HTML code.</p>
</div>
The Code
Here’s the step-by-step guide to creating an HTML field with a copy button.
<div class="code-block">
<div class="code-block-header"><span class="code-lang">HTML</span>
<button class="copy-btn">Copy</button></div>
<pre><code class="code-content">Your Content Here!
</code></pre>
</div>
Where you see "Your Content Here!", you'll need to add HTML with entities like the below to display reserved characters (like <, >, or &) in your content without being interpreted as HTML code. They are essential when embedding code snippets or special characters directly into a webpage to ensure proper rendering and avoid breaking the page’s structure.
<div class="code-block">
<div class="code-block-header"><span class="code-lang">HTML</span>
<button class="copy-btn">Copy</button></div>
<pre><code class="code-content">Your Content Here!
</code></pre>
</div>
/*HTML Function*/
.code-block {
border: 1px solid #ddd;
border-radius: 5px;
margin: 20px 0;
font-family: sans-serif;
position: relative;
overflow: hidden;
}
.code-block-header {
display: flex;
justify-content: space-between;
background: #f5f5f5;
border-bottom: 1px solid #D7D5DA;
padding: 5px 10px;
font-size: 14px;
align-items: center;
}
.code-lang {
font-weight: bold;
}
.copy-btn {
background: #6849F4;
border: 1px solid #fff;
border-radius: 5px;
padding: 8px 15px;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
color: #fff;
}
.copy-btn:hover {
color: #fff;
background: #7F63FF;
border: 1px solid #fff;
}
pre {
margin: 0;
padding: 15px;
background: #fafafa;
overflow: auto;
font-size: 14px;
line-height: 1.4;
border-radius: 0 0 5px 5px;
border: 0.5px solid #D7D5DA;
}
.code-content {
font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
color: #333;
}
<?php
// Add copy button script to the head
add_action('wp_head', 'my_custom_copy_code_js');
function my_custom_copy_code_js() {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Attach event listeners to all copy buttons
const copyButtons = document.querySelectorAll('.copy-btn');
copyButtons.forEach(button => {
button.addEventListener('click', function () {
// Copy the content from the code block
const codeBlock = button.closest('.code-block');
if (!codeBlock) return;
const codeElement = codeBlock.querySelector('.code-content');
if (!codeElement) return;
// Use Clipboard API to copy text
navigator.clipboard.writeText(codeElement.textContent)
.then(() => {
// Provide feedback
button.textContent = 'Copied!';
setTimeout(() => {
button.textContent = 'Copy';
}, 2000);
})
.catch(err => {
console.error('Failed to copy text:', err);
});
});
});
});
</script>
<?php
}
?>
Hope this helps! Bookmark this page and come back.
Want more resources? Check out my full blog below.
