Skip Navigation

[Resolved] CRED forms – getting fields on on line and set the input size

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Tagged: 

This topic contains 11 replies, has 2 voices.

Last updated by stefanB-2 6 years, 2 months ago.

Assigned support staff: Shane.

Author
Posts
#312679

In the prev version of CRED Forms it was able to get different fields next to each other on 1 single line.
In the latest version all fields are always presented on a new line.

What is the trick to get 2 or more fields next to each other?
What is the trick to change the length of specific input fields?

I have tried to resolve this via display: inline or block - but with no change in effect.

I would to have of e.g. the following:

Measurements: Length XXX Width XXX Height XXX on one line.

#312709

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Stephen,

Thanks for contacting our support team.

You can actually achieve this by using some css to float the elements to the left so they will line up beside each other.

If you provide me with a link to the page where the form is being rendered then I can assist you with writing the css to position this.

Thanks

#312723
Screen Shot 2015-06-24 at 23.23.57.png

hidden link

Can you open the private section to provide you the password that is active on the site.

Its about the following fields:

		<div class="cred-field cred-field-werkstuk-lengte">
			<label class="cred-label">
Werkstuk lengte (cm)
</label>
			[cred_field field="werkstuk-lengte" post="aanvragen" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-werkstuk-breedte">
			<label class="cred-label">
Werkstuk breedte (cm)
</label>
			[cred_field field="werkstuk-breedte" post="aanvragen" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-werkstuk-hoogte">
			<label class="cred-label">
Werkstuk hoogte (cm)
</label>
			[cred_field field="werkstuk-hoogte" post="aanvragen" value="" urlparam=""]
		</div>
#312728

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Stefan,

Ive enabled the private fields for your next reply.

Thanks

#312973

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Stefan,

Please try the css below.

.cred-field-werkstuk-lengte{
  float: left;
  padding-right: 30px;
}
.cred-field-werkstuk-breedte{
  float: left;
  padding-right: 30px;
}
.cred-field-werkstuk-hoogte{
  float: left;

}

.cred-field-werkstuk-gewich{
clear:both;
}

Let me know if this helps.

Thanks

#313968
Screen Shot 2015-06-30 at 11.48.08.png

This means that for each field you would like to have on a the same line - you have the modify the CSS file.

In the prev version of CRED is was possible to add various fields behind each other and then they were also displayed next to each other. As I would like to use this method more to reduce the length of forms, I'm more looking to a generic solution instead of a field-by field solution.

I have tried this also in the following form - which you can access with the same credentials.

hidden link

Here I have some input fields and some calculated fields.

See below the code details from the Form

[credform class="cred-form cred-keep-original"]

	[cred_field field="form_messages" value=""]


	<div class="cred-group cred-group-Meterstanden">
		<div class="cred-header"><h3>Meterstanden</h3></div>
		<div class="cred-field cred-field-ovens">
			<label class="cred-label">
Ovens
</label>
			[cred_field field="ovens" post="opdrachten" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-proces-status">
			<label class="cred-label">
Proces Status
</label>
			[cred_field field="proces-status" post="opdrachten" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-meterstanden-1-voor">
			<label class="cred-label">
Meterstanden 1 Voor
</label>
			[cred_field field="meterstanden-1-voor" post="opdrachten" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-meterstanden-1-na">
			<label class="cred-label">
Meterstanden 1 Na
</label>
			[cred_field field="meterstanden-1-na" post="opdrachten" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-gasverbruik-1">
			<label class="cred-label">
Gasverbruik-1
</label>
			[wpv-calculate evaluate=" [types field="meterstanden-1-na"][/types] - [types field="meterstanden-1-voor"][/types]"]
		</div>
		<div class="cred-field cred-field-meterstanden-2-voor">
			<label class="cred-label">
Meterstanden 2 Voor
</label>
			[cred_field field="meterstanden-2-voor" post="opdrachten" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-meterstanden-2-na">
			<label class="cred-label">
Meterstanden-2 Na
</label>
			[cred_field field="meterstanden-2-na" post="opdrachten" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-gasverbruik-2">
			<label class="cred-label">
Gasverbruik-2
</label>
			[wpv-calculate evaluate=" [types field="meterstanden-2-na"][/types] - [types field="meterstanden-2-voor"][/types]"]
		</div>
	</div>



	[cred_field field="form_submit" value="Submit" urlparam=""]

[/credform]

I have now two lines where I would like to display 3 fields - the last field is a calculated field.
The label and field are now displayed on the same line.
The last field - "submit" is also on the same line.

I have added the following CSS for this:

.cred-field-meterstanden-1-voor{
  float: left;
  padding-right: 10px;
}
.cred-field-meterstanden-1-na{
  float: left;
  padding-right: 10px;
}
.cred-field-gasverbruik-1 {
  float: left;
  padding-right: 10px;
}
.cred-field-meterstanden-2-voor{
  float: left;
  padding-right: 10px;
}
.cred-field-meterstanden-2-na{
  float: left;
  padding-right: 10px;
}
.cred-field-gasverbruik-2 {
  float: left;
  padding-right: 10px;
}
.wpt-submit-form {
clear:both;
}

Would it be possible to create a special DIV where all fields are displayed on that line?

#314064

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Stefan,

This can certainly be generalized by using a div. Take a look at my example below.

  <div class="inline">

	<div class="cred-group cred-group-Video-Field">
		<div class="cred-header"><h3>Video Field</h3></div>
		<div class="cred-field cred-field-test-video">
			<label class="cred-label">
Test Video
</label>
			[cred_field field="test-video" post="post" value="" urlparam=""]
		</div>
	</div>

	<div class="cred-group cred-group-Post-Fields">
		<div class="cred-header"><h3>Post Fields</h3></div>
      
		<div class="cred-field cred-field-my-image">
			<label class="cred-label">
My Image
</label>
			[cred_field field="my-image" post="post" value="" urlparam=""]
		</div>
	</div>
</div>

<div class="clear"></div>

Notice I created a div with the class inline and wrapped the elements that I want to be inline within that div.

Then we can use this css to align the elements.

.inline div{
float: left;
}

This will align all the elements within the div.

The final important thing is to ensure you clear the float or else elements below will begin to overflow.

This is why I added a <div class="clear"></div> at the end.

Once you add that you need to include this css as well.

.clear{
clear: both;
}

Please let me know if this helps.
Thanks

#314220
Screen Shot 2015-07-01 at 11.52.25.png

I have applied the mods and with the Bootstrap menu it looks fine. However, in my current Theme, It is still not good. Input fields are now displayed before the labels ... See attachment.

I would like to ensure that the inline is always working!

My css:

.cred-inline div{
float: left;
padding-right: 20px;  
}

.cred-clear{
clear: both;
}

My form details

<div class="cred-inline">
		<div class="cred-field cred-field-meterstanden-1-voor">
			<label class="cred-label">
Meterstanden 1 Voor
</label>
			[cred_field field="meterstanden-1-voor" post="opdrachten" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-meterstanden-1-na">
			<label class="cred-label">
Meterstanden 1 Na
</label>
			[cred_field field="meterstanden-1-na" post="opdrachten" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-gasverbruik-1">
			<label class="cred-label">
Gasverbruik-1
</label>
			[cred_field field="gasverbruik-1" post="opdrachten" value="[wpv-calculate evaluate=" [types field="meterstanden-1-na"][/types] - [types field="meterstanden-1-voor"][/types]"]" urlparam=""]
		</div></div><div class="cred-clear"></div>

<div class="cred-inline">

		<div class="cred-field cred-field-meterstanden-2-voor">
			<label class="cred-label">
Meterstanden 2 Voor
</label>
			[cred_field field="meterstanden-2-voor" post="opdrachten" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-meterstanden-2-na">
			<label class="cred-label">
Meterstanden-2 Na
</label>
			[cred_field field="meterstanden-2-na" post="opdrachten" value="" urlparam=""]
		</div>
		<div class="cred-field cred-field-gasverbruik-2">
			<label class="cred-label">
Gasverbruik-2
</label>
			[cred_field field="gasverbruik-2" post="opdrachten" value="[wpv-calculate evaluate=" [types field="meterstanden-2-na"][/types] - [types field="meterstanden-2-voor"][/types]"]" urlparam=""]
		</div>
</div><div class="cred-clear"></div>


		<div class="cred-field cred-field-gasverbruik-totaal">
			<label class="cred-label">
Gasverbruik Totaal
</label>
			[cred_field field="gasverbruik-totaal" post="opdrachten" value="[wpv-calculate evaluate=" [types field="gasverbruik-1"][/types] + [types field="gasverbruik-2"][/types]"]" urlparam=""]
		</div>
	</div>



	[cred_field field="form_submit" value="Submit" urlparam=""]

[/credform]
#314292

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Stefan,

I need to request temporary access (wp-admin and FTP) to your site in order to be of better help.

You will find the needed fields for this below the comment area when you log in to leave your next reply.

The information you will enter is private which means only you and I can see and have access to it.

Also provide me with a link to the form as well.

Thanks

#314547

There is no private section activated. You can find the access details also in this thread, where I just added all necessary details: paramatic-search-not-working-anymore/#post-314539

What I would like to achieve is the following options for forms layouts:

Label: FieldA FieldB FieldC

Your CSS instructions with the bootstrap Theme presented the fields in the following way

LabelA LabelB LabelC
FieldA FieldB FieldC

It would be nice to understand how both options can be achieved

The page that you can use for testing: hidden link
CREDForm: 2551 "Meterstanden"

I have seen a different behaviour also when the sidebar is removed - but still not as expected.
You can remove the sidebar of this page by selecting the Builder Layout "WBT - No SideBars" - right under Page Edit options.

#314602

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Stefan,

I noticed why it was doing this.

In order for the labels to appear above please change this line
From:

.inline div

</code

to

.cred-inline .cred-field

Once you change it then your fields should show up like this.
LabelA LabelB LabelC
FieldA FieldB FieldC

In order for you to the the format below you need to setup your form with 1 label.
Example

<div class="cred-inline">
        <div class="cred-field cred-field-meterstanden-1-voor">
            <label class="cred-label">
Meterstanden 1 Voor
</label>
            [cred_field field="meterstanden-1-voor" post="opdrachten" value="" urlparam=""]
            [cred_field field="meterstanden-1-voor" post="opdrachten" value="" urlparam=""]

            [cred_field field="meterstanden-1-voor" post="opdrachten" value="" urlparam=""]

        </div>

Having 1 label for multiple fields and then using the same css provided should render this result.

Please let me know if this helps.

Thanks 🙂

#314615

Top - its working now