Alignment CTA with unique field

New Contributor

Hello. I would like to align the CTA to validate the form with one field. I can't figure out how to do it. Basically I have one form which include only one mandatory field "Email". However, the CTA to validate the email appears below the email field whereas I would like the CTA to appear inline with the email field (to only have one line instead of two, thus reducing the size of the form).

Thanks

Reply
0 Upvotes
3 Replies 3
Highlighted
Advisor | Platinum Partner

Hi @J_begoood 

 

You can use CSS on the <div> elements that contain your form fields to achieve this. You just need to find the classes of the form div elements you want to style. For the email and submit fields, by default, they should be

 

div.hs_email

div.actions

 

with this information you then use CSS to float your email field left and float your submit button right

 

div.hs_email {

float:left;

}

 

div.actions {

float:right;

}

Where you put this CSS depends on whether your form is an external embedded form or a form hosted on a Hubspot page. The following articles will describe various ways to add CSS to the page(s) where your form is hosted:

Add code to the head of your Hubspot page (add the above between <style></style> tags):  https://knowledge.hubspot.com/cos-general/how-can-i-add-code-snippets-to-the-head-and-footer-html-of...


Editing Hubspot Stylesheets:
https://knowledge.hubspot.com/cos-general/create-edit-and-attach-css-files-to-style-your-site

Styling embedded forms: https://knowledge.hubspot.com/forms/how-do-i-style-my-embedded-form

If you can tell me what Hubspot subscription you are on and where your form is hosted I can give more specific details on where to put the CSS.


Did my post help answer your query? Help the Community by marking it as a solution.

Matthew Shepherd

An Inbound Growth Agency
Platinum HubSpot Partner

Highlighted
New Contributor

Thanks for your help.

I have the Sales + Marketing subscription. The form will be added to my website on Wordpress. The first image looks like what I want to do (validate button in line with the field) and the other photo is my current form. I had a look to the embed code of the CTA in line form but can't find any specific details added. 

Thanks

CTA below.pngCTA in line.png

Reply
0 Upvotes
Highlighted
Advisor | Platinum Partner

Hi @J_begoood 

You'll need to add the necessary CSS to your Wordpress stylesheet https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ .

If you don't want this change to be applied to all forms we'll need to tweak the CSS code to only look for this one form based on ID.

If you send me the URL to the page the form is embedded on I can let you know what code should be.


Did my post help answer your query? Help the Community by marking it as a solution.

Matthew Shepherd

An Inbound Growth Agency
Platinum HubSpot Partner

Reply
0 Upvotes