0

I have a website that is several years old. I have updated it several times. However, the last time I tried a major update was a few years ago. I created a new install, added the content, new theme ... Very few people filled out the form and I've been hesitant since.

Ever since Google's release of Mobilegeddon (search algo update supposedly giving preference to mobile friendly sites) my AdWords traffic has been cut in roughly half. I had hoped that a search algo update would not effect my paid ads driven traffic but it appears that it did.

The old theme simply scaled everything to fit on to my phone's screen. So the form got small but the conversion rate was still good. Google's own numbers show that visitors prefer my site - as is - about 5 to 1 mobile over desktop. None of that matters to the algo though so my traffic levels are way down.

So I've chosen a responsive theme from a vendor I like. Everything scales well except my iframed form. I'm already changing the site significantly and don't want to change the form as well. If conversions go way up or way down I won't know if it is the form or the site that is responsible.

So I need a way to make this form: http://forms.emmetrics.com/criminal_defense/

responsive on this site: http://508.e09.myftpupload.com/form-test/

I've read several articles and attempting a lot of trial error. Mainly this has been style="..." type changes. Trying a div container and such. I'm not saying that won't work just that I haven't gotten it to work. My knowledge of CSS is pretty limited.

Any help is greatly appreciated.

Gabe Spradlin
  • 1,937
  • 4
  • 23
  • 47
  • At this state I think it hard maybe even impossible. Because the form is badly made, static, with static pre-made image. You can make the iframe responsible, that is easy but there is a problem with the form. So the problem is the form not the iframe/yoursite. – Maverick Jun 18 '15 at 22:04
  • Is there a way to force the entire page to scale instead? – Gabe Spradlin Jun 18 '15 at 22:56

1 Answers1

0

Unfortunately unless the vendor of the form updates their code you're a little bit stuck. You can apply CSS to the iframe element, but you can't touch the content inside the iframe unless it's on the same domain. This is a security restriction. Here's a similar question.

Community
  • 1
  • 1
Matt Sanders
  • 370
  • 2
  • 12
  • My reading of that SO post is that if I moved the form to my own domain then I could apply some CSS to it. I serve the form. I put it on another domain a long time ago to help with server load. It isn't really necessary anymore How much would it buy me to server the form from the same domain? – Gabe Spradlin Jun 18 '15 at 23:03
  • That can be a solution. You move your form to your domain and make a responsive CSS for the form. I don't know what you mean about the cost? – Maverick Jun 19 '15 at 08:31
  • oh, if you serve the form then why don't you just add some CSS onto the same page to make it responsive? although, looking at how it's built it's not very responsive-friendly. if you have control over the html you might want to consider changing it a bit. – Matt Sanders Jun 20 '15 at 02:07
  • @Maverick Sorry to use slang. "How much would it buy me..." was a way of asking me if moving the code to my domain was a complete solution or only a partial solution. In other words, would I be able to scale the form with some simple CSS once on my domain or would I still need to hack my way around some other issue with the form. – Gabe Spradlin Jun 25 '15 at 16:20
  • @MattSanders My customer created the form, I then copied it with their permission, and now serve it. I didn't want to rewrite the form entirely as it converts at a well established conversion rate. If I change the theme but not the form or ads, and the conversion rate drops then I know it was the theme. Change to another theme and try again. If I change the form as well as the theme then which is the issue? – Gabe Spradlin Jun 25 '15 at 16:24
  • @MattSanders As far as changing the CSS for the form to make it responsive and changing the HTML... Suggestions with example code would be greatly appreciated. – Gabe Spradlin Jun 25 '15 at 16:25
  • @gabe I've made a basic Jsfiddle [here](https://jsfiddle.net/hL8ha03o/) which makes the fields responsive. there's a bit more work you'll need to do, but you get the idea. The main problem here is that a lot of the forms content is actually a background image. So you'll probably need to change all of that. If you didn't mind changing the style of the form you could just not load the bg image on smaller views and add some content in there. You can do that by hiding/showing what you want with media queries. The CSS I've added is right down the bottom of the CSS box – Matt Sanders Jun 28 '15 at 21:21