Style Contact Form 7

In preparation for the upcoming release of Style Contact Form 7 – Pro I have added a font family to the CSS and removed some unused default form styles making the contact form Identical in the Editor and the Front end.

This update contained mainly Css tweaks to the admin sidebar.

Also Changed Admin Menu title from ‘Style Contact Form 7’ to ‘Style CF7’ to avoid line break.

Added some default gradient color options to the submit button.

If you enjoy using this plugin please help support its development by leaving positive feedback at the link below

Style Contact Form 7 – Reviews

A big thank you to Joomla Jones for contacting me to highlight an issue with my plugin where if you duplicate a CF7 form or you create a new form the default form is deleted.

This was the code block with the issue, this is a new WP_Query() post loop which retrieves the contact forms from the database to be displayed in the post editor.

	$args = array(
        'post_type'      => 'wpcf7_contact_form',
        'posts_per_page' => 20, 
        'post_status'    => 'publish',
	    'orderby'        => 'modified',
	    'order'          => 'DESC',
    );

    // The Query
	$contact_forms_query = new WP_Query($args);

	$contact_forms = [];

	if ($contact_forms_query->have_posts()) {
		while ($contact_forms_query->have_posts()) {
			$contact_forms_query->the_post();
			$contact_ID = get_the_ID();
			
			// Assuming 'wpcf7-messages' is the correct meta key for the serialized messages
			$messages = get_post_meta($contact_ID, '_messages', true);

			
			$success_message = is_array($messages) && isset($messages['mail_sent_ok']) ? $messages['mail_sent_ok'] : 'Default success message or empty string';

			$contact_forms[] = [
				'id' => $contact_ID,
				'title' => get_the_title(),
				'modified' => get_the_modified_date(),
				'success_message' => $success_message,
			];
		}
	}

I fixed the issue by replacing the WP_Query() function with a get_posts() function.

	$args = array(
		'post_type'      => 'wpcf7_contact_form',
		'posts_per_page' => 20,
		'post_status'    => 'publish',
		'orderby'        => 'modified',
		'order'          => 'DESC',
	);
	
	// Get posts directly
	$contact_forms_posts = get_posts($args);
	
	$contact_forms = [];
	
	foreach ($contact_forms_posts as $post) {
		$contact_ID = $post->ID;
	
		// Assuming 'wpcf7-messages' is the correct meta key for the serialized messages
		$messages = get_post_meta($contact_ID, '_messages', true);
	
		// Attempt to access the 'mail_sent_ok' message within the possibly serialized data
		$success_message = is_array($messages) && isset($messages['mail_sent_ok']) ? $messages['mail_sent_ok'] : 'Default success message or empty string';
	
		$contact_forms[] = [
			'id' => $contact_ID,
			'title' => $post->post_title,
			'modified' => $post->post_modified,
			'success_message' => $success_message,
		];
	}

If you enjoy using this plugin please help support its development by leaving positive feedback at the link below

Style Contact Form 7 – Reviews

Style Contact Form 7 has now been tested with WordPress 6.6

If you enjoy using this plugin please help support its development by leaving positive feedback at the link below

Style Contact Form 7 – Reviews

In a effort to enhance user experience and accessibility, I have introduced new styling for the validation and warning messages within the ‘Style Contact Form 7’ plugin. These enhancements are designed to make the messages stand out more prominently and ensure they are easily legible, thereby improving the overall form interaction and usability.

The validation messages, which prompt users to correct errors in their form inputs, now feature a vibrant background color and clear, contrasting text. This change ensures that the messages are immediately noticeable, reducing the likelihood of user frustration due to missed prompts. The new background color for validation messages is a striking shade of red (#f85d5d), paired with white text to guarantee high readability. Additionally, I have added subtle styling touches such as rounded corners and padding to give the messages a more polished and modern look.

Similarly, the warning messages, which alert users to issues that need attention, have been styled with a distinct color scheme to differentiate them from other types of messages. By using a bright yellow background color (#ffb900) and white text, these warnings are both attention-grabbing and easy to read. The consistent use of padding, font size adjustments, and border-radius across all message types ensures a cohesive visual experience, making the form elements more user-friendly.

These styling updates not only enhance the aesthetic appeal of the ‘Style Contact Form 7’ plugin but also significantly improve its functionality. By making validation and warning messages more visible and legible, users are more likely to complete forms correctly and efficiently. This focus on clarity and user experience underscores our commitment to providing top-notch tools for website developers and administrators, helping them create seamless and accessible web forms.

Mofis.

If you enjoy using this plugin please help support its development by leaving positive feedback at the link below

Style Contact Form 7 – Reviews