Wpforms Layout

Hi @amitsksingh,

Thanks for reaching out!

Yes, it should be possible to have a similar form using WPForms Lite, and here is a screenshot from an example on my dev site.

About the input fields, this will require displaying them in multiple columns by following our guides here:

• Creating Multi-Column Form Layouts With CSS Classes.
• Displaying Fields in a Single Column on Mobile.

Then, you can use these advanced settings for the input fields:

• Name field: use the Advanced setting in this screenshot (CSS Classes: wpforms-one-third wpforms-first wpforms-mobile-full). Also, use the Name field with the Simple format (screenshot).
• Email field: use the Advanced setting in this screenshot.
• Phone field: use a Single Line Text field with the Advanced setting in this screenshot. You can also use an input mask to improve your phone field by following our guides here and here.
• Message field: use a Single Line Text field with the Advanced settings in this screenshot (CSS Classes: wpforms-two-thirds wpforms-first wpforms-mobile-full).

About the Submit button, you can change its label to “Get a Quote” in Settings ? General (screenshot).

To change the Submit button position, you can use a CSS snippet like this:

@media screen and (min-width: 601px) {
    #wpforms-submit-102 {
        margin-left: 70% !important;
        width: 30% !important;
        margin-top: -105px !important;
    }
}

@media screen and (max-width: 600px) {
    #wpforms-submit-102 {
        width: 100% !important;
        margin-top: 15px !important;
    }
}

Please replace “102” for your Form ID.

And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

Hope this helps!

@rsouzaam Thanks a lot for your help. I created the form. But I am facing another issue. When I click submit button without filling form. due to error message appearing submit button moves down.

@rsouzaam here the screenshot. Skipped screenshot in my last message.

View post on imgur.com

Hi @amitsksingh,

Thanks for reporting the issue, and for your patience while we looked for a solution.

This will require custom code to adjust the submit button after clicking on it. For this:

1) Remove all the !important flags from the previous CSS snippet I shared. Alter it to this:

@media screen and (min-width: 601px) {
    #wpforms-submit-102 {
        margin-left: 70%;
        width: 30%;
        margin-top: -105px;
    }
}

@media screen and (max-width: 600px) {
    #wpforms-submit-102 {
        width: 100%;
        margin-top: 15px;
    }
}

2) Add this PHP snippet to your site:

/**
 * Change the margin-top property when clicking on the submit button
 *
 * @link https://wpforms.com/developers/wpforms_wp_footer_end/
 */
  
 function wpf_dev_change_margin_top_on_click( ) {
	?>
	 
	<script type="text/javascript">
	 
		jQuery(function($){
			$('#wpforms-submit-102').click(function() {
				$(this).css('margin-top', '-167px');
			});
		});
		</script>
	 
	<?php
	}
	 
add_action( 'wpforms_wp_footer_end', 'wpf_dev_change_margin_top_on_click', 30 );

In case it helps, here’s our tutorial with the most common ways to add custom code like this. For the most beginner-friendly option in that tutorial, I’d recommend using the WPCode plugin.

Here is a screencast of the result you should see.

I hope this helps!

Hi @amitsksingh ,

We haven’t heard back from you in a few days, so I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation.

Thanks ??

@shawon001 Thanks a lot. Solved.

Hi @amitsksingh,

That’s a great news!

If you need any other help with using WPForms Lite, please feel free to reach out.

Thanks!