How to Show a Floating Contact Form in WordPress (3 Methods)

How to Show a Floating Contact Form in WordPress (3 Methods)

A floating contact form is a fantastic way to encourage visitors to reach out to you, regardless of where they are on your website. It remains persistently visible, providing easy access and increasing the likelihood of engagement. This article explores three distinct methods for implementing a floating contact form in WordPress, catering to various technical skill levels and preferences.

Method 1: Using a WordPress Plugin

The simplest and often most beginner-friendly approach involves leveraging the power of WordPress plugins. Numerous plugins offer floating contact form functionality, each with its unique set of features and customization options.

Step 1: Choose and Install a Plugin

Begin by searching the WordPress plugin repository. Popular choices include:

• Contact Form 7
• WPForms
• Ninja Forms
• Formidable Forms
• HubSpot All-In-One Marketing

For this example, we’ll use WPForms Lite, a user-friendly and feature-rich option.

1. Navigate to your WordPress dashboard.
2. Go to “Plugins” > “Add New.”
3. Search for “WPForms.”
4. Locate “WPForms Contact Form by WPForms Team” and click “Install Now.”
5. After installation, click “Activate.”

Step 2: Create a Contact Form (If Needed)

If you don’t already have a contact form, you’ll need to create one. WPForms provides a simple drag-and-drop interface.

1. In your WordPress dashboard, find “WPForms” in the left sidebar and click “Add New.”
2. Give your form a name (e.g., “Floating Contact Form”).
3. Choose a pre-built template (e.g., “Simple Contact Form”) or create a blank form.
4. Customize the form fields by dragging and dropping them from the left panel.
5. Configure the form settings, such as email notifications and confirmation messages, under the “Settings” tab.
6. Click “Save” to save your form.

Step 3: Use a Floating Sidebar Plugin

While WPForms doesn’t have a built-in floating option, you can achieve the desired effect using a separate floating sidebar plugin. This allows you to place your WPForms shortcode within a sticky or floating widget area. Consider plugins like:

• Q2W3 Fixed Widget
• Fixed Widget and Sticky Elements
• Simple Side Bar Widget

For this example, we’ll use Q2W3 Fixed Widget.

1. Navigate to “Plugins” > “Add New.”
2. Search for “Q2W3 Fixed Widget.”
3. Locate “Q2W3 Fixed Widget by Max Bond” and click “Install Now.”
4. After installation, click “Activate.”

Step 4: Add the Contact Form to a Floating Widget Area

1. Go to “Appearance” > “Widgets.”
2. Create a new text widget (or use an existing one).
3. In the text widget, paste the WPForms shortcode for your contact form. You can find the shortcode on the WPForms “All Forms” page. It usually looks something like `[wpforms id=”123″]`.
4. Check the “Fixed widget” box (provided by Q2W3 Fixed Widget) in the widget settings.
5. Adjust the “Margin top” and “Margin bottom” values in the widget settings to prevent the floating form from overlapping other elements on your page. Experiment with different values to find what works best for your site’s design.
6. Click “Save.”

Step 5: Customize the Appearance (Optional)

You can further customize the appearance of your floating contact form using CSS. You might want to adjust the width, background color, or border radius. You’ll need to use your browser’s developer tools to identify the CSS classes and IDs of the elements you want to style. You can add custom CSS through:

• Your theme’s custom CSS section (if available)
• The WordPress Customizer (“Appearance” > “Customize” > “Additional CSS”)
• A dedicated CSS plugin

For example, to add a background color to the widget, you might use CSS like this:

“`css
#widget-area div#text-2 { /* Replace text-2 with your widget ID */
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
}
“`

Method 2: Using HTML, CSS, and JavaScript

For those comfortable with coding, creating a floating contact form using HTML, CSS, and JavaScript offers greater flexibility and control over the design and functionality. This method involves creating the form structure, styling it, and then writing JavaScript to make it float.

Step 1: Create the HTML Structure

First, create the basic HTML structure for your contact form. This can be done within a text widget or directly in your theme’s files (be cautious when editing theme files; it’s recommended to use a child theme).

“`html

“`

This code creates a simple form with fields for name, email, and message. Note the `id=”floating-contact-form”` which will be used for styling.

Step 2: Style the Form with CSS

Next, add CSS to style the form and make it float. You can add this CSS to your theme’s stylesheet or through the WordPress Customizer.

“`css
#floating-contact-form {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 999; /* Ensure it’s on top of other elements */
}

#floating-contact-form h3 {
margin-top: 0;
}

#floating-contact-form label {
display: block;
margin-bottom: 5px;
}

#floating-contact-form input[type=”text”],
#floating-contact-form input[type=”email”],
#floating-contact-form textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
}

#floating-contact-form button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}

#floating-contact-form button:hover {
background-color: #3e8e41;
}
“`

This CSS fixes the form to the bottom right corner of the screen, adds styling for the form elements, and ensures it appears on top of other content using `z-index`.

Step 3: Implement Form Submission with JavaScript (and PHP)

The HTML and CSS create the visual form, but JavaScript is needed to handle form submission without a page refresh (using AJAX). Since WordPress requires proper handling of AJAX requests, this step also involves a PHP component.

**JavaScript (Add to your theme’s `functions.php` file or use a plugin like “Code Snippets”):**

“`javascript
jQuery(document).ready(function($) {
$(‘#contact-form’).submit(function(e) {
e.preventDefault();

var name = $(‘#name’).val();
var email = $(‘#email’).val();
var message = $(‘#message’).val();

$.ajax({
url: ‘/wp-admin/admin-ajax.php’, // WordPress AJAX handler
type: ‘POST’,
data: {
action: ‘send_floating_contact_form’, // Unique action name
name: name,
email: email,
message: message
},
success: function(response) {
alert(response); // Display success or error message
$(‘#contact-form’)[0].reset(); // Clear the form
},
error: function(jqXHR, textStatus, errorThrown) {
alert(‘Error: ‘ + textStatus + ‘ – ‘ + errorThrown);
}
});
});
});
“`

This JavaScript code captures the form submission, prevents the default form action, and sends the form data to the WordPress AJAX handler (`/wp-admin/admin-ajax.php`). It also includes error handling. Note that it requires jQuery to be loaded. WordPress usually loads jQuery by default, but if it’s not, you might need to enqueue it.

**PHP (Add to your theme’s `functions.php` file):**

“`php
add_action( ‘wp_ajax_send_floating_contact_form’, ‘send_floating_contact_form_callback’ );
add_action( ‘wp_ajax_nopriv_send_floating_contact_form’, ‘send_floating_contact_form_callback’ );

function send_floating_contact_form_callback() {
$name = sanitize_text_field( $_POST[‘name’] );
$email = sanitize_email( $_POST[’email’] );
$message = sanitize_textarea_field( $_POST[‘message’] );

$to = get_option(‘admin_email’); // Send to admin email
$subject = ‘Floating Contact Form Submission’;
$body = “Name: $namenEmail: $emailnMessage: $message”;
$headers = array(‘Content-Type: text/html; charset=UTF-8’);

$success = wp_mail( $to, $subject, $body, $headers );

if ( $success ) {
echo ‘Thank you for your message! We will get back to you soon.’;
} else {
echo ‘There was an error sending your message. Please try again later.’;
}

wp_die(); // Required to terminate AJAX request properly
}
“`

This PHP code handles the AJAX request. It retrieves the form data, sanitizes it to prevent security vulnerabilities, constructs an email, and sends it using the `wp_mail()` function. It’s crucial to sanitize user input to prevent XSS attacks. The `wp_die()` function is essential to properly terminate the AJAX request.

**Important Considerations:**

* **Email Configuration:** Ensure your WordPress site is properly configured to send emails. If you experience issues, consider using an SMTP plugin.
* **Security:** Always sanitize user input to prevent security vulnerabilities.
* **jQuery:** This code relies on jQuery. Ensure it’s enqueued in your WordPress theme.
* **Error Handling:** Implement robust error handling to provide helpful feedback to the user.

Method 3: Using a Page Builder with Floating Element Support

Many popular WordPress page builders offer the ability to create and position elements with absolute or fixed positioning, effectively allowing you to create a floating contact form.

Step 1: Choose and Install a Page Builder

If you don’t already have one, select and install a WordPress page builder. Popular options include:

• Elementor
• Beaver Builder
• Divi Builder

For this example, we’ll use Elementor.

1. Navigate to “Plugins” > “Add New.”
2. Search for “Elementor.”
3. Locate “Elementor Website Builder by Elementor.com” and click “Install Now.”
4. After installation, click “Activate.”

Step 2: Create or Edit a Page

Open a page where you want the floating contact form to appear.

1. Go to “Pages” and either create a new page or edit an existing one.
2. Click the “Edit with Elementor” button.

Step 3: Add a Contact Form Element

Most page builders have built-in contact form elements or integrations with popular contact form plugins (like Contact Form 7 or WPForms).

1. In the Elementor editor, search for “Form” in the widgets panel.
2. Drag and drop the “Form” widget onto your page.
3. Customize the form fields, labels, and settings within the Elementor interface. You may need to connect to a service like Mailchimp or set up email notifications.

Alternatively, if you’ve created a form with WPForms or Contact Form 7, you can use the “Shortcode” widget and paste the form’s shortcode into it.

Step 4: Position the Form as Fixed (Floating)

This is the key step. Use Elementor’s advanced positioning options to make the form float.

1. Select the column or section containing your contact form.
2. Go to the “Advanced” tab in the Elementor editor panel.
3. Under “Positioning,” set the “Position” to “Fixed.”
4. Adjust the “Horizontal Orientation” and “Vertical Orientation” to position the form where you want it on the screen (e.g., “Right” and “Bottom”).
5. Adjust the “Offset” values (Horizontal and Vertical) to fine-tune the form’s position.
6. Set the “Z-Index” to a high value (e.g., 999) to ensure the form appears on top of other elements.

Step 5: Customize the Appearance

Use Elementor’s styling options to customize the appearance of the form to match your website’s design. You can adjust colors, fonts, backgrounds, borders, and more.

Step 6: Test and Publish

Preview the page to ensure the floating contact form appears correctly and functions as expected. Then, publish or update the page to make the changes live.

This method provides a visual and intuitive way to create a floating contact form without writing code. The page builder handles the positioning and styling, while you focus on the form’s content and functionality.