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:
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!
