Share
JotForm ist ein Service zum Erstellen von Formularen. Sie können Ihre Formulare auf ihrer Plattform erstellen und hosten und sie dann in Ihre Webseiten einfügen, wie Sie möchten. Heute werden wir uns die Formularentwurfstools ansehen, um zu sehen, was sie tun können.
Hinweis: Lesen Sie weiter, um mehr über den Designwettbewerb zu erfahren, den JotForm jetzt ausführt - Sie könnten $ 7.500 gewinnen!
Der Builder von JotForm ist ein Drag'n'Drop-Werkzeug, mit dem Sie eine Zeichenfläche und verschiedene Standard-Formularelemente laden können, um sie darauf anzuordnen.
Werkzeuge links, Leinwand rechtsNachdem Sie die Elemente angeordnet haben, können Sie deren Eigenschaften (z. B. den Namen und die ID einer Eingabe) ändern und festlegen, wie groß sie sein sollen, ob sie erforderlich sind und wie viele Eingaben erforderlich sind. Sie können sich auch direkt mit den Details befassen und das Design steuern. Sehen wir uns also an, wie das funktioniert.
Anstatt unser eigenes Formular zu erstellen, greifen wir eine der verfügbaren Vorlagen an, indem Sie auf klicken Formularvorlagen im oberen Menü. Wir haben ein PayPal-Zahlungsmittel:
Wenn wir die Vorlage zum ersten Mal öffnen, werden uns die Werkzeuge auf der linken Seite sowie ein Menü direkt darüber mit einer Reihe von Einstellungsoptionen angezeigt.
Wenn Sie diese Einstellungen vorerst ignorieren (Sie können die Funktionalität später jederzeit festlegen), klicken Sie auf Formularstil Tab gibt uns eine Vielzahl neuer Optionen.
Es gibt eine Reihe von Stilen und Optionen, die Sie direkt über dieses Menü verwenden können. Klicken Sie dazu auf Formular-Designer Element, um eine völlig andere Schnittstelle zu öffnen.
Nach einer kurzen Ladezeit:
Ihr Formular wird im Designer geöffnet, sodass Sie auf der rechten Seite des Bildschirms verschiedene Steuerelemente sehen.
Sofort sehen Sie eine Menge intuitiver Optionen zum Anklicken und Ausprobieren. Mal sehen, was zur Verfügung steht.
In der Reihenfolge von oben nach unten haben wir eine Reihe von Design-Panels in der Seitenleiste. Diese sind:
Beginnen mit, Farbschema gibt uns vordefinierte Optionen für die Hintergrund-, Text-, Rahmen- und Eingabefarben sowie die Möglichkeit, jede manuell festzulegen. Wenn Sie auf die erste vordefinierte Option klicken, erhalten Sie schnell einen dunkleren Hintergrund und etwas Tiefe.
Während Sie die Farben kontrollieren, überprüfen Sie die Fehlerzustand simulieren oder der Highlight simulieren Optionsfelder zeigen Ihnen einige der anderen dynamischen Zustände Ihres Formulars.
Wenn Sie auf das Zahnradsymbol rechts neben ihnen klicken, können Sie jeweils die Stileigenschaften bearbeiten. Hier habe ich gerade den Fehler etwas weniger grell gemacht.
Standardmäßig ist das Formularlayout vollständig statisch. Pixel überall, wo Sie hinschauen. Jedoch unter der Formularlayout Auf dieser Registerkarte finden Sie eine Option, um das Layout ansprechend zu gestalten (wahrscheinlich eine der ersten Änderungen, die Sie vornehmen möchten)..
Überprüfen der Machen Sie dieses Formular ansprechend Das Kontrollkästchen ändert die feste Pixelbreite (590px im obigen Beispiel) in a maximal Breite.
Schmales LayoutDanach werden die Etiketten auf schmaleren Bildschirmen sauber über Formulareingaben und Steuerelementen gestapelt.
Standardmäßig verwendet unsere Vorlage Verdana, jedoch die Schriftart-Optionen gibt uns viele Alternativen, einschließlich einer Reihe von Webfonts von Google.
Hier habe ich Roboto mit einer Grundschriftgröße von 16px gewählt (ich habe Google Material momentan fest in meinem Gehirn).
Optionen innerhalb der Beschriftungsstile Unterhalb des Fensters können Sie die Typografie für die Beschriftungen anpassen, z. B. Schriftgewicht und Ausrichtung.
Okay, wir haben die Tatsache besprochen, dass jedes Panel einzeln untersucht werden kann und die Designstile der Formularelemente bei Bedarf angepasst werden können. Es ist jedoch auch möglich, die visuellen Eigenschaften jedes Blocks direkt anzupassen.
Klicken wir zum Beispiel auf die Käufername Block.
Sie werden feststellen, dass in der Seitenleiste eine Reihe neuer Optionen angezeigt werden.
Die Eingabehöhe war etwas, das ich ändern wollte, also habe ich es mit 30px erhöht Textfeldhöhe Steuerung. Die Breiten müssen etwas sorgfältiger angepasst werden, wenn Sie mit einem responsiven Layout arbeiten, da anstelle von Prozentsätzen alles noch mit Pixeln festgelegt wird. Es ist daher leicht, Elemente aus Versehen aus dem Weg zu räumen, indem andere zu breit gemacht werden. Die Steuerelemente, die ich hier sehe, sind für das gesamte Formular gleich. Wenn ich hier die Eingabebreite verändere, ändert sich dies alles die Eingabebreiten.
Hinweis: Es ist wohl kein reaktionsschnelles Layout im eigentlichen Sinne, aber los geht's…
Sie möchten möglicherweise ein Branding in Ihrem Formular oder eine größere Bannergrafik oben. Um ein Bild Ihrer Wahl hochzuladen, klicken Sie auf Formulardeckel hinzufügen Schaltfläche oben auf der Leinwand.
In der Seitenleiste wird Ihnen ein weiteres Bedienfeld angezeigt (recht vertraut an diesem Punkt), um die Möglichkeit zu haben, ein Bild eines Steuerelements hochzuladen.
Da ich ein Logo hochgeladen habe, möchte ich nicht, dass es mit dem Formular übereinstimmt. Ich habe mich also beworben 40px von Rand unten.
Die Steuerelemente der Benutzeroberfläche sind alle gut und gut, aber was ist, wenn Sie eine genaue Kontrolle über die Formatvorlagen Ihres Formulars benötigen? Hier kommt die CSS-Registerkarte ins Spiel.
In diesem Fenster können Sie die gewünschten Stile eingeben, um Auswahlmöglichkeiten zur Auswahl zu geben. Tatsächlich ist der Code-Editor ziemlich gut ausgebildet, indem er während der Eingabe Code-Vorschläge macht, auf Fehler hinweist und die CSS-Syntax zum leichteren Lesen hervorhebt.
Hier habe ich beispielsweise die Hintergrundfarbe des Hauptformularbereichs manuell gesteuert. Das bedeutete, dass ich es wissen musste Was zu wählen, leider nur über das Inspector-Panel in meinem Browser möglich (für Anfänger nicht intuitiv). Soweit ich das beurteilen kann, gibt es keine Möglichkeit, anderen Elementen als Formulareingaben Klassen, IDs oder Attribute zuzuweisen.
.form-all ist anscheinend der Selektor, den ich brauchte.
Nun * das ist * FormularentwurfNachdem Sie die verschiedenen Optionen, die Ihnen im JotForm Designer zur Verfügung stehen, behandelt haben, ist es an der Zeit, sich zu wenden Ihre Hand dazu Während des gesamten Monats November bietet JotForm 7.500 US-Dollar für die beste Form, die mit ihren Werkzeugen hergestellt wird!
Es gibt auch sechs Unterkategorien, von denen jede $ 500 für die jeweiligen Gewinner bietet, sowie eine Reihe weiterer Preise. Ihr Formular muss mit dem Formular-Designer von JotForm erstellt werden und ist voll funktionsfähig. Werfen Sie einen Blick auf die Award-Seite, um weitere Informationen zu erhalten. Stellen Sie sicher, dass Sie sich vor dem 4. Dezember 2014 bewerben!
Accentsconagua