How can I change the layout of my form?

Hi,

Is it possible to use my form on this site but then use php of which you control.

Did i explain that correctly ?

Basically i have my own form & php but i am not always receiving the forms as i think my host is the problem.

Please advise.

Thanks very much.

I'm not sure what exactly you are trying to achieve.

There are certain ways where you can use PHP. 

For example:

- Webhooks: https://www.jotform.com/help/245-How-to-Setup-a-Webhook-with-JotForm

- Post submission data to Thank you Page: https://www.jotform.com/help/51-How-to-Post-Submission-Data-to-Thank-You-Page

- Sending your submissions to MYSQL database: https://www.jotform.com/help/126-How-to-send-Submissions-to-Your-MySQL-Database-Using-PHP

Let us know if that helps or if you have any further questions.

Thank you!

Hi,

This is my contact form that we have written etc

http://www.theremotedoctor.co.uk/contact-form.html

I think my host site"Site5" has problems with php because many forms do not enter my email inbox.

Can i use my own form on your site or must i use your templates ?

Thank you for additional information provided.

You will have to create that form with our tools in order to use it. And you don't need to use any PHP, you will just create a new form with our Form Builder.

You can check this guide on how to start: https://www.jotform.com/help/2-How-to-create-your-first-web-form

If you need any assistance please let us know, our Support is 24/7.

Thank you!

To be honest i made this form with some help because your way of using the code was different and not easy.

Some days i would check my form and the picture would be missing etc.

This is why i decided to make my own form.

Do you advise any way so i can get it to look like the link i sent you but with your builder as theis like i say is why i went my own way.

You're referring to this form:

It can be created with our Form Builder:

Here is my test form: https://www.jotform.com/70664275965973 so feel free to check it.

Fields can be adjusted of course and aligned. 

I'm not sure about the code you used before, but this is one of the easy ways to do it.

If I somehow misunderstood please let us know.

Thank you!

Morning,

I dont find this form builder easy to use at all.

Looking at my form 70671537117355 i am trying to get the fields aligned to the page like the WEB CONTACT FORM "blue one above"

I find the builder so hard to navigate.

I am trying without luck to center the fields equal to the page left / right.

Center the field title center to its field below.

Please check this guide, it's quite simple, I just changed the width of each field so they align properly:

Here is my clone of your form https://form.jotform.com/70673691178971 feel free to check it out.

And here is how it looks like:

I understood that that is what you had in mind.

If you need any further assistance please let us know.

Thank you!

Maybe i didnt explain correctly.

Its the position on the text & text box below.

See example below.

All the text names as shown by Red Arrow needs to be centered to the text box below,so it will be where the Blue arrow is pointing.

The right hand text boxes Black arrow need to be inline with the edge of the message box Green arrow.

I understand.

Here is the CSS Code for the left-hand side field labels:

#label_4{

margin-left:65px;

}

#label_6 {

margin-left:75px

}

#label_8 {

margin-left:30px

}

#label_10{

margin-left:45px

}

You can copy and paste it in your Custom CSS Field. And here is code for the right-hand side alignment:

#id_5, #id_7, #id_9,#id_13 {

margin-left:75px;

}

Here is how it looks like:

You can adjust more by changing the numbers in the code above.

And I did those changes on the same form: https://form.jotform.com/70673691178971

If you have any further questions please let us know.

Thank you!

Great 

 I will now need to also put the right side text Center to its text box. 

How did you find out the name etc 

labrl 10 ?

Here is how to find the field ID so you can apply the CSS:

And here is the CSS for the right-hand labels:

#label_5{

margin-left:65px;

}

#label_7{

  margin-left:30px;

}

#label_9{

  margin-left:50px;

}

#label_13 {

margin-left:65px;

}

Here is how it looks like:

And it is the same URL so you can check it out: https://form.jotform.com/70673691178971

If you need further adjustments please let us know.

Thank you!

Morning,

I have just switched on the pc but what i see on my screen is nothing like your example above.

I see. In which Browser are you viewing the form? It could be related to screen resolution as well.

Because I used fixed values for margins, it can happen that in smaller resolution fields will be disordered.

If that's the case please let us know so we can try to adjust it further. By the way, the form is still showing fine for me in my Browser (I'm on Chrome).

We'll wait for your response.

Thank you!

I am using windows 7 Chrome but also the same look on the iphone 6

Yure example,the very first one was spot on & looked great apart from the right hand fields not in the correct place.

 It would need to be responsive

You can use this code instead of the whole code above:

#label_4{

margin-left:25%;

}

#label_6 {

margin-left:32%;

}

#label_8 {

margin-left:14%;

}

#label_10{

margin-left:17%;

}

#id_5, #id_7, #id_9,#id_13 {

margin-left:10%;

}

#label_5{

margin-left:26%;

}

#label_7{

  margin-left:15%;

}

#label_9{

  margin-left:22%;

}

#label_13 {

margin-left:40%;

}

I replaced the px with percentage, it should work better when the screen size changes. 

I added the Mobile responsive widget as well https://form.jotform.com/70673691178971.

Please check how it works for you.

Thank you!

Im confused ?

Have you now fixed it as looking at the link you supplied shows no change etc or was i supposed to do something ?

This is what the layout should look like.

Currently its all over the pace now.

Look how the text is centered above the placeholder box.

Look how the text & placeholder is saligned with each other & message box

To display the form like your screenshot you need to remove  all the CSS code you currently have in your form. 

Then, this code will help you to display text centered: 

.form-label, .form-label-top{

    text-align: center;

    margin-left: auto;

    margin-right: auto;

}

input, textarea{

    text-align: center !important;

}

And if you also need to remove the blue solid background color and show only the page background image you need to inject this code: 

.form-all{

    background-color: transparent !important;

}

.supernova .form-all{

    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;

}

This guide will help you to inject the CSS code to your form: How-to-Inject-Custom-CSS-Codes

Here's my cloned form of yours: https://form.jotformpro.com/70684839083972 

Hope this helps. 

tHIS FORM IS NEARLY THERE SEE 70674316705356

The right hand text fields as shown by the red arrows nee3d to be aligned with the 2 green arrows,right hand edge of message box.

You could try injecting the following CSS code to your form: 

.form-line:not([data-type="control_textarea"]):not([data-type="control_button"]){

    width: 50%;

    padding-right: 0px;

}

 .form-col-2, .form-col-4, .form-col-6, .form-col-8{

    padding-right: 0px;

}

.form-col-2 .form-input-wide, .form-col-4 .form-input-wide, .form-col-6 .form-input-wide, .form-col-8 .form-input-wide{

    margin-left: 5%;

}

This should be the result: https://form.jotformpro.com/70685729281971 

All the text titles MUST be centered to the placeholder box that they sit above

Please change this:

1) Change margin-left to 9%:

2) Change drop-down width to 230px:

And add this CSS code to align the left-hand-side:

#label_4 {

    margin-right: 20%;

}

#label_6 {

    margin-right: 20%;

}

#label_8 {

    margin-right: 25%;

}

#label_10 {

    margin-right: 25%;

}

Let us know how it works.

Thank you!

I mentioned that i found this hard to navigate and so far weve been trying for days to get to where it needs to be.

See here http://form.jotformeu.com/form/70674316705356

Placeholders are correct.

The BLACK text needs to be centered to its placeholder FIRST NAME LAST NAME etc etc

The problem is that you want to customize the position of fields and its labels in the form, and that is not an issue unless the screen size is changed (i.e. mobile devices). So we didn't use the fixed width to adjust your form but a percentage. 

And here is my last form with adjustments you needed: https://form.jotformpro.com/70686632262964

Here is how it looks like on Desktop:

And here is on mobile:

You can adjust the width of fields more, if needed, to fit better on mobile. 

When it comes to customizing the fields, like you need it, CSS must be used to achieve that. If you need to reposition certain labels or fields you can just increase/decrease the numbers for each label in the code provided above.