I've followed the contact form colunns doc but can't work out how to stack the first three fields in the left column with the enquiry field in the right column.
What you can do is create the structure you want on a regular page with the page builder. By structure we mean use the row and columns element to create the layout minus the form fields.
The code \ shortcodes for the layout can be copied if you instead use the regular editor and set it to text mode to see the shortcodes that build up the structure.
Copy that and transfer it to the contact form area where you add in the contact form fields. Thats should work.
Thanks for the reply. I think I get what you mean... I build a row column layout in a page, switch to classic mode and text to view the code (see below), then copy that into a contact form. The output makes it very hard to see where to add the form fields in, plus it seems to output the code at the front end too. Am I grabbing the right bits of layout code...?
I'm really sorry, I don't understand how that helps. It looks like formatting instructions for columns on a page. Your colleague was trying to get me to create an unformatted but structured layout for the contact form usings row layout controls i.e. 1/2 row with internal row inside column one. Then use that shortcode output in contact form 7.
Sorry but we did try with the page builder shortcodes but it still does not give a layout like you want. The CSS classes used here https://themenectar.com/docs/salient/contact-form-columns/ are from contact form 7 and not the theme.
I'm not going to paste credentials on a public ticket! Do you really need to log in to provide what is probably a CSS change? If so, please provide a secure way of me getting the login to you.
Hi
I've followed the contact form colunns doc but can't work out how to stack the first three fields in the left column with the enquiry field in the right column.
See the bottom of the page here... https://coeval.boundarymarketing.co.uk/
James
Hi James,
What you can do is create the structure you want on a regular page with the page builder. By structure we mean use the row and columns element to create the layout minus the form fields.
The code \ shortcodes for the layout can be copied if you instead use the regular editor and set it to text mode to see the shortcodes that build up the structure.
Copy that and transfer it to the contact form area where you add in the contact form fields.
Thats should work.
Try that and let us know how it goes.
Thanks for the reply. I think I get what you mean... I build a row column layout in a page, switch to classic mode and text to view the code (see below), then copy that into a contact form. The output makes it very hard to see where to add the form fields in, plus it seems to output the code at the front end too. Am I grabbing the right bits of layout code...?
[vc_row type="full_width_background" full_screen_row_position="middle" column_margin="default" column_direction="default" column_direction_tablet="default" column_direction_phone="default" scene_position="center" text_color="dark" text_align="left" row_border_radius="none" row_border_radius_applies="bg" overflow="visible" advanced_gradient_angle="0" overlay_strength="0.3" gradient_direction="left_to_right" shape_divider_position="bottom" bg_image_animation="none" gradient_type="default" shape_type=""][vc_column column_padding="no-extra-padding" column_padding_tablet="inherit" column_padding_phone="inherit" column_padding_position="all" column_element_spacing="default" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" column_link_target="_self" column_position="default" gradient_direction="left_to_right" overlay_strength="0.3" width="1/2" tablet_width_inherit="default" tablet_text_alignment="default" phone_text_alignment="default" animation_type="default" bg_image_animation="none" border_type="simple" column_border_width="none" column_border_style="solid"][vc_row_inner column_margin="default" column_direction="default" column_direction_tablet="default" column_direction_phone="default" text_align="left" row_position="default" row_position_tablet="inherit" row_position_phone="inherit" overflow="visible" pointer_events="all"][vc_column_inner column_padding="no-extra-padding" column_padding_tablet="inherit" column_padding_phone="inherit" column_padding_position="all" column_element_spacing="default" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" column_link_target="_self" gradient_direction="left_to_right" overlay_strength="0.3" width="1/1" tablet_width_inherit="default" animation_type="default" bg_image_animation="none" border_type="simple" column_border_width="none" column_border_style="solid"][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin="default" column_direction="default" column_direction_tablet="default" column_direction_phone="default" text_align="left" row_position="default" row_position_tablet="inherit" row_position_phone="inherit" overflow="visible" pointer_events="all"][vc_column_inner column_padding="no-extra-padding" column_padding_tablet="inherit" column_padding_phone="inherit" column_padding_position="all" column_element_spacing="default" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" column_link_target="_self" gradient_direction="left_to_right" overlay_strength="0.3" width="1/1" tablet_width_inherit="default" animation_type="default" bg_image_animation="none" border_type="simple" column_border_width="none" column_border_style="solid"][/vc_column_inner][/vc_row_inner][vc_row_inner column_margin="default" column_direction="default" column_direction_tablet="default" column_direction_phone="default" text_align="left" row_position="default" row_position_tablet="inherit" row_position_phone="inherit" overflow="visible" pointer_events="all"][vc_column_inner column_padding="no-extra-padding" column_padding_tablet="inherit" column_padding_phone="inherit" column_padding_position="all" column_element_spacing="default" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" column_link_target="_self" gradient_direction="left_to_right" overlay_strength="0.3" width="1/1" tablet_width_inherit="default" animation_type="default" bg_image_animation="none" border_type="simple" column_border_width="none" column_border_style="solid"][/vc_column_inner][/vc_row_inner][/vc_column][vc_column column_padding="no-extra-padding" column_padding_tablet="inherit" column_padding_phone="inherit" column_padding_position="all" column_element_spacing="default" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" column_link_target="_self" column_position="default" gradient_direction="left_to_right" overlay_strength="0.3" width="1/2" tablet_width_inherit="default" tablet_text_alignment="default" phone_text_alignment="default" animation_type="default" bg_image_animation="none" border_type="simple" column_border_width="none" column_border_style="solid"][/vc_column][/vc_row]
Hey Again,
Please use this instead: https://themenectar.com/docs/salient/page-builder-columns/ .
Thanks
ThemeNectar Support Team
I'm really sorry, I don't understand how that helps. It looks like formatting instructions for columns on a page. Your colleague was trying to get me to create an unformatted but structured layout for the contact form usings row layout controls i.e. 1/2 row with internal row inside column one. Then use that shortcode output in contact form 7.
Hi there,
Sorry but we did try with the page builder shortcodes but it still does not give a layout like you want.
The CSS classes used here https://themenectar.com/docs/salient/contact-form-columns/ are from contact form 7 and not the theme.
Could you consider using a plugin like https://wordpress.org/plugins/cf7-grid-layout/ to create your layout.
Hope you understand.
Thanks Eliud, that's much closer. Any idea how to make it fill the row?
https://coeval.boundarymarketing.co.uk/ (at the bottom)
James
Hi There,
Please send in your website url so that we can check this out further.
Thanks.
Uhm its in my last reply! https://coeval.boundarymarketing.co.uk/ (at the bottom)
Hey Again,
I see you already got the 2 column layout ?. Let us know if you need any further help.
Thanks
ThemeNectar Support Team
Sorry Tahir, if you read further down your colleague suggested another plugin that would sort the layout. It now isn't filling the row fully though...
James
Hi There,
Please send in your admin login credentials so that we can check this out further.
Thanks.
I'm not going to paste credentials on a public ticket! Do you really need to log in to provide what is probably a CSS change? If so, please provide a secure way of me getting the login to you.
James
Hi James,
Could you try the following CSS to get the form to cover \ fill the full width of the row:
.cf7sg-container .cf7-smart-grid.has-grid .container { max-width: 100%; }add it to salient \ general settings css script - custom css code.
Cheers.
Hi. Thanks but that didn't appear to do anything sorry.
James
Hi there,
You are running a caching plugin on your site.
Could you disable it temporarily and if the CSS still does not work then use this:
.cf7sg-container .cf7-smart-grid.has-grid .container { max-width: 100% !important; }with the caching plugin still disabled.
Thanks.
Thanks !important worked without disabling cache plugin. Only reason I didn't was because your documentation advises that the plugin is installed.
James