Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Abigail Wentzel
4,136 PointsNeed selector for parent, based on child type
I am using a Javascript snippet that inserts code into my HTML page. Unfortunately, I have no control over this code (3rd party platform) and cannot edit the order of HTML elements.
I'm trying to edit a form, specifically radio inputs by overriding the default bubble with a nicer looking icon from a font. I have succeeded in doing this on my own by writing:
<form>
<input type="radio" />
<label>Radio 1</label>
</form>
and writing the CSS rules as:
input[type="radio"] {
display:none; /*this hides the default bubble*/
}
input[type="radio"] + label:before{
/*insert code for new icon here*/
}
input[type="radio"]:checked + label:before{
/*insert code for checked icon here*/
}
HOWEVER! The javascript inserts the HTML as such:
<form>
<label><input type="radio"></input>Radio 1</label>
</form>
So I'm trying to find a way to rewrite the rules. I'm having difficulty, since I can't add the :before to the input itself, but I need to use :checked to differentiate between the two stages (selected, not selected). I can't find any CSS rule that will allow me to select the label based on the child input.
Any suggestions?
*Note: I only included the very very basic structure of HTML/CSS. I am happy to supply the full code if needed. :)
Edit: I'm not a pro at Markdown, so apologies if the code snippets look awful
Abigail Wentzel
4,136 PointsCan we mention third parties without getting kicked out? lol
Specifically, it is an embedded form from Hubspot. They give you two options - link a form to a page built on their platform, or embed the form on your own HTML page. I'm going with the later. They provide a Javascript snippet that inserts the HTML on load, but I have no access to modify the HTML. Only the module in their WYSIWYG.
I can use the browser developer window (Firebug or Chrome Developer) to view the inserted HTML. Fortunately, they give most elements class names, so I don't have to fish for hierarchy with CSS. Unfortunately, I have to work with what they give me. :P
2 Answers
Marcus Parsons
15,719 PointsI don't know who created the JavaScript, but that is not how inputs nor labels should be used. Inputs are always self closing, and labels should be outside of those inputs. You'll also typically see each label for an input have a for attribute that is the same as the id of the associated input.
Here is a good article that will show you how to do exactly what you want: http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
Abigail Wentzel
4,136 PointsThank you for your link. As you can see, I did something very similar and achieved the desired result when I wrote the code on my own. Although omitted from this example, I did include the for attribute and id on the label in my original code.
However, I'm stuck using the second order of HTML elements, regardless of how correct or incorrect they are in their syntax. Unfortunately, your proposed method does not work.
Marcus Parsons
15,719 PointsThere is no need to take what I said defensively. It is just constructive criticism. I don't know exactly what you mean by my method, but all I did was provide a link.
Also, your code may render correctly but will not validate by W3 standards. You have to remove the </input>. Again, it is not a personal attack on you; it is just a criticism of the code presented.
Abigail Wentzel
4,136 PointsNo offense taken, although I'm more than frustrated that I have no option to change or edit the HTML. Not even to make it correct by W3C standards. The best I can do is write a support ticket and ask Hubspot to make the code correct. Which, let's be honest, probably won't happen...
Marcus Parsons
15,719 PointsAfter the form is submitted, is the form processing being done by your site or an outside server? Either way, I would make my own form and then just include the necessary code so that you can can control the layout and styling of those elements.
Abigail Wentzel
4,136 PointsI will have to double check on that tomorrow (I'm already off work and the file is on our test server - no access at home).
I could certainly try that. I'm trying to remember if it was a "GET" or "POST" action. However, I do know the inserted HTML is a BEAST between custom tracking and unique identifiers at every single level of the form. Basically each element has a class and id (not necessarily the same name) and most are surrounded in div containers with their own classes and ids.
My only concern here is...how will I be able to track the form on the Hubspot application/platform? Each unique tracking snippet goes back to a unique element on the platform (be it form, module, page, post, etc). If I were to use the tracking code externally, I'm not sure how it will link up in a way that it will appear with the rest of my modules on the platform, so I can edit and monitor it. This particular form is THE primary contact form too, so I need to be able to track which leads are generated from it too.
Marcus Parsons
15,719 PointsIs the form just a contact form for the site? Like this one? http://www.marcusparsons.com/contactme.php
I have never used Hubspot, so I have no idea as to how that platform works haha Maybe someone will respond who has some experience with Hubspot that can help you further.
Abigail Wentzel
4,136 PointsYes, the form is a contact form in the sense that it has similar fields for contact information. However, in order to "build" the form, Hubspot uses a WYSIWYG editor with drag-and-drop lines that essentially say "First Name", "Last Name", "Email", etc. You don't see any HTML elements or code whatsoever. My guess is that when the form is compiled, these fields are auto-detected or pre-built and the editor spits out an HTML text input with an id of "First Name" and a unique tracking identifier for that field, so that it matches up with their CRM when the form is completed and submitted.
Dang, now I wish I had saved a copy of the page so I can view from home!
Marcus Parsons
15,719 PointsI can't really take a look at Hubspot, but I programmed my entire contact form myself from the styles to the JS validation to the PHP processing. It is really not too complicated of a process at all, and it's one you could do by yourself if you're inclined to do so. If you want, I can send you the raw PHP file and JS validation file so that you can see what I did and how I did it.
Abigail Wentzel
4,136 PointsThanks Marcus, but this isn't my first form. ;) I've been around the block a bit. While I appreciate the offer, I don't think it will help me out in this instance.
In order to utilize Hubspot's CRM to its full potential (read: get our money out of it), we are using their forms so that contact input is directly inserted into their CRM. That's opposed to writing our own form, having the info submitted to our own database, and then writing an API to transfer the data from our database to their CRM. That's a lot of work on our part, leaving a lot of room for error, and will take time to get the data from one place to the other where it would be a lot quicker just using the first option. Not to mention, the whole reason we got Hubspot was so we could ditch our database. :)
In addition, I checked the inserted HTML this morning (back at work!) and I highly doubt I could rewrite the form using their tracking strings. Even if I did catch every single string (and I was right - there's one on every.single.element), I'm pretty sure it would "break" communication when input was submitting, meaning the form might work, but the data wouldn't make it to Hubspot's CRM.
In the mean time, I've got a support/technical request in to their team to see if they can fix the element order. Unfortunately it looks like I'm stuck with ugly default bubbles...
Marcus Parsons
15,719 PointsGood luck, Abigail!
Abigail Wentzel
4,136 PointsSo after doing some more digging in general about CSS selectors, there are currently no parent selectors. :(
However, there is a pseudo-class :has() in the latest CSS Editors Draft from the W3C (dated May 17, 2015). It looks like a lot of people in the industry are pushing for a parent selector like this, and while it's not supported in browsers yet, it might be closer than we think!
jordans
1,609 PointsHubSpot offers an API over here: http://developers.hubspot.com/docs/
Here's there documentation on using their SMTP API in particular: http://developers.hubspot.com/docs/methods/smtpapi/smtpapi_overview
If you made a contact form using their API there would be no reason for you to use a database on your end. That's the whole point of an API service. After looking around on GitHub and Google for a little bit, I've come across a few different open source scripts offering assistance.
The only problem is I don't exactly understand what you want to do? What it seems like to me is you want to use HubSpot's email form they offer from their server and customize it? Correct me if I'm wrong.
Abigail Wentzel
4,136 Pointshaha, I got there eventually!
I guess I'm not 100% sure what the difference is between using an embedded form and using a form through their API, but I'm assuming the submission and data processing works behind the scenes in the embedded version, and with the API you have to build everything yourself from scratch.
I started with the embedded form, but couldn't get the CSS to work as I needed it to, so I ended up writing the form from scratch. The CSS works, but now I'm trying to figure out an API to submit the form data to Hubspot's CRM.
I never intended on using email, either to start or end with, so I'm not sure where that came from? I just wanted to change the style of the radio button bubble.
jordans
1,609 Pointsjordans
1,609 PointsCan you explain what you mean by a "JavaScript snippet that inserts code into my HTML page"? Are you talking about a website similar to jsFiddle?