Custom CSS to make form as similar as possible

I am trying to replicate the style of a form on my site as much as possible.

URL's have been provided in the internal ticket.

Thanks in advance!

  • Adam Czajczyk
    • Support Gorilla

    Hi Leo

    I hope you're well today and thank you for your question!

    I checked both forms and for the start I got you some CSS for the button and error message styling. Give it a try and let's see if that's the right path:

    /* submit button */
    button.forminator-button-submit {
      font-size:22px;
    	font-weight:bold;
    	text-transform: uppercase;
    	width:100%;
    	padding-top:18px;
    	padding-bottom:18px;
    	/* gradient */
      background: #00abc5; /* Old browsers */
      background: -moz-linear-gradient(top,  #00abc5 0%, #009bb1 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  #00abc5 0%,#009bb1 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  #00abc5 0%,#009bb1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00abc5', endColorstr='#009bb1',GradientType=0 ); /* IE6-9 */
    }
    
    /* error mesage */
    .forminator-error-message {
    	margin-top:0px;
    	color:#FFF;
    	font-weight:bold!;
    	padding:5px 25px;
    	background:#FB4E51;
    }

    To apply it to the form, edit the form and enable custom CSS in "Appearance" section, then put that code into the custom CSS field and update the form. If you do have any cache or asset optimization (or both) enabled on site currently, make sure please that you cleared them before checking if this works.

    I think I'd also suggest switching the "Design style" to either "Flat" or "Bold" from the "default as there's these two already set placeholders inside input fields out of the box, instead keeping them above them like "Default" style does. The "Flat" one also sets borders around entire input field upon error so we'd only need to make them "thinner".

    As for other styling aspects. I'm not quite sure what else to style as the "source" form includes also some elements that are not on the styled page - there's some title added and some images at the top. Would you also want to add such elements there?

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.