New to the community? Start here

[Forminator] Issue with autocomplete on mobile

I would like to disable auto completion on a Forminator form or fix a CSS issue when I use auto completion, it turns text in the form black.

Tue, 19 Nov 2019 6:28:02
More Forminator Pro discussions
Forminator Pro
  • Alessandro
    • Nightcrawler & Daydreamer

    Hello James!

    We developed a small snippet to override the default behavior of form fields on webkit powered browser (like Google’s Chrome).

    Append the following snippet to your theme’s functions.php file.

    function wpmudev_webkit_autofill() {
	echo "<style type=\"text/css\">
	<!-- WPMUDEV -->
	.forminator-custom-form-15547 input:-webkit-autofill,
	.forminator-custom-form-15547 input:-webkit-autofill:hover, 
	.forminator-custom-form-15547 input:-webkit-autofill:focus,
	.forminator-custom-form-15547 textarea:-webkit-autofill,
	.forminator-custom-form-15547 textarea:-webkit-autofill:hover,
	.forminator-custom-form-15547 textarea:-webkit-autofill:focus,
	.forminator-custom-form-15547 select:-webkit-autofill,
	.forminator-custom-form-15547 select:-webkit-autofill:hover,
	.forminator-custom-form-15547 select:-webkit-autofill:focus {
	  -webkit-text-fill-color: #fff;
	}
	
	.forminator-custom-form-15547 input:-webkit-autofill,
	.forminator-custom-form-15547 textarea:-webkit-autofill,
	.forminator-custom-form-15547 select:-webkit-autofill {
		background: transparent;
		-webkit-animation-name: autofill;
		-webkit-animation-fill-mode: both;
	}
	
	@-webkit-keyframes autofill {
		to {
			background: inherit;
		}
	}
	</style>";
}
add_action( 'wp_footer', 'wpmudev_webkit_autofill', 0 );

    We targeted a specific form (#15547) but feel free to alter the selector and affect more forms. :blush:

    We always recommend to append any snippets in your child’s theme functions.php to allow parent themes to be updated without losing your modifications.

    Let us know if this worked for you.

    Kind regards,
    Alex.

  • Jamison
    • WPMU top fan!

    This post was created a while back. At the time (and still now), I didn’t want to create a child theme because I couldn’t get “safe” directions to do so on the internet (I don’t trust instructions on obscure websites. If I try to make a child theme and the code isn’t right, I can do some damage to the website). So, in order to use forms without building a child theme, I’ve been choosing different Design Styles (i.e. Default, Flat, Bold… ), but now, I’ll need to have a child theme without choice.

    Is there proper instructions to make a child theme that comes from a trusted source?

    Thanks,
    JL

  • Nithin Ramdas
    • Support Wizard

    Hi James Leesley ,

    Is there proper instructions to make a child theme that comes from a trusted source?

    You can check the WordPress codex:
    https://developer.wordpress.org/themes/advanced-topics/child-themes/

    Most of the articles do follow the above workflow. These articles I find the steps are correct which you can follow too:
    https://wpmudev.com/blog/how-to-create-wordpress-child-theme/
    https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

    However, please do note that if there are changes done under Appearance >Customize section on your Parent theme the changes won’t reflect if you switch to a child theme. You’ll have to re-configure the Customizer or export/import the settings via this plugin:
    https://wordpress.org/plugins/customizer-export-import/

    The above mentioned is the default workflow, if it’s a premium theme then it’ll have its own process, so would highly recommend checking with your themes support to ensure there won’t be any data lost once you switch to a child theme.

    Regards,
    Nithin

  • Jamison
    • WPMU top fan!

    I don’t know how to find the “child theme,” especially when I’m still learning what it is, and getting ahold of the theme developer could take weeks – if he/she even responds. I found this text about the theme, though. (Note: it’s a premium theme.)

    Text in the theme:
    “Please note, we wrap our theme files into another big archive that also includes a child theme, documentation, demo content etc. To find a theme installation file – unzip the archive you downloaded from the market and find another one inside (e.g. archive you download from market names Supernova-WordPress-Theme.zip, unzip it, and take supernova.zip inside – this one is a theme installation file).”

    Here’s the theme’s website: click here.

    Attached you’ll find a screenshot of everything that’s in the theme’s folder – I downloaded the theme and unzipped it.

    Thanks
    JL

  • Nithin Ramdas
    • Support Wizard

    Hi James Leesley ,

    I’m afraid it isn’t clear with just the screenshot to pinpoint whether its a child theme or not. In general, a child theme will have very few files compared to parent theme and the primary distinction is by checking the style.css file iside the folder of the child theme where the parent theme name would have been defined.

    That’s for example if we follow the given doc of WordPress.org in here:
    https://developer.wordpress.org/themes/advanced-topics/child-themes/#2-create-a-stylesheet-style-css

    This would be the default format of a style.css in a child theme:

    /*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

    In the above format, you’ll see the text “Template. That’s where the parent theme is defined. In the above, you’ll notice template is defined with the name of the parent theme and in the above example it points out that the parent theme is “twentyfifteen” theme, and hence makes WordPress treat it as a child theme. If “Template” isn’t there in style.css it won’t be treated as a child theme.

    From the given screenshot I doubt whether there is a child theme in there but cannot confirm without checking the style.css file. Since this ticket is regarding Forminator, if you are looking to get your concerns regarding child theme sorted quickly would highly recommend opening a new chat with us and our team should help with checking further regarding this with any queries with creating a child theme.

    Please use the following link to open a chat with us:
    https://wpmudev.com/hub/support/#wpmud-chat-pre-survey-modal

    Regards,
    Nithin

  • Jamison
    • WPMU top fan!

    Okay. Here’s the text in the Style.CSS, it appears there isn’t a child theme. Would you agree?

    Theme Name: Supernova – Multi-Purpose Theme
    Theme URI:
    Description: Portfolio, Blog, Business
    Version: 6.9.0
    Author: TheGravity
    Author URI: https://creativemarket.com/TheGravity
    Tags: one-column, two-columns, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl-2.0.html

    */

    @import url(‘css/bootstrap.css’:wink:;
    @import url(‘css/flexslider…

    I’ll post this in another forum, I just want to ask this last question.
    Thanks,
    JL

  • Nithin Ramdas
    • Support Wizard

    Hi James Leesley ,

    Okay. Here’s the text in the Style.CSS, it appears there isn’t a child theme. Would you agree?

    From reading the style.css format you have shared in the previous reply, that points to the parent theme rather than a child theme. If that’s the only one you could find then there isn’t a child theme bundled I’m afraid.

    Sure, opening a new ticket or chat should help our team in checking further and if possible see if a child theme could be created or not.

    Regards,
    Nithin