To create the contact form widget, we'll be using a combination of PHP, HTML, and WordPress-specific functions. Let's break down the process step by step:
-
Create the HTML Form Structure:
function html_form_code() {
echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
echo '<p>';
echo 'Your Name (required) <br/>';
echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
echo '</p>';
echo '<p>';
echo 'Your Email (required) <br/>';
echo '<input type="email" name="cf-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
echo '</p>';
echo '<p>';
echo 'Subject (required) <br/>';
echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
echo '</p>';
echo '<p>';
echo 'Your Message (required) <br/>';
echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
echo '</p>';
echo '<p><input type="submit" name="cf-submitted" value="Send"></p>';
echo '</form>';
}
This function creates the HTML structure for the contact form, including the required input fields and the submit button.
-
Process the Form Submission and Send Email:
function deliver_mail() {
// If the form is submitted, process the data
if ( isset( $_POST['cf-submitted'] ) ) {
// Sanitize the form values
$name = sanitize_text_field( $_POST["cf-name"] );
$email = sanitize_email( $_POST["cf-email"] );
$subject = sanitize_text_field( $_POST["cf-subject"] );
$message = esc_textarea( $_POST["cf-message"] );
// Get the blog admin's email address
$to = get_option( 'admin_email' );
// Set the email headers
$headers = "From: $name <$email>" . "\r\n";
// If the email is sent successfully, display a success message
if ( wp_mail( $to, $subject, $message, $headers ) ) {
echo '<div>';
echo '<p>Thanks for contacting us. We will get back to you soon.</p>';
echo '</div>';
} else {
echo 'An unexpected error occurred.';
}
}
}
This function processes the form submission, sanitizes the input data, and sends the email to the website admin. It also displays a success message if the email is sent successfully.
-
Integrate the Contact Form with the Database:
To store the form data in the WordPress database, we'll use the wp_insert_post()
function to create a new post for each form submission. Here's an example:
function store_form_data() {
// If the form is submitted, process the data
if ( isset( $_POST['cf-submitted'] ) ) {
// Sanitize the form values
$name = sanitize_text_field( $_POST["cf-name"] );
$email = sanitize_email( $_POST["cf-email"] );
$subject = sanitize_text_field( $_POST["cf-subject"] );
$message = esc_textarea( $_POST["cf-message"] );
// Create a new post in the database
$post_id = wp_insert_post(
array(
'post_title' => $subject,
'post_content' => $message,
'post_status' => 'private',
'post_type' => 'contact_form',
'meta_input' => array(
'cf_name' => $name,
'cf_email' => $email
)
)
);
// Check if the post was created successfully
if ( $post_id ) {
echo '<div>';
echo '<p>Thank you for your message. We will get back to you soon.</p>';
echo '</div>';
} else {
echo 'An unexpected error occurred.';
}
}
}
This function creates a new custom post type called contact_form
and stores the form data as post meta. The post is set to 'post_status' => 'private'
to keep the submitted data secure and accessible only to the website admin.
-
Create a Shortcode for the Contact Form:
Finally, we'll create a shortcode that can be used to display the contact form on any page or post of the WordPress site.
function contactform_shortcode() {
ob_start();
deliver_mail();
store_form_data();
html_form_code();
return ob_get_clean();
}
add_shortcode( 'my_contact_form', 'contactform_shortcode' );
This function combines the previous functions (deliver_mail()
, store_form_data()
, and html_form_code()
) and returns the HTML output of the contact form. The add_shortcode()
function then registers the [my_contact_form]
shortcode that can be used to display the contact form anywhere on the WordPress site.
By following these steps, you've now created a powerful WordPress contact form widget that not only captures user submissions but also integrates with the WordPress database for easy data management. Users can easily access and submit the contact form using the provided shortcode, and the website admin can view the submitted data in the "Contact Form" custom post type.
Remember, this is just a basic example, and you can further enhance the functionality of the contact form widget by adding features such as form validation, file uploads, and custom email templates. Additionally, you can leverage the power of Flowpoint.ai to analyze the user behavior on your contact form and generate recommendations to optimize its performance and increase conversion rates