Form on only line

Get Help
, ,
1

It’s possible to do form on only line like this ?

search box
search box1211×380 123 KB

Thank you for response

2

Sure. Take a look at this tutorial:

3

ok thank’s. I try but i have this result :

form horizontal
form horizontal1539×392 15.9 KB

How to do minimum width ?

4

Can you embed that form in a page on your site and share the URL here, so we can see what CSS we are dealing with? Thank you.

5

yeah, look : https://aquit1formatik.fr/

6

OK, I see this on your site:

How do you want that to be different from what is there now?

7

center form and add border only on bottom please

8

I’m having a hard time centering that on your site. Can you please export the form and send the JSON file via email to chris@rocketgenius.com so I can test it locally? Thank you.

9

ok, look : https://wetransfer.com/downloads/c3e46358e26c6fd0f0f0e561550b403e20200509115626/a440dbcb8490fe67bc955a18c6184a5820200509115653/34d2ac

10

i have send an email, have you see ?

11

Yes I received it. Thank you. On your site, you can add this CSS to your theme stylesheet or via the Appearance Customizer (Appearance > Customize > Additional CSS):

.pp-gravity-form {
    display: table;
    margin: 0 auto;
}

Here’s what that looks like when applied to your form:

12

ok thank you so much. how can you remove space between input please ? and how can i add border yellow botom please ? and add title ?

13

To remove the space between the inputs, you can add this CSS:

body .gform_wrapper form.gf_simple_horizontal div.gform_body ul.top_label li.gfield,
body .gform_wrapper ul.gform_fields li.gfield {
	padding-right: 0;
}

For a yellow border on the bottom, you can use this CSS:

div.pp-gravity-form {
    border-bottom: 5px solid yellow;	
}

And for the title, you have the option to show the form title when you embed the form. You can add title=“true” to your form shortcode, or check the box to show the form title.

14

Thank you so much for your help.
To remove space between only first inputs (no button) :

no space
no space1225×380 200 KB

15

For a yellow border on the bottom : i would like on inputs directly , like this :

border bottom
border bottom1208×380 93.2 KB

16

And for the title, i don’t see box to show form title :

no title
no title634×717 27.5 KB

17

With the gf_inline and gf_simple_horizontal classes, you may not be able to achieve all that. You are looking for a custom layout and custom styling, which will require custom CSS.

The gf_simple_horizontal CSS Ready Class hides the field labels by default, so you’re not going to be able to use that. The field label is what you want to display; I thought you meant the Form Title.

I’m afraid you will need to create this CSS yourself, rather than use the CSS Ready Classes. If you’re not able to do that on your own you can post something on our Job Board:

https://community.gravityforms.com/c/job-board

Or you can find help for hire here:

Sorry the CSS Ready Classes did not work for you. They are helper classes which work in a lot of cases but I don’t believe they will work here. Thank you.

18

Thank you, i have some problem with mode responsive, look :

form problem
form problem1332×614 140 KB

In tablet mode, the form exceeds and in mobile mode, the form is not inline, can you help me please ?

19

Hello again. I recommend opening a support ticket for this latest question. But, if the styling is caused by interference with your theme, support may not be able to help though. If you check this form in the form preview (with only Gravity Forms styles applied) how does it look there? If it’s OK there, the issue is some conflicting styles being added by your theme or a plugin. If it’s not OK in the form preview, that’s a good reason to open a support ticket: Support | Gravity Forms

Thank you.